Navigating the Path to App Accessibility: 5 Essential Steps

Making your app accessible can be daunting, and getting started may seem challenging. Here are five essential steps to guide you on this journey.

1. Check links & CTA’s convey their purpose
2. Check UI accommodates varying text sizes
3. Check touchable elements are the recommended size
4. Check icons scale when text size is increased
5. Check if motion is reduced

1. Check links & CTA’s convey their purpose

Ensuring links and Calls to Action (CTA) convey their purpose is vital for app accessibility. It benefits users, especially those relying on screen readers, as it provides clear functionality without needing visual cues. This clarity in link descriptions also enhances the user experience for everyone, making interactions more intuitive.

Try navigating your app with a screen reader and see if your app makes sense when read out. Here are the screen-reading services provided by each platform:

• TalkBack: Link on how to enable TalkBack on Android
• VoiceOver: Link on how to enable VoiceOver on iOS

Example

Here are some examples showing how you might improve them.

Displays link copy improvement: from ‘more info’ to ‘View our Financial Guides’ for better context.

Solutions

Educate the team and the wider company: Engineers, designers, and copywriters might not be aware of users being able to navigate an app with a screen reader, so try to educate them about it.

Prefer concise and descriptive text: In cases where conveying all necessary information within the text is challenging, consider programmatically supplying alternative text for screen readers. Note that this approach may involve maintaining two pieces of copy and should be a last resort.

<Button
  accessibilityLabel={`Go to the partner's site to apply for the ${card.name}`}
>
  Go to site
</Button>

Use an accessibility toolkit: Allows designers to flag copy where they want to use alternative text for screen readers within their designs before it comes to engineers. Here’s an example of a Figma toolkit. This might take time and links back to the first solution about educating the team because you’re asking designers to change their workflow.

2. Check UI accommodates varying text sizes

Your UI should be able to accommodate varying text sizes. Although this may seem straightforward, achieving consistency across an entire app can be challenging, especially when many engineers are adding features. Failure in this regard can damage your company’s reputation by rendering information unreadable due to broken UI or cropped text.

Example

The image below illustrates the UI when a user sets their phone to a large text size. On the left, the UI breaks and crops text in the sections under “More information.” On the right is a fixed version using minHeight for the card instead of height.

Showing a User Interface broken on one device and fixed on the other device

Solutions

Set a larger text size on your simulator: This step is often overlooked because most developers use the default text size. Encourage your team to test with a larger text size to avoid undetected issues.

Educate and Raise Awareness: Use data analysis as a strategy, focusing on user text size preferences. This revealed a significant finding: approximately 27% of our users prefer larger text sizes. This figure has been a powerful advocate for accessibility in discussions with engineers and designers. Interestingly, even a lower percentage could indicate user challenges, affecting app retention.

Automate checks with visual regression testing (experimental): I’m looking into running our visual regression tests with the simulator set to a larger text size so that we can automate these checks. I wrote an article on how to add visual regression tests and inline the images into your Pull Request, making it easier to check.

Useful links

How to change iOS and Android text size

• iOS — settings > Accessibility > Display & text Size > Larger Text
• Android — settings > Display & brightness > Display size

3. Check touchable elements are the recommended size

Ensuring touchable elements adhere to recommended sizes is paramount for app accessibility. This practice guarantees that all users, including those with mobility limitations or who can only use one hand, can effortlessly navigate and engage with your app. By doing so, you align with accessibility guidelines, mitigate user frustration, and cultivate a favourable brand image.

Shows two simulators with inspector touchables enabled.

Solutions

Educate and Raise Awareness: Begin by educating your engineering team about touchable element size’s critical role in accessibility, raising awareness about the challenges faced by users with diverse needs.

Enable Touchable View on the Simulator: Utilise the React Native Dev Menu to display touchable areas, aiding in visualization during development. (React Native Dev Menu > show Inspector > Touchables > hide Inspector)

Use a Component Library: Implement a component library with predefined, accessible touchable elements, or integrate them into an existing one. This ensures adherence to best practices and size guidelines.

Code Reviews and Accessibility Checks: Integrate accessibility checks into your code review process, prompting developers to verify touchable elements’ compliance with recommended sizes. Automated accessibility testing tools can be valuable for this purpose.

While attending App.js 2023 conference this year I met another engineer passionate about accessibility called Alessandro. He’s created this amazing open-source library called React Native AMA library, short for Accessible Mobile App. This library provides a range of accessibility hooks and helper functions. Notably, it can dynamically flag components that don’t meet recommended sizes during runtime, greatly aiding engineers in maintaining size compliance. I’d highly recommend it!

