Ga naar hoofdinhoud

React Native accessibility code samples

Browse code samples to learn how to build more accessible React Native apps.

Accessibility code samples

  • Accessibility action on React Native

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

    Accessibility action
  • Accessibility announcement on React Native

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

    Accessibility announcement
  • Accessibility dialog on React Native

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

    Accessibility dialog
  • Accessibility focus indicator on React Native

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

    Accessibility focus indicator
  • Accessibility focus on React Native

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

    Accessibility focus
  • Accessibility focusability on React Native

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

    Accessibility focusability
  • Accessibility group on React Native

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

    Accessibility group
  • Accessibility hint on React Native

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

    Accessibility hint
  • Accessibility label on React Native

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

    Accessibility label
  • Accessibility language on React Native

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

    Accessibility language
  • Accessibility link on React Native

    Links should be accessible for users of assistive technologies.

    Accessibility link
  • 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 live region
  • Accessibility modal on React Native

    A modal overlays the screen with additional content.

    Accessibility modal
  • Accessibility name on React Native

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

    Accessibility name
  • 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 order
  • Accessibility role on React Native

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

    Accessibility role
  • Accessibility state on React Native

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

    Accessibility state
  • Accessibility value on React Native

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

    Accessibility value

Element code samples

  • Element focus change on React Native

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

    Element focus change
  • Element identification on React Native

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

    Element identification
  • Element position on React Native

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

    Element position

Input code samples

  • Input cancellation on React Native

    Users should be able to cancel accidental interaction.

    Input cancellation
  • Input content type on React Native

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

    Input content type
  • Input errors on React Native

    Users should be notified when they make input errors.

    Input errors
  • Input gestures on React Native

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

    Input gestures
  • Input instructions on React Native

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

    Input instructions
  • Input keyboard type on React Native

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

    Input keyboard type
  • Input label on React Native

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

    Input label
  • Input motion on React Native

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

    Input motion
  • Input predictable on React Native

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

    Input predictable

Keyboard code samples

  • 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 order
  • Keyboard shortcuts on React Native

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

    Keyboard shortcuts

Quality code samples

  • Linting on React Native

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

    Linting

Media code samples

  • Audio control on React Native

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

    Audio control
  • Audio description on React Native

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

    Audio description
  • Live captions on React Native

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

    Live captions
  • Captions on React Native

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

    Captions
  • 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.

    Transcript

Screen code samples

  • Reduced animations on React Native

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

    Reduced animations
  • 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.

    Contrast
  • Dark mode on React Native

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

    Dark mode
  • Frequent flashes on React Native

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

    Frequent flashes
  • Descriptive headers on React Native

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

    Descriptive headers
  • Descriptive labels on React Native

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

    Descriptive labels
  • Screen orientation on React Native

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

    Screen orientation
  • Reflow on React Native

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

    Reflow
  • Search functionality on React Native

    Users might have difficulty finding a specific screen.

    Search functionality
  • Skip content on React Native

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

    Skip content
  • Adjustable timing on React Native

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

    Adjustable timing
  • Screen title on React Native

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

    Screen title

Text code samples

  • Bold text on React Native

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

    Bold text
  • 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.

    Text element
  • Localization on React Native

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

    Localization
  • Scale text on React Native

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

    Scale text
  • Text spacing on React Native

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

    Text spacing
  • Text truncation on React Native

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

    Text truncation