1. Accessibility Driven
Development
Eliza Aierstuck
October 7–10, 2019
Austin Convention Center

2. Unless otherwise indicated, these slides are © 2013-2019 Pivotal Software, Inc. and licensed under a Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/

3. Unless otherwise indicated, these slides are © 2013-2019 Pivotal Software, Inc. and licensed under a Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/
Agenda
• a11y: what is it and why should you care?
• Morality
• Legality
• Practicality
• Low-hanging fruit
• Tools & resources

4. Unless otherwise indicated, these slides are © 2013-2019 Pivotal Software, Inc. and licensed under a Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/
A11y

5. Unless otherwise indicated, these slides are © 2013-2019 Pivotal Software, Inc. and licensed under a Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/
Morality

6. Unless otherwise indicated, these slides are © 2013-2019 Pivotal Software, Inc. and licensed under a Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/
“The power of the Web is in its
universality. Access by everyone
regardless of disability is an
essential aspect.”
- Tim Berners-Lee, W3C Director and inventor of the World Wide Web
source: WW3

7. Unless otherwise indicated, these slides are © 2013-2019 Pivotal Software, Inc. and licensed under a Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/
Diversity & Inclusion

8. Unless otherwise indicated, these slides are © 2013-2019 Pivotal Software, Inc. and licensed under a Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/
The web is part of the
solution, not the
source of the problem

9. Unless otherwise indicated, these slides are © 2013-2019 Pivotal Software, Inc. and licensed under a Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/
Legality

10. Unless otherwise indicated, these slides are © 2013-2019 Pivotal Software, Inc. and licensed under a Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/
It’s the Law
Source: Seyfarth Shaw

11. Unless otherwise indicated, these slides are © 2013-2019 Pivotal Software, Inc. and licensed under a Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/
ADA (Title III)
• Civil Rights Law
• Applies to private entities
• Websites as "public
accommodations" must be usable
by all
• Enforced by consumers filing
complaints
Section 508
• Federal Procurement Law
• Applies to technology
purchased or developed by
the US Federal Government
• Incorporates WCAG 2.0
• Enforced by consumers filing
complaints

12. Unless otherwise indicated, these slides are © 2013-2019 Pivotal Software, Inc. and licensed under a Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/
source: Bureau of Internet Accessibility, 3play
media, Chicago Tribune, Deque, Lovata

13. Unless otherwise indicated, these slides are © 2013-2019 Pivotal Software, Inc. and licensed under a Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/
Practicality

14. Unless otherwise indicated, these slides are © 2013-2019 Pivotal Software, Inc. and licensed under a Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/
1 in 5
Americans have a
disability
Source: Interactive Accessibility, Dequeue University

15. Unless otherwise indicated, these slides are © 2013-2019 Pivotal Software, Inc. and licensed under a Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/
This affects you too

16. Unless otherwise indicated, these slides are © 2013-2019 Pivotal Software, Inc. and licensed under a Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/
"Improving your product’s
accessibility enhances the
usability for all users"
- Google Material Design

17. Unless otherwise indicated, these slides are © 2013-2019 Pivotal Software, Inc. and licensed under a Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/
Accessible Products...
• don’t rely on color alone to convey meaning
• are optimized for low visibility
• don’t rely on the usage of mice
• better for "power users"
• can be easily navigated by:
• a screen reader/ web driver / SEO bot / sighted user
• use simple language
• are more likely to be optimized for responsiveness
• are comprised of consistent components with well-defined and intuitive
characteristics

18. Unless otherwise indicated, these slides are © 2013-2019 Pivotal Software, Inc. and licensed under a Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/
Use accessibility to drive the
development of your
applications

19. Unless otherwise indicated, these slides are © 2013-2019 Pivotal Software, Inc. and licensed under a Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/

20. Unless otherwise indicated, these slides are © 2013-2019 Pivotal Software, Inc. and licensed under a Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/
Use Semantic HTML

21. Unless otherwise indicated, these slides are © 2013-2019 Pivotal Software, Inc. and licensed under a Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/
Just use the freaking
<button> element!!

22. Unless otherwise indicated, these slides are © 2013-2019 Pivotal Software, Inc. and licensed under a Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/
<button> freebies:
• Receive keyboard focus by default
• “Click” with the Space key
• Submit form data to a server
• Reset a form
• Be disabled with the disabled attribute
• Instruct a screen reader with the implicit button role
• Show :focus, :hover, :active, :disabled
• It is called a button….
source: Marcy Sutton

23. Unless otherwise indicated, these slides are © 2013-2019 Pivotal Software, Inc. and licensed under a Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/
<h1>... <h6> (Headings)
• Headings communicate the organization of the content on the page.
• assistive technologies can use them to provide in-page navigation
• Heading ranks
• WCAG 2.0 resources: https://www.w3.org/WAI/tutorials/page-
structure/headings/#related

