WhoBuilt

Building apps for everyone - Accessibility with React Native

Sep 14, 2018· 20 min· 7.0K views·Watch on YouTube

Speaker

Akshat Paul, a digital specialist at McKinsey & Company, presents on building accessible apps with React Native at a Callstack event.

Accessibility helps everyone

Paul defines accessibility as combining inclusive design with assistive technology such as screen readers. He argues it benefits more than people with disabilities: temporary injuries, lost glasses, older devices, slow connections, and stressful emergencies can all make an app harder to use.

Design for different needs

Paul recommends adapting layouts to different form factors, using sufficient contrast and readable typography, and keeping vital information easy to find. He cautions against hiding important actions in menus where users may struggle to locate them.

Make React Native interfaces readable

Paul explains that React Native supports iOS VoiceOver and Android TalkBack without extra libraries. In his to-do app demo, he removes an accessibility setting that caused list content to be read as one combined item, then adds a button trait so screen readers explain how to activate it.

Use platform tools and plan early

Paul covers labels, traits, platform-specific component types, and settings that control which views screen readers focus on. He recommends Accessibility Inspector on iOS and Accessibility Scanner on Android, and says teams should include accessibility in user personas and make it everyone's responsibility.

Takeaways

  • Test interfaces with VoiceOver and TalkBack; visual checks alone can miss confusing screen-reader output.
  • Give interactive elements clear labels and traits so users know what they are and how to activate them.
  • Keep essential information visible and easy to find, especially when users are under stress.
  • Include people with accessibility needs in user personas and make the whole team responsible for accessibility.
  • Use Accessibility Inspector and Accessibility Scanner to inspect apps and identify issues.

Mentioned in this talk

Search inside this talk

What was claimed 7

Related talks