Useful links

Recommended touch sizes for each platform

• 44x44px on iOS
• 48x48dp on Android

Others:

• React Native AMA library — Accessible Mobile App and contains a set of accessible components and hooks to simplify the building of accessible apps.
• Accessibility Scanner app — Accessibility Scanner is a tool that scans an app’s user interface to provide recommendations on how to improve the accessibility of the app. This tool flags if touchables are too small.

4. Check icons scale when text size is increased

Icons help to clarify an action or attract attention. Therefore, maintaining a well-scaled interface improves the overall user experience. When text size is increased we should look to scale the icon accordingly, otherwise the icon’s purpose is lost.

Comparison of two text-size screenshots: one with icon scaling, the other without.

Code

To achieve this react-native provides a module called PixelRatio which has a method getFontScale() that is the multiplier to the initial text size.

import { PixelRatio } from 'react-native'

<Icon icon="tooltip" size={24 * PixelRatio.getFontScale()} />

5. Check if motion is reduced

Reducing motion in your app is an often overlooked but essential step in ensuring accessibility. It’s crucial to consider users who may have motion sensitivity or disabilities that make excessive motion uncomfortable or disorienting. By minimizing unnecessary animations and providing options to reduce motion, you can create a more inclusive user experience.

Example

See the GIF below. On the left is reduce motion disabled and on the right it’s enabled.

Comparison of two simulators: one with reduced motion disabled, the other with it enabled and showing loading animations.

Code

To achieve this react-native provides a AccessibilityInfo module that has isReduceMotionEnabled() method. We subscribe to it because a user can change their setting at any time.

import { AccessibilityInfo } from 'react-native'

AccessibilityInfo.isReduceMotionEnabled()

In the code below we’re subscribing to reduceMotionChangedand then dispatching setDeviceState to update it in our redux store. Here’s a list of other events you can subscribe to that react native supports.

// AccessibilityStatusLogger.tsx

useEffect(() => {
  const handleReduceMotionToggled = ({ isEnabled }) => {
    // Update the value in our redux store
    dispatch(setDeviceState({ isReducedMotionEnabled: isEnabled }))
  }

  // Log on initial app start
  AccessibilityInfo.isReduceMotionEnabled().then(handleReduceMotionToggled)

  // Subscribes to the 'reduceMotionChange' event which when fire will
  // execute the "handleReduceMotionToggle" function
  const subscription = AccessibilityInfo.addEventListener(
    'reduceMotionChanged',
    handleReduceMotionToggled
  )

  return () => {
    subscription.remove()
  }
}, [])

You can then use this value isReducedMotionEnabled to check if you should reduce your animation. Also, it’s generally best to reduce the intensity of animations rather than completely stopping them. Completely halting animations might make the user experience less engaging for all users.

Reducing an animation may look like this.

import { Animated, Easing, StyleProp, ViewStyle } from 'react-native'


const AnimatedLoading = () => {
  // Select value from redux store
  const { isReduceMotionEnabled } = useShallowEqualSelector(selectDevice)  
  const animationProgress = React.useRef(new Animated.Value(0))  

  useEffect(() => {
      // Its here we use "isReduceMotionEnabled" to change the speed intensity
      const timingDuration = isReduceMotionEnabled ? 100000 : 5000
  
      const timingAnimation = Animated.timing(animationProgress.current, {
        toValue: 1,
        duration: timingDuration,
        easing: Easing.linear,
        useNativeDriver: true,
      })
  
      const loopAnimation = Animated.loop(timingAnimation)
  
      loopAnimation.start()
  
      return () => {
        loopAnimation.stop()
      }
  }, [duration, isReduceMotionEnabled])

  return (<AnimatedLottie ... />)
}

Summary

In the world of app development, accessibility should never be an afterthought. By following these five vital steps, React Native developers can play a pivotal role in creating apps that cater to a diverse user base. From providing meaningful link descriptions to accommodating varying text sizes, these steps form the foundation of inclusive design. Remember, accessibility isn’t about complying with guidelines; it’s about ensuring that every user can enjoy your app, regardless of their abilities. So, as you embark on your journey to app accessibility, keep these principles in mind and make a positive impact on the lives of your users. Together, we can create a more inclusive digital landscape for all.

I’ve created a GitHub checklist to help you and your team perform these essential checks in your development process. However, it’s important to remember that true change takes time. So, if progress seems gradual, stay steadfast and continue educating and raising awareness within your team.