Using ARIA Keyboard Patterns for Interactive Widgets

As the web moves toward an interactive application model, JavaScript programmers may struggle to come up with keyboard patterns that make sense for the web. Before ARIA, web interactions were limited to the tab key and the enter key. In contrast, operating systems like Windows, macOS, and Linux, have had a much broader range of keyboard patterns that include using arrow keys, Control/Command, Shift, and function keys. Using ARIA allows for more flexibility when it comes to keyboard patterns. ARIA has keyboard patterns that are similar to patterns used by operating systems that can create consistency across both desktop and web applications.

Tab to It, Use Arrow Keys Within It

In short, when it comes to widgets, the ARIA keyboard pattern should be this: users can tab to the widget, then use arrow keys within the widget. Though other keys like Home and End can be used, arrow keys should be the primary navigation keystrokes in ARIA widgets.

Want to learn more about keyboard patterns for widgets? The WAI Authoring Practices breaks down recommended keyboard patterns for various widgets.