SlideShare a Scribd company logo

Web Accessibility Overview

WCAG compliance and making web products easy to use for everyone.

1 of 23
Download to read offline
making our products easy to use for everyone
Will Jayroe
Front-End Technology Manager
Solutions Architecture Team
November 2015
Who is Web Accessibility for?
“Being accessible is about
making your website, with all of
its data and functions, available
for anyone, no matter how they
have to use your website, or
what difficulties they might
have.”
Accessibility Handbook by Katie Cunningham
Web Accessibility2
Who is Web Accessibility for?
Accessibility benefits people with:
• visual
• auditory
• physical
• speech
• cognitive
• neurological disabilities
And… people without disabilities.
Web Accessibility3
www.apple.com/accessibility/
Who is Web Accessibility for?
Accessibility is for everyone – it means
making our products flexible enough to
meet a broad range of preferences,
needs and situations.
This flexibility benefits anyone with:
• slow or limited Internet connectivity
• “temporary disabilities” such as a
broken arm or eye surgery
• changing abilities due to aging
Web Accessibility4
www.samsung.com/uk/accessibility/
Why build for Accessibility?
• Accessibility has been a reoccurring issue on
products such as Traversa, Emirates and any UI
that Travelport maintains for airlines – resulting in
expensive redesign and refactoring.
• Now is the time to establish corporate standards
around building accessible products. Front-
loading Accessibility will require less effort and
expense than retro-fitting it.
• Accessibility benefits our “power user” customers
with features like closed captioning for training
videos, rapid form entry tools like correct tab
order, access keys and logical page layout.
Web Accessibility5
as seen on Lee Fulford’s desk
WCAG
Published by the W3C, the Web Content Accessibility
Guidelines (WCAG) standards are meant to be the
baseline of success criteria for accessibility compliance.
WCAG covers a wide range of recommendations for
making Web content more accessible. Following these
guidelines will make content accessible to a wider range
of people with disabilities, including blindness and low
vision, deafness and hearing loss, learning disabilities,
cognitive limitations, limited movement, speech
disabilities, photosensitivity and combinations of these.
Compliance can be tested by both machine and human
evaluation as long as criterion has been satisfied with a
high level of confidence. Organizations like WebAIM offer
services for external verification of compliance.
Web Accessibility6
The World Wide Web Consortium
(W3C) is an international community
where Member organizations, a full-
time staff, and the public work
together to develop Web standards.
Led by Web inventor Tim Berners-Lee
and CEO Jeffrey Jaffe, W3C's mission
is to lead the Web to its full potential.
W3C
http://www.w3.org/TR/WCAG/
Ad

Recommended

#Wtf is web accessibility
#Wtf is web accessibility#Wtf is web accessibility
#Wtf is web accessibilityDomenico Monaco
 
Accessibility and why it matters
Accessibility and why it mattersAccessibility and why it matters
Accessibility and why it mattersMargarida Sousa
 
Web accessibility workshop 1
Web accessibility workshop 1Web accessibility workshop 1
Web accessibility workshop 1Vladimir Tomberg
 
Rapid Introduction to Web Accessibility
Rapid Introduction to Web AccessibilityRapid Introduction to Web Accessibility
Rapid Introduction to Web AccessibilityAll Things Open
 
Accessible Web Design
Accessible Web DesignAccessible Web Design
Accessible Web Design3Play Media
 
Understanding and Supporting Web Accessibility
Understanding and Supporting Web AccessibilityUnderstanding and Supporting Web Accessibility
Understanding and Supporting Web AccessibilityRachel Cherry
 

More Related Content

What's hot

Web Content Accessibility Guidelines
Web Content Accessibility GuidelinesWeb Content Accessibility Guidelines
Web Content Accessibility GuidelinesPurnimaAgarwal6
 
Web Accessibility for Web Developers
Web Accessibility for Web DevelopersWeb Accessibility for Web Developers
Web Accessibility for Web DevelopersAlexander Loechel
 
