Web Accessibilitymaking our products easy to use for everyone

Will JayroeFront-End Technology ManagerSolutions Architecture Team

November 2015

Web Accessibility2

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 Accessibility3

Who is Web Accessibility for?

Accessibility benefits people with:

• visual • auditory• physical• speech• cognitive• neurological disabilities

And… people without disabilities.www.apple.com/accessibility/

Web Accessibility4

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 agingwww.samsung.com/uk/accessibility/

Web Accessibility5

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. as seen on Lee Fulford’s desk

Web Accessibility6

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.

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/

Web Accessibility7

Web Accessibility Standards

Section 508 ComplianceIn 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 ComplianceAs 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.

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

Web Accessibility8

Understanding WCAG 2.0 Levels

Standards Conformance LevelsConformance 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 Accessibility9

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 Accessibility10

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 Accessibility11

Visual – HTML and Formatting

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.

Web Accessibility12

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.

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>

Web Accessibility13

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.

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>

Web Accessibility14

Visual – Images, Graphs and Non-text Content

Non-text Content Must Be PerceivableInformation 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.

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.

Web Accessibility15

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 Accessibility16

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 Accessibility17

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 Accessibility18

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 Accessibility19

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 Accessibility20

Appendix A – WCAG 2.0 Checklist

WebAIM's WCAG 2.0 Checklist for HTML documentshttp://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 Accessibility21

Appendix A – WCAG 2.0 Checklist

WebAIM's WCAG 2.0 Checklist for HTML documentshttp://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 Accessibility22

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/