accessibility-state.md

Accessibility state

An accessibility state helps users of assistive technologies to understand the state of elements on the screen. The state selected for example, indicates that an element has been selected. The screen reader announces the state of elements as it reads the screen. It is important to assign correct states of elements to avoid misunderstanding.

WCAG

Relates to 4.1.2

Android

On Android, you can use the setAccessibilityDelegate method of ViewCompat to get a reference to AccessibilityNodeInfoCompat. This object contains many useful accessibility related methods.

You can set an accessibility state by using the setStateDescription method. A convenience method is available in ViewCompat, which is also named setStateDescription.

You can also use the setChecked method to indicate a checked state and the setSelected method to indicate a selected state.

ViewCompat.setStateDescription(view, "Expanded")

ViewCompat.setAccessibilityDelegate(
    view,
    object : AccessibilityDelegateCompat() {
        override fun onInitializeAccessibilityNodeInfo(
            host: View,
            info: AccessibilityNodeInfoCompat
        ) {
            super.onInitializeAccessibilityNodeInfo(host, info)

            // Custom state
            info.stateDescription = "Expanded"

            // Checked
            info.isChecked = true

            // Selected
            info.isSelected = true
        }
    }
)

iOS

On iOS, the accessibilityTraits attribute can be used to indicate the accessibility state. The traits selected and notEnabled can be used to indicate the current state.

Other values are listed in the UIAccessibilityTraits structure.

element.accessibilityTraits = .selected
element.accessibilityTraits = .notEnabled

Flutter

With Flutter, you can use Semantics to indicate the accessibility state. The Semantics constructor contains all available options, such as checked, enabled, hidden, selected and toggled, among others.

Semantics(
  checked: true,
  enabled: true,
  hidden: true,
  selected: true,
  toggled: true,
  child: Widget(...)
);

React Native

In React Native you can use the accessibilityState prop to set the accessibility state of an element. Available roles include disabled, selected, checked, busy and expanded, among others.

<Pressable 
  accessibilityState="disabled|selected|checked|busy|expanded" />

Xamarin

Xamarin Forms does not have built-in support to indicate the accessibility state. By using Effects it is possible to implement platform specific behaviour.

Not available, contribute!