React Native accessibility code samples
Browse code samples to learn how to build more accessible React Native apps.
Accessibility code samples
- Accessibility action
Accessibility action on React Native
Accessibility actions provide alternative ways for for users of assistive technologies to perform actions.
- Accessibility announcement
Accessibility announcement on React Native
Users of assistive technologies should be made aware of important changes in content through accessibility announcements.
- Accessibility dialog
Accessibility dialog on React Native
A dialog overlays the screen and offers one or more actions to proceed.
- Accessibility focus indicator
Accessibility focus indicator on React Native
Users should know which element has focus when using a keyboard or assistive technology.
- Accessibility focus
Accessibility focus on React Native
Sometimes you need to programmatically move the accessibility focus to a specific element.
- Accessibility focusability
Accessibility focusability on React Native
An element should indicate whether it should be focusable by assistive technologies or not.
- Accessibility group
Accessibility group on React Native
It is easier and quicker for users of assistive technologies to interact with grouped elements.
- Accessibility hint
Accessibility hint on React Native
An accessibility hint helps users to understand what will happen after performing an action.
- Accessibility label
Accessibility label on React Native
An accessibility label helps users of assistive technologies to identify elements on the screen.
- Accessibility language
Accessibility language on React Native
When content is written in multiple languages, foreign words should ideally be indicated in their respective language.
- Accessibility link
Accessibility link on React Native
Links should be accessible for users of assistive technologies.
- Accessibility live region
Accessibility live region on React Native
A live region allows users of assistive technologies to receive updates whenever important information on the screen changes.
- Accessibility modal
Accessibility modal on React Native
A modal overlays the screen with additional content.
- Accessibility name
Accessibility name on React Native
The accessibility name indicates the name used for interface elements by assistive technologies.
- Accessibility order
Accessibility order on React Native
Assistive technologies try to determine a logical accessibility order based on the placement and properties of the elements on the screen.
- Accessibility role
Accessibility role on React Native
An accessibility role helps users of assistive technologies to understand the purpose of elements on the screen.
- Accessibility state
Accessibility state on React Native
An accessibility state helps users of assistive technologies to understand the state of elements on the screen.
- Accessibility value
Accessibility value on React Native
An accessibility value helps users of assistive technologies to understand the state of elements on the screen.
Element code samples
- Element focus change
Element focus change on React Native
Whenever an element receives focus, it should not automatically trigger an event which changes context.
- Element identification
Element identification on React Native
Functionality that is repeated on multiple screens should use consistent identification.
- Element position
Element position on React Native
Components that are repeated on multiple screens should have a consistent position.
Input code samples
- Input cancellation
Input cancellation on React Native
Users should be able to cancel accidental interaction.
- Input content type
Input content type on React Native
Setting the content type for input fields helps user entering data.
- Input errors
Input errors on React Native
Users should be notified when they make input errors.
- Input gestures
Input gestures on React Native
Gesture activated functionality should also be available without the use of gestures.
- Input instructions
Input instructions on React Native
When a label might not describe the requested input sufficiently, you should add additional instructions.
- Input keyboard type
Input keyboard type on React Native
Setting the keyboard type for input fields helps user entering data.
- Input label
Input label on React Native
Input fields should have labels so that users know what input data is expected.
- Input motion
Input motion on React Native
Provide an alternative way for actions activated by motion, to allow everyone to use the functionality.
- Input predictable
Input predictable on React Native
Whenever a user provides input, there should be no change of context.
Keyboard code samples
- Keyboard order
Keyboard order on React Native
By adjusting the keyboard order, you can provide a great experience for users that control their device using a hardware keyboard.
- Keyboard shortcuts
Keyboard shortcuts on React Native
Most people operate their smartphones with touch, but some people use an external keyboard.
Quality code samples
Linting on React Native
Linting is the process of running a tool which analyzes your code for potential errors.
Media code samples
- Audio control
Audio control on React Native
Users should be able to control audio whenever it plays automatically.
- Audio description
Audio description on React Native
Videos should include audio description when important visual details are shown which you cannot hear.
- Live captions
Live captions on React Native
Captions should be provided in real-time to enable users to understand what is being said in live videos.
Captions on React Native
Captions should be provided to enable users to understand what is being said in videos.
Transcript on React Native
Videos should contain a transcript to allow users to read what is shown in media, such as a video or podcast.
Screen code samples
- Reduced animations
Reduced animations on React Native
Content which conveys a sense of motion can be a barrier for users.
Contrast on React Native
Apps should provide enough contrast between text and its background so that it can be read by people with moderately low vision.
- Dark mode
Dark mode on React Native
Dark mode darkens background colours and provides a more comfortable viewing experience in low light.
- Frequent flashes
Frequent flashes on React Native
Rapidly flashing images or views can cause seizures for some users.
- Descriptive headers
Descriptive headers on React Native
Screens should have descriptive headers, this helps users find specific content and orient themselves within your app.
- Descriptive labels
Descriptive labels on React Native
Screens should have descriptive labels, these help users recognize which purpose controls have.
- Screen orientation
Screen orientation on React Native
Apps should adapt to the preferred display orientation of the user.
Reflow on React Native
Content on the screen should reflow based on the users' preferences.
- Search functionality
Search functionality on React Native
Users might have difficulty finding a specific screen.
- Skip content
Skip content on React Native
It can be helpful for users to skip repeated blocks of content.
- Adjustable timing
Adjustable timing on React Native
Everyone, including people with disabilities, should have adequate time to interact with your app.
- Screen title
Screen title on React Native
Each screen should have a descriptive title, which helps users with identifying the screen.
Text code samples
- Bold text
Bold text on React Native
Apps should use bold text when users have indicated this as a preference in the system settings.
- Text element
Text element on React Native
Always use text elements to display text, unless this is not possible due to styling, such as text logo's.
Localization on React Native
Assistive technologies, such as the screen reader, use the locale for the pronunciation of utterances.
- Scale text
Scale text on React Native
Apps should scale text to the size specified by users in the system settings.
- Text spacing
Text spacing on React Native
Content should adapt to increased spacing between lines, words, letters, and paragraphs.
- Text truncation
Text truncation on React Native
Text should never get truncated in your app, even when users have enlarged their font size.