Skip to main content

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:

EventAccessibilityDelegate method
Style.onInitializeAccessibilityEventonInitializeAccessibilityEvent
Style.onInitializeAccessibilityNodeInfoonInitializeAccessibilityNodeInfo
Style.onPopulateAccessibilityNodePopulate an accessibility node with information about the component
Style.onPopulateAccessibilityEventonPopulateAccessibilityEvent
Style.onRequestSendAccessibilityEventonRequestSendAccessibilityEvent
Style.performAccessibilityActionperformAccessibilityAction
Style.sendAccessibilityEventsendAccessibilityEvent
Style.sendAccessibilityEventUncheckedsendAccessibilityEventUnchecked