Mobile Accessibily

Mobile accessibility is important

Yura [:yzen]

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

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

What a happy blind web surfer says

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!

What a happy blind web surfer means

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

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

• Unhidden visual elements
• Unlabeled controls
• Inoperable controls

• Modal dialogs
• Transitions
• Fixed headers/footers

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

• Unhidden visual elements
• Unlabeled controls
• Inoperable controls

• 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

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

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