My talk at Riga 2016 Web Accessibility Meetup
My talk at Riga 2016 Web Accessibility MeetupMy talk at Riga 2016 Web Accessibility Meetup
My talk at Riga 2016 Web Accessibility MeetupVladimir Tomberg
 
Web accessibility 101: The why, who, what, and how of "a11y"
Web accessibility 101: The why, who, what, and how of "a11y"Web accessibility 101: The why, who, what, and how of "a11y"
Web accessibility 101: The why, who, what, and how of "a11y"ecentricarts
 
A Half Day Workshop on Building Accessible Websites For People With Disabilities
A Half Day Workshop on Building Accessible Websites For People With DisabilitiesA Half Day Workshop on Building Accessible Websites For People With Disabilities
A Half Day Workshop on Building Accessible Websites For People With DisabilitiesAayush Shrestha
 
Role of-engineering-best-practices-to-create-an-inclusive-web final-1
Role of-engineering-best-practices-to-create-an-inclusive-web final-1Role of-engineering-best-practices-to-create-an-inclusive-web final-1
Role of-engineering-best-practices-to-create-an-inclusive-web final-1Srinivasu Chakravarthula
 
Making Web Easily Accessible with Web Accessibility
Making Web Easily Accessible with Web AccessibilityMaking Web Easily Accessible with Web Accessibility
Making Web Easily Accessible with Web AccessibilityMultidots Solutions Pvt Ltd
 
Enhancing the User Experience for People with Disabilities
Enhancing the User Experience for People with DisabilitiesEnhancing the User Experience for People with Disabilities
Enhancing the User Experience for People with DisabilitiesUXPA International
 
People First Accessibility
People First AccessibilityPeople First Accessibility
People First AccessibilityTrisha Salas
 
Basics of Web Accessibility
Basics of Web AccessibilityBasics of Web Accessibility
Basics of Web AccessibilityMoin Shaikh
 
How to create accessible websites - Web Accessibility Summit
How to create accessible websites - Web Accessibility SummitHow to create accessible websites - Web Accessibility Summit
How to create accessible websites - Web Accessibility SummitRachel Cherry
 
TCEA Virtual Learning SIG Lunch and Learn: Understanding Digital Accessibility
TCEA Virtual Learning SIG  Lunch and Learn: Understanding Digital AccessibilityTCEA Virtual Learning SIG  Lunch and Learn: Understanding Digital Accessibility
TCEA Virtual Learning SIG Lunch and Learn: Understanding Digital AccessibilityRaymond Rose
 
Including Everyone: Web Accessibility 101
Including Everyone: Web Accessibility 101Including Everyone: Web Accessibility 101
Including Everyone: Web Accessibility 101Helena Zubkow
 
Marketing Without Barriers: Considering Digital Accessibility for Customers a...
Marketing Without Barriers: Considering Digital Accessibility for Customers a...Marketing Without Barriers: Considering Digital Accessibility for Customers a...
Marketing Without Barriers: Considering Digital Accessibility for Customers a...Whole Brain Group, LLC
 
ADA Compliance & Website Accessibility
ADA Compliance & Website AccessibilityADA Compliance & Website Accessibility
ADA Compliance & Website AccessibilitySilverTech
 
Web Accessibility: MISSION POSSIBLE!
Web Accessibility: MISSION POSSIBLE!Web Accessibility: MISSION POSSIBLE!
Web Accessibility: MISSION POSSIBLE!Charity Dynamics
 

What's hot (20)

Web Content Accessibility Guidelines
Web Content Accessibility GuidelinesWeb Content Accessibility Guidelines
Web Content Accessibility Guidelines
 
Web Accessibility for Web Developers
Web Accessibility for Web DevelopersWeb Accessibility for Web Developers
Web Accessibility for Web Developers
 
My talk at Riga 2016 Web Accessibility Meetup
My talk at Riga 2016 Web Accessibility MeetupMy talk at Riga 2016 Web Accessibility Meetup
My talk at Riga 2016 Web Accessibility Meetup
 
Web accessibility 101: The why, who, what, and how of "a11y"
Web accessibility 101: The why, who, what, and how of "a11y"Web accessibility 101: The why, who, what, and how of "a11y"
Web accessibility 101: The why, who, what, and how of "a11y"
 
