Interface AccessibilityProps

See

https://reactnative.dev/docs/accessibility#accessibility-properties

interface AccessibilityProps {
    accessibilityActions?: readonly Readonly<{
        label?: string;
        name: string;
    }>[];
    accessibilityElementsHidden?: boolean;
    accessibilityHint?: string;
    accessibilityIgnoresInvertColors?: boolean;
    accessibilityLabel?: string;
    accessibilityLabelledBy?: string | string[];
    accessibilityLanguage?: string;
    accessibilityLiveRegion?: "none" | "polite" | "assertive";
    accessibilityRole?: AccessibilityRole;
    accessibilityState?: AccessibilityState;
    accessibilityValue?: AccessibilityValue;
    accessibilityViewIsModal?: boolean;
    accessible?: boolean;
    aria-busy?: boolean;
    aria-checked?: boolean | "mixed";
    aria-disabled?: boolean;
    aria-expanded?: boolean;
    aria-hidden?: boolean;
    aria-label?: string;
    aria-labelledby?: string;
    aria-live?: "off" | "polite" | "assertive";
    aria-modal?: boolean;
    aria-selected?: boolean;
    aria-valuemax?: number;
    aria-valuemin?: number;
    aria-valuenow?: number;
    aria-valuetext?: string;
    importantForAccessibility?: "auto" | "yes" | "no" | "no-hide-descendants";
    onAccessibilityAction?: ((event) => void);
    onAccessibilityEscape?: (() => void);
    onAccessibilityTap?: (() => void);
    onMagicTap?: (() => void);
    role?: Role;
}

Hierarchy (view full)

Properties

accessibilityActions? accessibilityElementsHidden? accessibilityHint? accessibilityIgnoresInvertColors? accessibilityLabel? accessibilityLabelledBy? accessibilityLanguage? accessibilityLiveRegion? accessibilityRole? accessibilityState? accessibilityValue? accessibilityViewIsModal? accessible? aria-busy? aria-checked? aria-disabled? aria-expanded? aria-hidden? aria-label? aria-labelledby? aria-live? aria-modal? aria-selected? aria-valuemax? aria-valuemin? aria-valuenow? aria-valuetext? importantForAccessibility? onAccessibilityAction? onAccessibilityEscape? onAccessibilityTap? onMagicTap? role?

Properties

Optional accessibilityActions

accessibilityActions?: readonly Readonly<{
    label?: string;
    name: string;
}>[]

Provides an array of custom actions available for accessibility.

Optional accessibilityElementsHidden

accessibilityElementsHidden?: boolean

A Boolean value indicating whether the accessibility elements contained within this accessibility element are hidden to the screen reader.

Platform

ios

Optional accessibilityHint

accessibilityHint?: string

An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not obvious from the accessibility label.

Optional accessibilityIgnoresInvertColors

accessibilityIgnoresInvertColors?: boolean

https://reactnative.dev/docs/accessibility#accessibilityignoresinvertcolorsios

Platform

ios

Optional accessibilityLabel

accessibilityLabel?: string

Overrides the text that's read by the screen reader when the user interacts with the element. By default, the label is constructed by traversing all the children and accumulating all the Text nodes separated by space.

Optional accessibilityLabelledBy

accessibilityLabelledBy?: string | string[]

Identifies the element that labels the element it is applied to. When the assistive technology focuses on the component with this props, the text is read aloud. The value should should match the nativeID of the related element.

Platform

android

Optional accessibilityLanguage

accessibilityLanguage?: string

By using the accessibilityLanguage property, the screen reader will understand which language to use while reading the element's label, value and hint. The provided string value must follow the BCP 47 specification (https://www.rfc-editor.org/info/bcp47). https://reactnative.dev/docs/accessibility#accessibilitylanguage-ios

Platform

ios

Optional accessibilityLiveRegion

accessibilityLiveRegion?: "none" | "polite" | "assertive"

Indicates to accessibility services whether the user should be notified when this view changes. Works for Android API >= 19 only.

Platform

android

See https://reactnative.dev/docs/view#accessibilityliveregion

Optional accessibilityRole

accessibilityRole?: AccessibilityRole

Accessibility Role tells a person using either VoiceOver on iOS or TalkBack on Android the type of element that is focused on.

Optional accessibilityState

accessibilityState?: AccessibilityState

Accessibility State tells a person using either VoiceOver on iOS or TalkBack on Android the state of the element currently focused on.

Optional accessibilityValue

accessibilityValue?: AccessibilityValue

Represents the current value of a component. It can be a textual description of a component's value, or for range-based components, such as sliders and progress bars, it contains range information (minimum, current, and maximum).

Optional accessibilityViewIsModal

accessibilityViewIsModal?: boolean

A Boolean value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver.

Platform

ios

Optional accessible

accessible?: boolean

When true, indicates that the view is an accessibility element. By default, all the touchable elements are accessible.

Optional aria-busy

aria-busy?: boolean

alias for accessibilityState

see https://reactnative.dev/docs/accessibility#accessibilitystate

Optional aria-checked

aria-checked?: boolean | "mixed"

Optional aria-disabled

aria-disabled?: boolean

Optional aria-expanded

aria-expanded?: boolean

Optional aria-hidden

aria-hidden?: boolean

A value indicating whether the accessibility elements contained within this accessibility element are hidden.

Optional aria-label

aria-label?: string

Alias for accessibilityLabel https://reactnative.dev/docs/view#accessibilitylabel https://github.com/facebook/react-native/issues/34424

Optional aria-labelledby

aria-labelledby?: string

Identifies the element that labels the element it is applied to. When the assistive technology focuses on the component with this props, the text is read aloud. The value should should match the nativeID of the related element.

Platform

android

Optional aria-live

aria-live?: "off" | "polite" | "assertive"

Indicates to accessibility services whether the user should be notified when this view changes. Works for Android API >= 19 only.

Platform

android

See https://reactnative.dev/docs/view#accessibilityliveregion

Optional aria-modal

aria-modal?: boolean

Optional aria-selected

aria-selected?: boolean

Optional aria-valuemax

aria-valuemax?: number

Optional aria-valuemin

aria-valuemin?: number

Optional aria-valuenow

aria-valuenow?: number

Optional aria-valuetext

aria-valuetext?: string

Optional importantForAccessibility

importantForAccessibility?: "auto" | "yes" | "no" | "no-hide-descendants"

[Android] Controlling if a view fires accessibility events and if it is reported to accessibility services.

Optional onAccessibilityAction

onAccessibilityAction?: ((event) => void)

When accessible is true, the system will try to invoke this function when the user performs an accessibility custom action.

Type declaration

Optional onAccessibilityEscape

onAccessibilityEscape?: (() => void)

When accessible is true, the system will invoke this function when the user performs the escape gesture (scrub with two fingers).

Type declaration

    • (): void

    • Returns void

Platform

ios

Optional onAccessibilityTap

onAccessibilityTap?: (() => void)

When accessible is true, the system will try to invoke this function when the user performs accessibility tap gesture.

Type declaration

    • (): void

    • Returns void

Platform

ios

Optional onMagicTap

onMagicTap?: (() => void)

When accessible is true, the system will invoke this function when the user performs the magic tap gesture.

Type declaration

    • (): void

    • Returns void

Platform

ios

Optional role

role?: Role

Indicates to accessibility services to treat UI component like a specific role.

On This Page