React Native accessibility code samples

Accessibility actions provide alternative ways for users of assistive technologies to perform actions.

Users of assistive technologies should be made aware of important changes in content through accessibility announcements.

A dialog overlays the screen and offers one or more actions to proceed.

Users should know which element has focus when using a keyboard or assistive technology.

Sometimes you need to programmatically move the accessibility focus to a specific element.

An element should indicate whether it should be focusable by assistive technologies or not.

It is easier and quicker for users of assistive technologies to interact with grouped elements.

An accessibility hint helps users to understand what will happen after performing an action.

An accessibility label helps users of assistive technologies to identify elements on the screen.

When content is written in multiple languages, foreign words should ideally be indicated in their respective language.

Links should be accessible for users of assistive technologies.

A live region allows users of assistive technologies to receive updates whenever important information on the screen changes.

A modal overlays the screen with additional content.

The accessibility name indicates the name used for interface elements by assistive technologies.

Assistive technologies try to determine a logical accessibility order based on the placement and properties of the elements on the screen.

An accessibility role helps users of assistive technologies to understand the purpose of elements on the screen.

An accessibility state helps users of assistive technologies to understand the state of elements on the screen.

An accessibility value helps users of assistive technologies to understand the value of elements on the screen.

Whenever an element receives focus, it should not automatically trigger an event which changes context.

Functionality that is repeated on multiple screens should use consistent identification.

Components that are repeated on multiple screens should have a consistent position.

Users should be able to cancel accidental interaction.

Setting the content type for input fields helps user entering data.

Users should be notified when they make input errors.

Gesture activated functionality should also be available without the use of gestures.

When a label might not describe the requested input sufficiently, you should add additional instructions.

Setting the keyboard type for input fields helps user entering data.

Input fields should have labels so that users know what input data is expected.

Provide an alternative way for actions activated by motion, to allow everyone to use the functionality.

Whenever a user provides input, there should be no change of context.

By adjusting the keyboard order, you can provide a great experience for users that control their device using a hardware keyboard.

Most people operate their smartphones with touch, but some people use an external keyboard.

Linting is the process of running a tool which analyzes your code for potential errors.

Users should be able to control audio whenever it plays automatically.

Videos should include audio description when important visual details are shown which you cannot hear.

Captions should be provided in real-time to enable users to understand what is being said in live videos.

Captions should be provided to enable users to understand what is being said in videos.

Videos should contain a transcript to allow users to read what is shown in media, such as a video or podcast.

Content which conveys a sense of motion can be a barrier for users.

Apps should provide enough contrast between text and its background so that it can be read by people with moderately low vision.

Dark mode darkens background colours and provides a more comfortable viewing experience in low light.

Rapidly flashing images or views can cause seizures for some users.

Screens should have descriptive headers, this helps users find specific content and orient themselves within your app.

Screens should have descriptive labels, these help users recognize which purpose controls have.

Apps should adapt to the preferred display orientation of the user.

Content on the screen should reflow based on the users' preferences.

Users might have difficulty finding a specific screen.

It can be helpful for users to skip repeated blocks of content.

Everyone, including people with disabilities, should have adequate time to interact with your app.

Each screen should have a descriptive title, which helps users with identifying the screen.

Apps should use bold text when users have indicated this as a preference in the system settings.

Always use text elements to display text, unless this is not possible due to styling, such as text logo's.

Assistive technologies, such as the screen reader, use the locale for the pronunciation of utterances.

Apps should scale text to the size specified by users in the system settings.

Content should adapt to increased spacing between lines, words, letters, and paragraphs.

Text should never get truncated in your app, even when users have enlarged their font size.