A Half Day Workshop on Building Accessible Websites For People With Disabilities
A Half Day Workshop on Building Accessible Websites For People With DisabilitiesA Half Day Workshop on Building Accessible Websites For People With Disabilities
A Half Day Workshop on Building Accessible Websites For People With Disabilities
 
Role of-engineering-best-practices-to-create-an-inclusive-web final-1
Role of-engineering-best-practices-to-create-an-inclusive-web final-1Role of-engineering-best-practices-to-create-an-inclusive-web final-1
Role of-engineering-best-practices-to-create-an-inclusive-web final-1
 
Making Web Easily Accessible with Web Accessibility
Making Web Easily Accessible with Web AccessibilityMaking Web Easily Accessible with Web Accessibility
Making Web Easily Accessible with Web Accessibility
 
Enhancing the User Experience for People with Disabilities
Enhancing the User Experience for People with DisabilitiesEnhancing the User Experience for People with Disabilities
Enhancing the User Experience for People with Disabilities
 
People First Accessibility
People First AccessibilityPeople First Accessibility
People First Accessibility
 
Web Accessibility
Web AccessibilityWeb Accessibility
Web Accessibility
 
Basics of Web Accessibility
Basics of Web AccessibilityBasics of Web Accessibility
Basics of Web Accessibility
 
How to create accessible websites - Web Accessibility Summit
How to create accessible websites - Web Accessibility SummitHow to create accessible websites - Web Accessibility Summit
How to create accessible websites - Web Accessibility Summit
 
TCEA Virtual Learning SIG Lunch and Learn: Understanding Digital Accessibility
TCEA Virtual Learning SIG  Lunch and Learn: Understanding Digital AccessibilityTCEA Virtual Learning SIG  Lunch and Learn: Understanding Digital Accessibility
TCEA Virtual Learning SIG Lunch and Learn: Understanding Digital Accessibility
 
Including Everyone: Web Accessibility 101
Including Everyone: Web Accessibility 101Including Everyone: Web Accessibility 101
Including Everyone: Web Accessibility 101
 
Marketing Without Barriers: Considering Digital Accessibility for Customers a...
Marketing Without Barriers: Considering Digital Accessibility for Customers a...Marketing Without Barriers: Considering Digital Accessibility for Customers a...
Marketing Without Barriers: Considering Digital Accessibility for Customers a...
 
Web accessibility
Web accessibilityWeb accessibility
Web accessibility
 
ADA Compliance & Website Accessibility
ADA Compliance & Website AccessibilityADA Compliance & Website Accessibility
ADA Compliance & Website Accessibility
 
Introduction To WCAG 2.0
Introduction To WCAG 2.0Introduction To WCAG 2.0
Introduction To WCAG 2.0
 
Web accessibility
Web accessibilityWeb accessibility
Web accessibility
 
Web Accessibility: MISSION POSSIBLE!
Web Accessibility: MISSION POSSIBLE!Web Accessibility: MISSION POSSIBLE!
Web Accessibility: MISSION POSSIBLE!
 

Viewers also liked

A Web Design Framework for Improved Accessibility for People with Disabilitie...
A Web Design Framework for Improved Accessibility for People with Disabilitie...A Web Design Framework for Improved Accessibility for People with Disabilitie...
A Web Design Framework for Improved Accessibility for People with Disabilitie...Yeliz Yesilada
 
原來治療癌症這麼簡單
原來治療癌症這麼簡單原來治療癌症這麼簡單
原來治療癌症這麼簡單Jaing Lai
 
How to make on line forms beautiful
How to make on line forms beautifulHow to make on line forms beautiful
How to make on line forms beautifulUser Vision
 
CSUN 2017 Success Criteria: Dependencies and Prioritization
CSUN 2017 Success Criteria: Dependencies and PrioritizationCSUN 2017 Success Criteria: Dependencies and Prioritization
CSUN 2017 Success Criteria: Dependencies and PrioritizationSean Kelly
 
