Mobile Accessibility 101

View Github Repository Open presentation in a new window

marcysutton

See all presentation from marcysutton

Mobile Accessibility 101

0 2

mobile-a11y

Slides for talks on mobile web accessibility

On Github marcysutton / mobile-a11y

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
I won't sugar-coat it: mobile accessibility is hard. But I'm telling you about UI patterns you can control, and pushing to improve tooling for testing and development. That is how we'll make it better.

Mobile++

-In the US, time spent with mobile apps exceeds desktop web access -Smartphone penetration tops 75% of the US mobile market in Q4 2014 -Very high usage in developing countries

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

Accessibility

15-20% of the population

  • EyeCreated by Creative Stall for the Noun Project
    Vision
  • EarCreated by Hadi Davodpour for the Noun Project
    Hearing
  • Hands on touch deviceCreated by Magicon for the Noun Project
    Motor/Physical
  • ThinkingCreated by Icons8 for the Noun Project
    Cognitive

Icons by the Noun Project

Why should I bother?

  • Shopping cart with British PoundCreated by José Manuel de Laá for the Noun Project
    Sales potential
  • ScaleCreated by Ferran Brown for the Noun Project
    Legal risk
  • Light bulbCreated by Sotirios Papavasilopoulos for the Noun Project
    Innovation opportunity
  • Heart with handsCreated 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

Mobile Platform Usage in Accessibility

WebAIM Screen Reader Survey 6

How global are those numbers?

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

WebAIM Screen Reader Survey 5

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 Mobile web

Accessibility is easier to get right on native platforms.

¯\_(ツ)_/¯
Less targets. The Web is trying to be everything for everyone. Frameworks? which ones? Android has fragmentation, so is it really that much easier?

Mobile web accessibility

Come at me Bro

Barriersto Access

Locked-down zoom, Hijacked scrolling

…we all know these techniques exist.

Text is too small

Visual clutter

Minimizing cognitive load

Ambiguous visual icons

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

Floppy Disk
Home
Menu
Stats
Save
Home
Menu
Stats

Conflicting gestures

Other UI affordances needed

http://ionicframework.com/demos/swipe-cards/

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

Winning?

Kid dancing is a winner

Mobile UI Patterns

How to Win

You’re competing…

BBC Mobile Accessibility Guidelines

Use buttons*

*And other semantic elements

Label buttons and controls

Using aria-label

Touch targets

Don’t: too smallDo: generous padding See BBC Touch target size

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

Web Inspector How-to

Safari Accessibility Audit?

aXe Audit in Firefox Devtools

Not really checking mobile devices…yet

Firefox WebIDE

Firefox How-to

Firefox WebIDE: Add-ons?

Chrome for Android

Chrome How-to

Chrome Device Inspect

Chrome Accessibility Developer Tools + Android Tethering

…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!

@marcysutton

How to win at Mobile Accessibility Background image: people around the world using mobile devices