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 mountable component, with a newly created Style object that implements accessibility properties and events and will be returned on the MountableRenderResult object from the render() method:

class SimpleImageViewWithAccessibility(private val style: Style? = null) : MountableComponent() {

  override fun MountableComponentScope.render(): MountableRenderResult {
    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 MountableRenderResult(SimpleImageViewMountable(), a11y + style)
  }
}

note

In the above example, the returned MountableRenderResult object includes a11y. This is a reference to the A11Y Project, which A11Y describes as a "a community-driven effort to make digital accessibility easier."

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

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