Integration of Accessibility Requirements in the Design of Multimedia User Ag...
Integration of Accessibility Requirements in the Design of Multimedia User Ag...Integration of Accessibility Requirements in the Design of Multimedia User Ag...
Integration of Accessibility Requirements in the Design of Multimedia User Ag...Grupo HULAT
 
Rethinking Accessibility: Role-Based Analysis of WCAG 2.0 - CSUN 2017
Rethinking Accessibility: Role-Based Analysis of WCAG 2.0 - CSUN 2017Rethinking Accessibility: Role-Based Analysis of WCAG 2.0 - CSUN 2017
Rethinking Accessibility: Role-Based Analysis of WCAG 2.0 - CSUN 2017Bill Tyler
 

Viewers also liked (6)

A Web Design Framework for Improved Accessibility for People with Disabilitie...
A Web Design Framework for Improved Accessibility for People with Disabilitie...A Web Design Framework for Improved Accessibility for People with Disabilitie...
A Web Design Framework for Improved Accessibility for People with Disabilitie...
 
原來治療癌症這麼簡單
原來治療癌症這麼簡單原來治療癌症這麼簡單
原來治療癌症這麼簡單
 
How to make on line forms beautiful
How to make on line forms beautifulHow to make on line forms beautiful
How to make on line forms beautiful
 
CSUN 2017 Success Criteria: Dependencies and Prioritization
CSUN 2017 Success Criteria: Dependencies and PrioritizationCSUN 2017 Success Criteria: Dependencies and Prioritization
CSUN 2017 Success Criteria: Dependencies and Prioritization
 
Integration of Accessibility Requirements in the Design of Multimedia User Ag...
Integration of Accessibility Requirements in the Design of Multimedia User Ag...Integration of Accessibility Requirements in the Design of Multimedia User Ag...
Integration of Accessibility Requirements in the Design of Multimedia User Ag...
 
Rethinking Accessibility: Role-Based Analysis of WCAG 2.0 - CSUN 2017
Rethinking Accessibility: Role-Based Analysis of WCAG 2.0 - CSUN 2017Rethinking Accessibility: Role-Based Analysis of WCAG 2.0 - CSUN 2017
Rethinking Accessibility: Role-Based Analysis of WCAG 2.0 - CSUN 2017
 

Similar to Web Accessibility Overview

Accessibility And 508 Compliance In 2009
Accessibility And 508 Compliance In 2009Accessibility And 508 Compliance In 2009
Accessibility And 508 Compliance In 2009Emagination ®
 
Forms for All: Building Accessibility into UiPath App Design
Forms for All: Building Accessibility into UiPath App DesignForms for All: Building Accessibility into UiPath App Design
Forms for All: Building Accessibility into UiPath App DesignDianaGray10
 
Seth Duffy Accessibility97035
Seth Duffy   Accessibility97035Seth Duffy   Accessibility97035
Seth Duffy Accessibility97035FNian
 
Ideas 5 - Roger Hudson - Understanding WCAG 2.0
Ideas 5 - Roger Hudson - Understanding WCAG 2.0Ideas 5 - Roger Hudson - Understanding WCAG 2.0
Ideas 5 - Roger Hudson - Understanding WCAG 2.0awia
 
Web accessibility for municipalities - How to meet compliance requirements an...
Web accessibility for municipalities - How to meet compliance requirements an...Web accessibility for municipalities - How to meet compliance requirements an...
Web accessibility for municipalities - How to meet compliance requirements an...Intelliware Development Inc.
 
Web Accessibility: Overview and Paths to Success
Web Accessibility: Overview and Paths to SuccessWeb Accessibility: Overview and Paths to Success
Web Accessibility: Overview and Paths to SuccessAcquia
 
Website Accessibility FAQs by Mediacurrent
Website Accessibility FAQs by MediacurrentWebsite Accessibility FAQs by Mediacurrent
Website Accessibility FAQs by MediacurrentMediacurrent
 
How to engineer accessible websites
How to engineer accessible websitesHow to engineer accessible websites
How to engineer accessible websitesRachel Cherry
 
