Mobile Accessibily

Mobile Accessibility

Mobile accessibility is important


  • I'll be talking from a perspective of a certain Mozilla product
  • My focus is on visual impairment

Web Accessibility Expectations

Thanks for that link, it was a very interesting article!

Web Accessibility Expectations

Once the page loaded, I had to rummage through endless lists, unlabeled images, useless links, a search, and a sign-in form. I then reached the actual article where each paragraph was interrupted by social network share buttons and more unlabeled images. Mid-article, I figured out that I needed to press a link that consisted of two greater-than characters to read the rest, not before I, once again, sifted past all the useless navigation links, mute images, and forms. But after all that I must say: very interesting article!

Native Accessibility Expectations

  • The expectations of a slick experience remains the same as what users have seen on native.

Screen Reader

  • What is a screen reader?
  • How can blind users use a touch screen?

Top Three Issues

  • Unhidden visual elements
  • Unlabeled controls
  • Inoperable controls

Visibility Challenges

  • Modal dialogs
  • Transitions
  • Fixed headers/footers

Visibility Management

  • CSS
    • visibility: hidden;
    • display: none;
  • DOM
    • element.removeChild(child);
  • Last resort ARIA
    • aria-hidden=true

Top Three Issues

  • Unhidden visual elements
  • Unlabeled controls
  • Inoperable controls

Input Challenges

  • Click - It Works With Caveats
    • Click target and widget need to match
  • Everything else
    • Zoom in/out
    • Pan
    • Rotate
    • Adjust value
    • Move between pages
    • etc

Honorable Mentions

  • Role misuse
  • Using ARIA and role attributes for styling
  • Markup order makes all the difference (flex is your best friend)
  • pointer-events: none;

Our Own Hacks

Typing and dialing
We introduced a new role called "key"
View swipe interactions
We use the wheel events
Value adjust interactions
We use keypad up/down events