Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Web Accessibility Overview


Published on

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

Published in: Travel
  • Be the first to comment

Web Accessibility Overview

  1. 1. making our products easy to use for everyone Will Jayroe Front-End Technology Manager Solutions Architecture Team November 2015
  2. 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. 3. Who is Web Accessibility for? Accessibility benefits people with: • visual • auditory • physical • speech • cognitive • neurological disabilities And… people without disabilities. Web Accessibility3
  4. 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
  5. 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. 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
  7. 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. 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 – 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 20. Appendix A – WCAG 2.0 Checklist WebAIM's WCAG 2.0 Checklist for HTML documents • 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. 21. Appendix A – WCAG 2.0 Checklist WebAIM's WCAG 2.0 Checklist for HTML documents • 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. 22. Appendix B – Resources • Firefox Add-on: Fangs Screen Reader Emulator – US/firefox/addon/fangs-screen-reader-emulator/ • Dropdown Menus with More Forgiving Mouse Movement Paths – https://css- • 7 Things Every Designer Needs to Know about Accessibility – about-accessibility-64f105f0881b • The Definitive Guide To The Alt-Text Field – the-alt-text-field/ Web Accessibility22