Wipa Seminar WCAG 2.0
Wipa Seminar WCAG 2.0Wipa Seminar WCAG 2.0
Wipa Seminar WCAG 2.0Roger Hudson
 
Lightning Talks by Globant - Accessibility for everyone testing tools
Lightning Talks by Globant - Accessibility for everyone testing toolsLightning Talks by Globant - Accessibility for everyone testing tools
Lightning Talks by Globant - Accessibility for everyone testing toolsGlobant
 
Wordcamp buffalo
Wordcamp buffaloWordcamp buffalo
Wordcamp buffalothegeniusca
 
Web Accessibility Acronyms - Spring Break Conference 2008
Web Accessibility Acronyms - Spring Break Conference 2008Web Accessibility Acronyms - Spring Break Conference 2008
Web Accessibility Acronyms - Spring Break Conference 2008Andrea Hill
 
Web accessibility & AODA compliance
Web accessibility & AODA complianceWeb accessibility & AODA compliance
Web accessibility & AODA complianceNilenth Selvaraja
 
Accessibility Quick Wins
Accessibility Quick WinsAccessibility Quick Wins
Accessibility Quick WinsJeff Reynolds
 
Wordcamp Toronto 2013
Wordcamp Toronto 2013Wordcamp Toronto 2013
Wordcamp Toronto 2013thegeniusca
 
Do the right thing: accessibility and inclusive design (with Drupal)
Do the right thing: accessibility and inclusive design (with Drupal)Do the right thing: accessibility and inclusive design (with Drupal)
Do the right thing: accessibility and inclusive design (with Drupal)cspin
 

Similar to Web Accessibility Overview (20)

Accessibility And 508 Compliance In 2009
Accessibility And 508 Compliance In 2009Accessibility And 508 Compliance In 2009
Accessibility And 508 Compliance In 2009
 
Forms for All: Building Accessibility into UiPath App Design
Forms for All: Building Accessibility into UiPath App DesignForms for All: Building Accessibility into UiPath App Design
Forms for All: Building Accessibility into UiPath App Design
 
Seth Duffy Accessibility97035
Seth Duffy   Accessibility97035Seth Duffy   Accessibility97035
Seth Duffy Accessibility97035
 
Ideas 5 - Roger Hudson - Understanding WCAG 2.0
Ideas 5 - Roger Hudson - Understanding WCAG 2.0Ideas 5 - Roger Hudson - Understanding WCAG 2.0
Ideas 5 - Roger Hudson - Understanding WCAG 2.0
 
Web accessibility for municipalities - How to meet compliance requirements an...
Web accessibility for municipalities - How to meet compliance requirements an...Web accessibility for municipalities - How to meet compliance requirements an...
Web accessibility for municipalities - How to meet compliance requirements an...
 
Web Accessibility: Overview and Paths to Success
Web Accessibility: Overview and Paths to SuccessWeb Accessibility: Overview and Paths to Success
Web Accessibility: Overview and Paths to Success
 
Website Accessibility FAQs by Mediacurrent
Website Accessibility FAQs by MediacurrentWebsite Accessibility FAQs by Mediacurrent
Website Accessibility FAQs by Mediacurrent
 
doumi94
doumi94doumi94
doumi94
 
How to engineer accessible websites
How to engineer accessible websitesHow to engineer accessible websites
How to engineer accessible websites
 
WCAG
WCAGWCAG
WCAG
 
Wipa Seminar WCAG 2.0
Wipa Seminar WCAG 2.0Wipa Seminar WCAG 2.0
Wipa Seminar WCAG 2.0
 
Html5 aria-css-ibm-csun-2016
Html5 aria-css-ibm-csun-2016Html5 aria-css-ibm-csun-2016
Html5 aria-css-ibm-csun-2016
 
Lightning Talks by Globant - Accessibility for everyone testing tools
Lightning Talks by Globant - Accessibility for everyone testing toolsLightning Talks by Globant - Accessibility for everyone testing tools
Lightning Talks by Globant - Accessibility for everyone testing tools
 
