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

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