Accessibility

Why Accessibility is important

The fundamental purpose of an interface is to provide people with access to information: accessibility is the foundation of an interface. All people experience limitations in their abilities, whether it's temporary, situational or permanent. The aim of accessibility is to remove any obstacles that reduce the experience of using, understanding, and navigating your interface.

This page provides details of the Litho components, methods, nodes, events, and headings available to ensure your interface provides the 'full experience' promoted by Meta.

info

For information on how Meta is committed to creating a full UI experience for all people, see the Meta Accessibility site.

Implementing Accessibility features

Accessibility properties and events for components can be implemented by adding them to the Style object.

Following is an example of how to combine a Style, that was passed to a Primitive Component, with a newly created Style object that implements accessibility properties and events and will be returned on the LithoPrimitive object from the render() method:

class SimpleImageViewWithAccessibilityPrimitiveComponent(private val style: Style? = null) :
    PrimitiveComponent() {
  override fun PrimitiveComponentScope.render(): LithoPrimitive {
    val a11y =
        Style.accessibilityRole(AccessibilityRole.IMAGE)
            .accessibilityRoleDescription("Image View")
            .importantForAccessibility(ImportantForAccessibility.YES)
            .onInitializeAccessibilityNodeInfo {
              it.superDelegate.onInitializeAccessibilityNodeInfo(it.host, it.info)
              it.info.addAction(
                  AccessibilityNodeInfoCompat.AccessibilityActionCompat(
                      AccessibilityNodeInfoCompat.ACTION_CLICK, "actionDescriptionText"))
            }

    return LithoPrimitive(primitive = SimpleImageViewPrimitive, style = a11y + style)
  }
}

Supported Accessibility properties and events

The following list provides the supported properties of the Style object:

• Style.accessibilityHeading
• Style.accessibilityRole
• Style.accessibilityRoleDescription
• Style.contentDescription
• Style.importantForAccessibility
• Style.screenReaderFocusable
• Style.requestInitialAccessibilityFocus
• Style.stateDescription
• Style.minDurationBetweenContentChangesMillis
• Style.labeledBy
• Style.paneTitle
• Style.liveRegion
• Style.containerTitle

The following table provides the supported events of the Style object:

Event	AccessibilityDelegate method
Style.onInitializeAccessibilityEvent	onInitializeAccessibilityEvent
Style.onInitializeAccessibilityNodeInfo	onInitializeAccessibilityNodeInfo
Style.onPopulateAccessibilityNode	Populate an accessibility node with information about the component
Style.onPopulateAccessibilityEvent	onPopulateAccessibilityEvent
Style.onRequestSendAccessibilityEvent	onRequestSendAccessibilityEvent
Style.performAccessibilityAction	performAccessibilityAction
Style.sendAccessibilityEvent	sendAccessibilityEvent
Style.sendAccessibilityEventUnchecked	sendAccessibilityEventUnchecked

Focus Order

You can customize the default focus order behavior by creating focus order properties using useFocusOrder() hook and adding them to the Style object. This allows you to tailor the focus order to your specific needs, ensuring that interactive elements are navigable in a logical and predictable manner.

val hideElements = useState { false }
val (first, second, third, fourth, fifth) = useFocusOrder()

return Column(
    style = Style.padding(16.dp).contentDescription("Fourth hello!").focusOrder(fourth)) {
      child(
          Text(
              text = "First hello!",
              style =
                  Style.focusOrder(first).onClick {
                    hideElements.update { !hideElements.value }
                  }))

      if (hideElements.value) {
        child(Text(text = "Fifth hello!", style = Style.focusOrder(fifth)))
        child(TextInput(initialText = "Second hello!", style = Style.focusOrder(second)))
      }
      child(Text(text = "Third hello!", style = Style.focusOrder(third)))
    }