24. Unless otherwise indicated, these slides are © 2013-2019 Pivotal Software, Inc. and licensed under a Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/
Page
Regions
source: W3C

25. Unless otherwise indicated, these slides are © 2013-2019 Pivotal Software, Inc. and licensed under a Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/
Label all form controls
The 'for' attribute
Leaving off visual labels is sometimes allowed

26. Unless otherwise indicated, these slides are © 2013-2019 Pivotal Software, Inc. and licensed under a Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/
Ensure dynamic content is
accessible

27. Unless otherwise indicated, these slides are © 2013-2019 Pivotal Software, Inc. and licensed under a Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/
Accessible Rich
Internet Applications

28. Unless otherwise indicated, these slides are © 2013-2019 Pivotal Software, Inc. and licensed under a Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/
Rules of ARIA use
1. If there is a native HTML5 element with built-in behavior or semantics, then use
it
1. Do not change native semantics unless you really have to
1. All interactive ARIA controls must be usable with the keyboard alone
Source: W3C - Using ARIA

29. Unless otherwise indicated, these slides are © 2013-2019 Pivotal Software, Inc. and licensed under a Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/
Rules of ARIA use
4. Never use ARIA to hide focusable elements from the Accessibility Tree
5. All interactive elements must have an accessible name
Source: W3C - Using ARIA

30. Unless otherwise indicated, these slides are © 2013-2019 Pivotal Software, Inc. and licensed under a Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/
Tabindex
• -1: programmatically focusable
• 0: (default) included in the tab order
• >= 1: redefines priority in the tab order
Ideally, you should never need to set tabindex

31. Unless otherwise indicated, these slides are © 2013-2019 Pivotal Software, Inc. and licensed under a Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/
Review Yourself
1. Start with the keyboard
• Visible focus state
• Custom interactive elements are focusable
• Direct focus to dynamic interactive content
• No keyboard traps
2. Try it with a screen reader
• Voiceover for Mac, NVDA, JAWS
• All meaningful inputs have understandable labels (alt attribute on images)
• The flow of information makes sense
• No hidden or unreachable content on the page
Source: Rod Dodson (Google)

32. Unless otherwise indicated, these slides are © 2013-2019 Pivotal Software, Inc. and licensed under a Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/
Tools & Resources

33. Unless otherwise indicated, these slides are © 2013-2019 Pivotal Software, Inc. and licensed under a Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/
audit yourself
https://github.com/
https://springoneplatform.io

34. Unless otherwise indicated, these slides are © 2013-2019 Pivotal Software, Inc. and licensed under a Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/
Good reference sites
• Wikipedia
• Expedia
• Everything Google
• Github

35. Unless otherwise indicated, these slides are © 2013-2019 Pivotal Software, Inc. and licensed under a Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/
Helpful Resources
• Web Accessibility Guidelines: https://dequeuniversity.com/checklists/web/
• a11ycasts (Rod Dodson):
https://www.youtube.com/playlist?list=PLNYkxOF6rcICWx0C9LVWWVqvHlYJy
qw7g
• How to do an accessibility review:
https://developers.google.com/web/fundamentals/accessibility/how-to-
review?utm_source=lighthouse&utm_medium=devtools
• ARIA Authoring Practices: https://goo.gl/ibNKWw
• WCAG Authoring Guide: https://www.w3.org/WAI/standards-guidelines/wcag/
• Twitter: @marcysutton @leoniewatson @heydonworks
• Tink: https://tink.uk/
• #accessibility slack channel
• React Docs: https://reactjs.org/docs/accessibility.html

36. Unless otherwise indicated, these slides are © 2013-2019 Pivotal Software, Inc. and licensed under a Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/
Thanks!
Questions?
eaierstuck@pivotal.io

37. Unless otherwise indicated, these slides are © 2013-2019 Pivotal Software, Inc. and licensed under a Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/
Product Team tips
• Group accessibility issues by category (i.e. color contrast, visual focus state,
input labels) to make the task seem less daunting
• All hands on deck! Involve all disciplines in the effort
• Measure accessibility trends - are problem areas improving? Getting worse?
Changing locations?
• Complete accessibility training or hire an expert to support one or multiple
teams
• Automate the process*

38. Unless otherwise indicated, these slides are © 2013-2019 Pivotal Software, Inc. and licensed under a Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/
Before you reach for
a div...

39. Unless otherwise indicated, these slides are © 2013-2019 Pivotal Software, Inc. and licensed under a Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/
Elements with meaning
A semantic element clearly describes its meaning to both the browser
and the developer
<ul id="flights-list">
<li id="flight-1">
<li id="flight-2">
</ul>