1 of 26

Taking on Accessibility Challenges in Complex Web Applications

Shawn Lauriat (@slauriat)

Software Engineer, Google Docs Accessibility

​

Slides: http://goo.gl/r6zkt

2 of 26

Overview

  • Context
  • Interfaces
  • Semantic Markup
  • Improvising
  • Tools
  • Looking to the Future

3 of 26

Context

Key Terms:

  • Accessibility
  • Assistive Technology

4 of 26

Keyboard Navigation

Things to try:

  • Move around the app
  • Does tab work?
  • Can you get to everything without a mouse?
  • Can you use everything without a mouse?

​

Now enable a screen reader and try again.

5 of 26

Keyboard Shortcuts

Pros:

  • Fast
  • Powerful
  • Code abstraction

Cons:

  • Collisions
  • Inconsistencies
  • Easily unintuitive

6 of 26

Rethink Interfaces

7 of 26

Further UI Practices

  • Easy to see
    • Large enough
    • Good contrast
    • Legible font
  • Clearly labeled
  • Programmatically accessible

8 of 26

Semantic Markup: HTML

10% Developer Effort

90% for free

9 of 26

Semantic Markup: HTML

Available Elements

​

Sections

15

Grouping content

13

Text-level semantics

28

Edits

2

Embedded content

12

Tabular data

10

Forms

15

Interactive

5

10 of 26

"Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable."

4.5.13 The div element

11 of 26

Semantic Markup: ARIA

w3.org/TR/wai-aria-practices

60%

for free

40%

Developer Effort

12 of 26

Semantic Markup: ARIA

13 of 26

Semantic markup: ARIA

Checkbox example:

​

<li class="checkbox"

role="checkbox"

aria-checked="false"

tabindex="0">

My fancy checkbox

</li>

14 of 26

Improvising

20%

for free

80%

Developer Effort

15 of 26

Improvising

Sometimes:

  • HTML doesn't have the element
  • ARIA won't provide the semantics
  • You have no choice

16 of 26

Improvising: The Need

17 of 26

Improvising

Pros

  • Full control
  • No ARIA role limit
  • Rendering Agnostic

Cons

  • Full responsibility
  • Added complexity
  • Screen readers
    • Key echoing
    • Punctation
    • Shortcuts
  • Braille displays
  • Magnifiers

18 of 26

Tools: Education

  • Managers
  • Designers
  • Engineers
  • Testers
  • Everyone

19 of 26

Tools: Design & UX Folks

  • Tab order
  • Contrast
  • Keyboard shortcuts
  • Font sizes
  • Text flow
  • UI flow
  • Labeling
  • Alt text
  • Intuitive UIs
  • Focus transitions

All Design &

User Experience

20 of 26

Tools: Browsers

  • DOM Inspector
  • Network
  • JS Debugger
  • Profiling
  • chrome://accessibility/

21 of 26

Tools: Browser Extensions

  • Chrome
    • Accessibility Developer Tools - goo.gl/GvA3w
  • Firefox
    • Firebug - getfirebug.com
    • Juicy Studio Accessibility Toolbar - goo.gl/9STwS
    • Web Developer - goo.gl/cM5A0

22 of 26

Tools: Suggestions

  • Accessibility Evaluation Toolbar
  • ChromeShades
  • Cucumber
  • Wave
  • Web Accessibility Toolbar for IE
  • FireEyes
  • Quail
  • Pa11y
  • Jim Thatcher’s Favlets
  • Tenon.io
  • WCAG-EM Report Tool

23 of 26

(Don't Fear) The Reader

Q. Want lightweight?

A. ChromeVox

chromevox.com

Q. Linux?

A. Try Orca.

Q. MacOS?

A. Try VoiceOver:

Enable via Cmd + F5

Q. Windows?

A. Try NVDA:

nvda-project.org

24 of 26

Optimism for the platform

Indie UI - Editor's Draft

  • Events
    • Interface independence
  • User Context
    • Adapting to users' needs

ARIA++

25 of 26

Recap

  • Context
  • Interfaces
  • Semantic Markup
  • Improvising
  • Tools
  • Looking to the Future

26 of 26

Questions?

Shawn Lauriat

lauriat@google.com

Slides: http://goo.gl/r6zkt

http://meetup.com/a11ynyc

@slauriat

​