Wordcamp buffalo
Wordcamp buffaloWordcamp buffalo
Wordcamp buffalo
 
Web Accessibility Acronyms - Spring Break Conference 2008
Web Accessibility Acronyms - Spring Break Conference 2008Web Accessibility Acronyms - Spring Break Conference 2008
Web Accessibility Acronyms - Spring Break Conference 2008
 
S8746
S8746S8746
S8746
 
Web accessibility & AODA compliance
Web accessibility & AODA complianceWeb accessibility & AODA compliance
Web accessibility & AODA compliance
 
Accessibility Quick Wins
Accessibility Quick WinsAccessibility Quick Wins
Accessibility Quick Wins
 
Wordcamp Toronto 2013
Wordcamp Toronto 2013Wordcamp Toronto 2013
Wordcamp Toronto 2013
 
Do the right thing: accessibility and inclusive design (with Drupal)
Do the right thing: accessibility and inclusive design (with Drupal)Do the right thing: accessibility and inclusive design (with Drupal)
Do the right thing: accessibility and inclusive design (with Drupal)
 

Web Accessibility Overview

  • 1. making our products easy to use for everyone Will Jayroe Front-End Technology Manager Solutions Architecture Team November 2015
  • 2. Who is Web Accessibility for? “Being accessible is about making your website, with all of its data and functions, available for anyone, no matter how they have to use your website, or what difficulties they might have.” Accessibility Handbook by Katie Cunningham Web Accessibility2
  • 3. Who is Web Accessibility for? Accessibility benefits people with: • visual • auditory • physical • speech • cognitive • neurological disabilities And… people without disabilities. Web Accessibility3 www.apple.com/accessibility/
  • 4. Who is Web Accessibility for? Accessibility is for everyone – it means making our products flexible enough to meet a broad range of preferences, needs and situations. This flexibility benefits anyone with: • slow or limited Internet connectivity • “temporary disabilities” such as a broken arm or eye surgery • changing abilities due to aging Web Accessibility4 www.samsung.com/uk/accessibility/
  • 5. Why build for Accessibility? • Accessibility has been a reoccurring issue on products such as Traversa, Emirates and any UI that Travelport maintains for airlines – resulting in expensive redesign and refactoring. • Now is the time to establish corporate standards around building accessible products. Front- loading Accessibility will require less effort and expense than retro-fitting it. • Accessibility benefits our “power user” customers with features like closed captioning for training videos, rapid form entry tools like correct tab order, access keys and logical page layout. Web Accessibility5 as seen on Lee Fulford’s desk
  • 6. WCAG Published by the W3C, the Web Content Accessibility Guidelines (WCAG) standards are meant to be the baseline of success criteria for accessibility compliance. WCAG covers a wide range of recommendations for making Web content more accessible. Following these guidelines will make content accessible to a wider range of people with disabilities, including blindness and low vision, deafness and hearing loss, learning disabilities, cognitive limitations, limited movement, speech disabilities, photosensitivity and combinations of these. Compliance can be tested by both machine and human evaluation as long as criterion has been satisfied with a high level of confidence. Organizations like WebAIM offer services for external verification of compliance. Web Accessibility6 The World Wide Web Consortium (W3C) is an international community where Member organizations, a full- time staff, and the public work together to develop Web standards. Led by Web inventor Tim Berners-Lee and CEO Jeffrey Jaffe, W3C's mission is to lead the Web to its full potential. W3C http://www.w3.org/TR/WCAG/
  • 7. Web Accessibility Standards Section 508 Compliance In 1998, Congress passed the "Section 508" amendment to the Rehabilitation Act of 1973. Section 508 requires that all websites created for the United States government be accessible to everyone, in spite of individual handicaps. Any website paid for by federal funds must follow the requirements laid out in this amendment. WCAG 2.0 Level AA Compliance As part of the Air Carrier Access Act of 1986, the DOT issued a series of rules based on WCAG 2.0 Level AA compliance that focuses on the use of accessible technology and require airlines, OTAs and airports to make their websites and airport kiosks accessible. Web Accessibility7 We are a travel content provider. The further away from the source of the content (for example, hotel room images), the more you lose context of the content. Descriptive, contextual data should be included in our services and stay attached to the content through any context. This will ensure context is maintained for both B2B and B2C consumption. Since WCAG 2.0 Compliance is called for in the DOT mandate and backed by the W3C, WCAG is the appropriate standards choice. Travelport
  • 8. Understanding WCAG 2.0 Levels Standards Conformance Levels Conformance to the standard means that the requirements of the standard (the Success Criteria) are met and that there is no content which violates the Success Criteria. W3C Web Content Accessibility Guidelines (WCAG) 2.0 – http://www.w3.org/TR/WCAG20/ WCAG 2.0 Success Criteria – All content must be Perceivable, Operable, Understandable and Robust. Level A – For Level A conformance (the minimum level of conformance), the Web page satisfies all the Level A Success Criteria, or a conforming alternate version is provided. Level AA – For Level AA conformance, the Web page satisfies all the Level A and Level AA Success Criteria, or a Level AA conforming alternate version is provided. Level AAA – For Level AAA conformance, the Web page satisfies all the Level A, Level AA and Level AAA Success Criteria, or a Level AAA conforming alternate version is provided. Web Accessibility8
  • 9. Areas of Accessibility There are four major areas that should be addressed to meet accessibility standards: • Visual Accessibility • Audio Accessibility • Physical Accessibility • Cognitive Disabilities Web Accessibility9
  • 10. Visual Accessibility For those with complete blindness, very little vision and information processing disorders the goal is to create a website accessible to a screen reader (JAWS, Apple’s VoiceOver and Microsoft’s Narrator). Screen Reader Obstacles • Poorly structured HTML • Images with no meaningful alt text • Features that require vision, or where the fallback is poorly implemented • Repetitive items that cannot be skipped • Poorly structured forms Web Accessibility10
  • 11. Visual – HTML and Formatting Web Accessibility11 Accessibility Handbook by Katie Cunningham Logical Flow Flow is important because screen readers will read from the top of a page to the bottom. To quickly test logical flow, use your browser’s developer tools to turn off CSS.
  • 12. Visual – HTML and Formatting HTML Headers HTML header tags should descend logically and should be used as meaningful, semantic descriptors of content sections. Unfortunately, developers will often use headers to visually style text while ignoring their proper semantic function. This breaks both the logical flow and the ability to skip from one content section to another. Web Accessibility12 HTML <h1>Top Level Page Title: there should be only one h1 per page</h1> <h2>Major Section</h2> <h3>Minor Section</h3> <h2>Major Section</h2> <h3>Minor Section</h3> <h4>Sub Section</h4> <h3>Minor Section</h3>
  • 13. Visual – HTML and Formatting Skipping Around There are many parts of a website (like navigation) that a screen reader users may want to skip. This is easily accomplished by adding skip links that are only read by screen readers. Web Accessibility13 HTML <a href=“#content” class=“hidden”>Skip to content</a> Before the content: <a name=“content”></a> <h2>Chapter 1</h2> <p>It was a light and sunny day...</p>
  • 14. Visual – Images, Graphs and Non-text Content Non-text Content Must Be Perceivable Information and user interface components must be presented to users in ways they can perceive. Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language. Web Accessibility14 Good Alt-Text Example: A beautifully appointed hotel room styled in modern décor featuring a King-sided bed, two comfortable armchairs and plenty of space to spread out. Bad Alt-Text Example: The best value in Las Vegas hotels is the Landmark Hotel King.
  • 15. Visual Accessibility Additional Topics • Tables – use tables for tabular data only, tables should not be used for layout. • Images – non-decorative images should be annotated and include alt text • Graphs and Diagrams – include descriptions of the information being presented • Forms – validation errors and dynamic messaging should be vocal • CAPTCHA and challenge responses – include audio option • JavaScript – ideally, the site would work without JavaScript but this is often not practical for business applications. JavaScript should be unobtrusive and not inline. • iframes – can be disorienting unless set up correctly with screen readers in mind • Flash – often used for animated advertising, can be made accessible but often is not • Access keys – allows easy movement by keyboard only input • WAI-ARIA – descriptive meta-data added to HTML elements that define the role of elements for screen readers Web Accessibility15
  • 16. Other Types of Visual Accessibility For those with low vision and color blindness. Annoyances • Sites that lose functionality or content when font sizes are changed. • Colors that do not contrast highly enough • Text in images • Confusing forms with poor cursor placement, color contrast or tab order • Unannotated diagrams, graphs and maps Web Accessibility16
  • 17. Audio Accessibility For those who are profoundly deaf, partially deaf and those who wear hearing aids. The goal is to make certain that nothing is hidden from those who cannot hear audio. Annoyances • Videos without captioning • Videos with poor captioning • Interactive features with no visual alerts, such as feature explorers where audio is utilized • Live Chat common in help systems and video conferencing Web Accessibility17
  • 18. Physical Accessibility Those who have been paralyzed, broken or lost their dominant arm, keyboard only users and those with debilitating diseases such as cerebral palsy and Parkinsons. This is about addressing the actual usability of the site. Annoyances • Interfaces that require a mouse • Interfaces that require a keyboard • Interactions that need high precision or are time limited • Interactions that are easily triggered, but difficult to close like fly out menus • Pop-Ups and modals can be confusing for user’s focus and difficult to close • Try testing without a mouse, without a keyboard, use non-dominate hand for mouse Web Accessibility18
  • 19. Cognitive Disabilities Those who have mild to severe dyslexia, ADD or ADHD and anyone with an information-processing disorder. Annoyances • Certain Fonts – sans serif is best • Sentence and paragraph length • Color choices – high contrast is best • Images behind text – distracting for those with dyslexia and ADD/ADHD and may also render text unreadable • Justified text (left or right alignment is fine) • Icons and images that are not meaningful • Animations, especially without meaning • Advertisements with sound and animation • Timed tasks • Inconsistent User Experience Web Accessibility19
  • 20. Appendix A – WCAG 2.0 Checklist WebAIM's WCAG 2.0 Checklist for HTML documents http://webaim.org/standards/wcag/checklist • Perceivable - Web content is made available to the senses - sight, hearing, and/or touch – Text Alternatives: Provide text alternatives for any non-text content – Time-based Media: Provide alternatives for time-based media – Adaptable: Create content that can be presented in different ways (for example simpler layout) without losing information or structure – Distinguishable: Make it easier for users to see and hear content including separating foreground from background • Operable - Interface forms, controls, and navigation are operable – Keyboard Accessible: Make all functionality available from a keyboard – Enough Time: Provide users enough time to read and use content – Seizures: Do not design content in a way that is known to cause seizures – Navigable: Provide ways to help users navigate, find content, and determine where they are Web Accessibility20
  • 21. Appendix A – WCAG 2.0 Checklist WebAIM's WCAG 2.0 Checklist for HTML documents http://webaim.org/standards/wcag/checklist • Understandable - Content and interface are understandable – Readable: Make text content readable and understandable – Predictable: Make Web pages appear and operate in predictable ways – Input Assistance: Help users avoid and correct mistakes • Robust - Content can be used reliably by a wide variety of user agents, including assistive technologies – Compatible: Maximize compatibility with current and future user agents, including assistive technologies Web Accessibility21
  • 22. Appendix B – Resources • Firefox Add-on: Fangs Screen Reader Emulator – https://addons.mozilla.org/en- US/firefox/addon/fangs-screen-reader-emulator/ • Dropdown Menus with More Forgiving Mouse Movement Paths – https://css- tricks.com/dropdown-menus-with-more-forgiving-mouse-movement-paths/ • 7 Things Every Designer Needs to Know about Accessibility – https://medium.com/salesforce-ux/7-things-every-designer-needs-to-know- about-accessibility-64f105f0881b • The Definitive Guide To The Alt-Text Field – https://www.phase2technology.com/no-more-excuses-the-definitive-guide-to- the-alt-text-field/ Web Accessibility22

Editor's Notes

  1. This is the longest section, the other sections are very brief.