How to win at Mobile Accessibility

Background image: people around the world using mobile devices

Winning

How to combine…?

How to Win at Mobile Accessibility

By Marcy Sutton
Accessibility Engineer at Adobe, Angular.js Core Member

http://marcysutton.github.io/mobile-a11y

We’ll talk about:

  • Barriers
  • UI Patterns
  • State of Tooling

Mobile++

Number of mobile-only internet users now exceeds desktop-only in the U.S.

New York Times: A 21st century migrant's checklist. Water, Shelter, Smartphone.

Accessibility

15-20% of the population

  • Eye Created by Creative Stall for the Noun Project
    Vision
  • Ear Created by Hadi Davodpour for the Noun Project
    Hearing
  • Hands on touch device Created by Magicon for the Noun Project
    Motor/Physical
  • Thinking Created by Icons8 for the Noun Project
    Cognitive

Icons by the Noun Project

Why should I bother?

  • Shopping cart with British Pound Created by José Manuel de Laá for the Noun Project
    Sales potential
  • Scale Created by Ferran Brown for the Noun Project
    Legal risk
  • Light bulb Created by Sotirios Papavasilopoulos for the Noun Project
    Innovation opportunity
  • Heart with hands Created by Marianna Nardella for the Noun Project
    It’s the right thing to do

Icons by the Noun Project

Develop for future you

Microsoft Inclusive Design Toolkit

Permanent disability to injury or situational disability

Mobile Platform Usage in Accessibility

WebAIM Screen Reader Survey 6

iOS device usage among screen reader users is notably higher than for the standard population, whereas Android usage is much, much lower. Those with more advanced screen reader and internet proficiency were much more likely to use iOS over Android or Nokia. Those without disabilities were more than twice as likely to use Android as those with disabilities.

“Do you use a mobile screen reader more than a desktop screen reader?”

WebAIM Screen Reader Survey 5

WebAIM Chart showing mobile vs. desktop/laptop usage
Response # of Respondents % of Respondents
No 753 56%
About the same 432 32%
Yes 160 12%

iOS Accessibility Features

  • Voiceover
  • Dictation
  • Zoom
  • Invert colors/grayscale
  • Switch control

More Info

Android Accessibility Features

  • TalkBack
  • Switch access
  • Braille support
  • High contrast
  • Magnification

More Info

Mobile Contexts

  • Native
  • Hybrid
  • Mobile web

Accessibility is easier to get right on native platforms.

¯\_(ツ)_/¯

Mobile web accessibility

Come at me Bro

Barriers
to Access

Locked-down zoom,
Hijacked scrolling

…we all know these techniques exist.

Text is too small

New York Times homepage New York Times article page

Visual clutter

Minimizing cognitive load

Arngren.net, a terribly cluttered website

Ambiguous visual icons

Check your privilege, age, ability, demographic...

Floppy Disk
Home
Menu
Stats
Save
Home
Menu
Stats

Conflicting gestures

Other UI affordances needed

Fragmentation

#realtalk

Spotty HTML5/ARIA Support

Mobile is less mature than desktop

ARIA = Accessible Rich Internet Applications

Plus X assistive tech devices
and user settings

Thats impossible

Winning?

Kid dancing is a winner

Mobile UI Patterns

How to Win

You’re competing…

with the mobile browser's Reader function

BBC Mobile Accessibility Guidelines

BBC Mobile Accessibility Guidelines for Developers

Use buttons*

CNN uses DIV buttons
*And other semantic elements

Label buttons and controls

CNN button fixed in Developer tools

Using aria-label

Touch targets

Don’t: too small
Small touch target size on Creative Bloq, ironically showing Top 10 Mobile design mistakes - and how to avoid them
Do: generous padding
Mobile menu button goes full width on SimplyAccessible.com

Crafting mobile tab order

Hidden links shouldn't be reachable

Angular Material dialog: Before

Hiding content from screen readers

(One technique)

 <div style="display: none;">

Fully hide any element, but it’s not animatable.

Disabling interactive elements in HTML

(Another technique)

 
 <div aria-hidden="true">
   <button tabindex="-1">Alert</button>
 </div>

Keep content visible, but hide from a screen reader.

Inert: disabling the background

Angular Material dialog


  function walkDOM(element) {
    while (element.parentNode) {
      if (element === document.body) {
        return;
      }
      var children = element.parentNode.children;
      for (var i = 0; i < children.length; i++) {
        // skip over child if it is an ascendant of the dialog
        if (element !== children[i]) {
          children[i].setAttribute('aria-hidden', isHidden);
        }
      }
      walkDOM(element = element.parentNode);
    }
  }

Protip: Insert dialog next to <body>, and you don’t need this much code

Content properly disabled

Angular Material dialog: After

State of Tooling

What We Want

  • Mobile browser testing tools
  • Screen reader testing tools

PowerMapper Screen Reader Compatibility Matrix

iOS Safari with
Accessibility Node Inspector

Safari Web Inspector with Develop menu open
Web Inspector How-to

Safari Accessibility Audit?

aXe Audit in Firefox Devtools

Not really checking mobile devices…yet
aXe Extension in Firefox Developer Tools

Firefox WebIDE

Connect via USB to access Dev Tools
Firefox How-to

Firefox WebIDE: Add-ons?

Firefox Devtools and WebIDE

Chrome for Android

Chrome How-to

Chrome Device Inspect

Chrome for Android: inspect devices

Chrome Accessibility Developer Tools +
Android Tethering

Chrome Accessibility Developer Tools Audit on Android

…except mobile Chrome isn't popular for accessibility

Let’s Recap

  • Accessibility is important
  • We need mobile testing tools
  • Use semantics
  • Optimize for humans
  • Craft source & tab order
  • Keep pushing

Thanks!

Elmo and Jimmy Fallon winning gif

@marcysutton