Can't touch this - Different ways users interact with their mobile devices

Agenda

1. Different Ways of Interacting with Mobile Devices
2. What Does This All Mean for a Developer?

Who's Eeva-Jonna?

• Accessibility Specialist, SW Developer from Finland
• Working at Oura
• Hiking and kayaking
• Disabled person

Different Ways of Interacting with Mobile Devices

Different Methods We’re Talking About

• Screen reader
• Physical keyboard
• Switch devices
• Voice recognition
• Zooming/Screen magnifying

Screen Readers

• Software, that reads the screen and provides output either through speech or braille
• Allows users to get information about the user interface, and provides different navigation methods

Physical Keyboard

• Keyboards, modified keyboards, keyboard mimicking devices

Switch Devices

• Multiple different implementations. For example:
  • "traditional" switches
  • eye trackers
  • joysticks,
  • sip and puff
  • etc.
• Usually either one switch to do everything, or one for navigating and one for everything else

Voice Recognition

• Are somewhat familiar for many - think Alexa, Siri and others.

Zooming and Screen Magnifying

• Consists of two different things
• Zooming: Setting font size larger, or the whole screen zoom level
• Screen magnifying: An app to magnify either the whole screen, or parts of it

What Does This Mean for a Developer?

Four Easy to Start With Tips

Use Visible Focus Style

• Default focus styles are usually not visible enough, so custom focus styles are preferred
• Focus styles should have enough color contrast

Annotate Headings

<Text
  // other properties
  accessibilityRole="header">
  Text for Custom Header
</Text>

Add name, role and state for custom elements

<TouchableOpacity
  accessibilityRole="button" // role
  accessibilityState={{ disabled: false }} // state
>
  <Text>Text to Display (= name)</Text>
</TouchableOpacity>

Respect Reduced Motion

• Some people choose to turn "Reduced Motion"-setting on from their phones
• You can respect that using AccessibilityInfo-API's isReducedMotionEnabled()-method

And Also...

• Know semantics
• Learn more about different accessibility technologies
• Test with different input methods
• Learn more about accessibility in general

Key Takeaways

• Users use mobile devices differently
• Test with different input methods
• Educate yourself

Resources And Links

• https://reactnative.dev/docs/accessibility
• https://a11y-guidelines.orange.com/en/mobile