How can you build accessibility into your projects? And what's the right standard to follow? Accessible websites and apps aren’t a luxury or an afterthought: in some cases, it’s a legal requirement. At least 1 out of 5 people face a disability, which may shape how they can act online. Learn key concepts and tools to make accessible interfaces easier to create, including accessibility standards and project process. Targeted to developers and project managers, the goal of this session is to introduce everyone to the fundamental principals and business-related factors of web accessibility.

1. Planning for A11Y
Jeff Mcwherter

2. Accessibility is not a barrier to
innovation

3. Perspective
• Visual Disabilities
• Cognitive Disabilities
• Motor Disabilities

7. Guidelines
• WCAG 2.0 A, AA,AAA
• Custom Guidelines

8. 1.3.1 Level A
Info and Relationships—Information, structure, and
relationships conveyed through presentation can be
programmatically determined or are available in
text.
WCAG 2.0 Standards To Note

9. 3.1 Level AA
When an appropriate markup language exists, use
markup rather than images to convey information. If
possible, use text rather than an image. Try to avoid
putting essential text within an image, and avoid
using only images for navigation
WCAG 2.0 Standards To Note

10. 9.3 Level AA
For scripts, specify logical event handlers rather than
device-dependent event handlers.
This checkpoint requires that no assumptions are made
about the input devices. Choose to use event handlers
such as onfocus and onselect, and try to stay away
from event handlers such as onclick and onkeypress.
WCAG 2.0 Standards To Note

11. 1.2.6 Level AAA
Sign Language (Prerecorded)–Sign language
interpretation is provided for all prerecorded audio
content in synchronized media. This checkpoint requires
that sign language “bubbles” display during audio/video
playback.
WCAG 2.0 Standards To Note

12. 3.4 Level AAA
Use relative rather than absolute units in markup
language attribute values and style sheet property
values.If possible, design using flexible widths.
Units such as PX, PT, and CM don’t allow for
change.
WCAG 2.0 Standards To Note

13. 10.5 Level AAA
Render adjacent links distinctly, include nonlink,
printable characters (surrounded by spaces) between
adjacent links. This accessibility point is making the
point that neighboring links should be discernible by
Section A | Section B | Section C | Section D | Section E
WCAG 2.0 Standards To Note

14. 2.2.1 Level A Timing Adjustable
For each time limit that is set by the content, at least one
of the following is true:
Turn off: The user is allowed to turn off the time limit before encountering it;
Adjust: The user is allowed to adjust the time limit before encountering it over
a wide range that is at least ten times the length of the default setting;
Extend: The user is warned before time expires and given at least 20 seconds
to extend the time limit with a simple action (for example, “press the space
bar”), and the user is allowed to extend the time limit at least ten times;
Real-time Exception: The time limit is a required part of a real-time event (for
example, an auction), and no alternative to the time limit is possible;
Essential Exception: The time limit is essential and extending it would
invalidate the activity;
20 Hour Exception: The time limit is longer than 20 hours.
WCAG 2.0 Standards To Note

15. Design
• Contrast
• Don’t Rely on Color To Convey Information
• Be Mindful of Animations, Parallax, and Video

16. Design - Visual Focus
:focus {outline: 0;}

17. Design - Hover

18. It is a common misconception that people with
disabilities don't have or 'do' JavaScript, and thus,
that it's acceptable to have inaccessible scripted
interfaces, so long as it is accessible with JavaScript
disabled.
A 2012 survey by WebAIM of screen reader users
found that 98.6% of respondents had JavaScript
enabled

19. ARIA
• Landmarks
• Forms
• Live Regions

20. ARIA - Tab List

22. ARIA - Hidden

23. ARIA - Alert
You are not connected to the internet

24. ARIA - Form
Your username
Your password

25. ARIA
• aria-haspopup="true"
• aria-label = “submenu”
• aria-expanded=“false"
•aria-controls=“collapsible-0"

26. Tools
• Screen Readers
• Automated Guideline Evaluation
•Human Testing

27. Jeff Mcwherter
Owner
jeff@gravityworksdesign.com
@jmcw

28. Code Examples Found here
www.gravityworksdesign.com/Presentations/Planning-For-A11y.zip