TechPrufer
Get started
Meta
Meta logoMeta · Feature trail

Accessible UI Navigation and ARIA Grid Semantics

1 post · Nov 2015 – Mar 2017

What this trail covers

Meta's development of accessible UI patterns has evolved to include the ARIA Grid semantics and logical grid traversal. This pattern reduces tab stops for keyboard users by allowing navigation within a designated grid area using arrow keys, and expresses structure to assistive technologies. Implementations in React.js provide components for managing focus across grid cells and within cells, addressing challenges like focus management during cell deletion and the integration of various focus stra. This post details the React Native Accessibility API, enabling developers to make React Native apps usable by assistive technologies like screen readers. It covers making UI elements accessible, providing descriptive labels, grouping related information for screen readers, and dynamically adjusting touch actions based on accessibility status. The Ads Manager app is used as an example to demonstrate these concepts.

All Meta trails
  1. ARIA Grid: Supporting nonvisual layout and keyboard traversalThis post introduces the concept of a 'logical grid' UI pattern for web applications to improve keyboard navigation. It details how to apply ARIA Grid semantics to express this two-dimensional structure to assistive technologies and provides an example implementation using React.js components (LogicalGrid, LogicalGridRow, LogicalGridCell). It also discusses challenges faced, such as managing focus across grid cells, inside grid cells, and handling gaps in the grid.
  2. Making React Native apps accessibleThis post introduces the React Native Accessibility API, detailing how to make UI elements accessible, use `accessibilityLabel` for descriptions, and group child elements' accessibility information under a parent component. It also explains how to query and listen for changes in the system's accessibility status to dynamically adjust touch actions, providing an example of toggling a switch within a row based on accessibility enablement. The Ads Manager app is presented as a case study.