Building More Accessible React Native Applications: Conscious Styling for Larger Text

In our previous blog about React Native accessibility, we discussed key properties and labels to enhance screen reader support. We walked through how to integrate accessibility features such as accessibility labels, roles, and hints to improve user interactions, ensuring apps are more inclusive for users with disabilities.

‍

Building More Accessible React Native Applications: Conscious Styling for Larger Text
‍

Accessibility in mobile applications is crucial for ensuring that all users, including those with disabilities, can navigate and interact with digital products effectively. In a recent episode of "Building More Accessible React Native Applications," Karly Lamm, a Senior Mobile and Full Stack Web Engineer at Aviron Software, discussed the importance of making conscious styling choices to accommodate users with larger text enabled on their mobile devices. While this episode focuses on the React Native Size Matters library, it's important to note that there are many libraries and approaches available to enhance accessibility. Developers are encouraged to explore various options and choose the best solutions for providing an optimal user experience.

The Challenge: Hidden Accessibility Issues in UI Design

Even simple applications can present challenges for users who rely on accessibility features. In the demonstration, a basic to-do list application was used to highlight how increasing text size can break UI layouts. With larger text enabled, key elements such as buttons, task lists, and modal dialogs became difficult to interact with.

For instance, the "Add Task" button failed to scale properly, making the text within it unreadable. Additionally, the privacy policy modal was not scrollable, preventing users from accessing necessary controls, such as a close button. These issues demonstrate how seemingly minor design decisions can significantly impact usability for those with accessibility settings enabled.

Testing for Larger Text on iOS

To replicate and test these accessibility issues, users can enable larger text on an iOS device by following these steps:

1. Open the Settings application.
2. Navigate to Accessibility > Display & Text Size > Larger Text.
3. Enable Larger Accessibility Sizes and increase the text size to its maximum setting.
4. Return to the application and observe how the UI adapts (or fails to adapt) to the changes.

Implementing Scalable UI with ReactNative Size Matters

To address these challenges, Karly introduced the React Native Size Matters library, which provides tools to create responsive and adaptive layouts. This library allows developers to implement relative scaling for fonts and UI components, ensuring that elements adjust dynamically based on screen size and user preferences.

Three key methods from React Native Size Matters were demonstrated:

1. Scale: Adjusts element sizes proportionally to screen width. This is useful for buttons, icons, and other UI elements that need to resize in relation to screen dimensions.
2. Vertical Scale: Adjusts height dimensions based on screen height. This method ensures vertical elements, such as button heights and row spacing, remain appropriately sized across different devices.
3. Moderate Scale: Provides a more controlled approach to scaling, preventing text from becoming excessively large or small. This is particularly useful for font sizes, ensuring readability while maintaining an aesthetically balanced layout.

Example: Making the "AddTask" Button Adaptive

Before the fix, the button had a fixed width and height, which did not accommodate larger text sizes. By applying the scale and vertical scale methods, the button dynamically adjusted to the screen size:

import { scale, verticalScale,moderateScale } from 'react-native-size-matters'; 

const styles = StyleSheet.create(
{ 
button: 
  {   
    width: scale(250),   
    height: verticalScale(50), 
  }, 
buttonText: 
  {   
    fontSize: moderateScale(18), 
  }
});

With these changes, the button now scales responsively, ensuring that its text remains visible and readable regardless of user settings.

Importance of Scrollability in Modals

Another critical issue addressed was the lack of scrollability in modal dialogs. If a modal is not scrollable, users with larger text sizes may be unable to access important buttons, effectively preventing them from completing essential actions within the application.

A solution to this problem is to wrap modal content in a ScrollView, ensuring that all elements remain accessible regardless of text size adjustments:

<ScrollViewcontentContainerStyle={{ flexGrow: 1 }}> 
  <View style={styles.modalContent}>   
    <Text style={styles.modalText}>Privacy Policy</Text>   
    <Button title="Close" onPress={closeModal} /> 
  </View>
</ScrollView>

By implementing scrollable modals, users can always navigate through content, preventing scenarios where they might be trapped due to inaccessibleUI elements.

Conclusion: Making Accessibility a Priority

Small design decisions can have a significant impact on accessibility. By integrating scalable UI components and ensuring proper scrollability, developers can create more inclusive applications that work for all users, regardless of their accessibility settings.

In this episode, Karly Lamm demonstrated the importance of testing applications with larger text enabled and provided practical solutions using React Native Size Matters. While this library offers a great way to handle scaling issues, it is just one of many tools available. Developers should explore different approaches to find the best methods for their specific applications. Accessibility is not just about compliance—it’s about creating great user experiences for everyone. By making conscious styling choices and staying informed about available solutions, developers can build applications that are not only compliant but also truly user-friendly.

For more insights on accessible React Native development, stay tuned for future episodes and continue making accessibility a fundamental part of the development process.

 Looking for Mobile App Consulting & Development?

Karly and the team at Aviron Software specialize in custom software development, offering expertise in React Native mobile apps, React web applications, and .NET & ASP.NET Core. With a diverse client base spanning SaaS, healthcare, eCommerce, and management industries, Aviron Software delivers highly intuitive solutions designed to set your brand apart.

To discuss your project, email: hello@avironsoftware.com or contact us.

‍