Accessibility
Updated on August 22, 2024
Baleada Features implements comprehensive, reusable, flexible features for accessibility, one of the core motivations behind the package.
Some accessibility features—like ARIA role & attribute management, keyboard interactions, and focus management—are always required. Baleada Features takes care of all of those things for you!
For example, use your mouse, keyboard, touch, and screen reader to play with this custom multiselectable listbox, and note:
- It announces itself properly to assistive tech, including selection state and disabled state
- It supports Excel-inspired pointer and keyboard interactions
- It automatically manages focus on the listbox options
Other accessibility features are optional or situational.
For example, after you add the required accessible label to a listbox, you might want to add an optional description, announced to assistive tech. Baleada Features makes it easy to do so.
Other accessibility features are required, but configurable.
For example, in the listboxes above:
- We use a vertical orientation
- We don't allow disabled options to receive keyboard focus
- We allow the listbox to be cleared, via the Escape key and pointer interactions
- When focus reaches the last option, it wraps around to the first option
But in a different context, even within the same UI, you might want to:
- Use a horizontal orientation
- Allow disabled options to receive keyboard focus
- Prevent the listbox from being cleared
- Stop focus from wrapping around to the first option
All of this is allowed by the WAI-ARIA spec, as long as keyboard interactions and other accessibility features work as expected.
Here's the same listbox, but with those customizations:
There are even some accessibility features that need to change dynamically at runtime.
For example, consider Excel's default keyboard interactions:
- Arrow keys will navigate the cells
- Shift + arrow keys will select multiple cells
- With multiple cells selected, the next arrow key will destroy the selection and start over
To select a second, disconnected cell range, without wiping out the first range, sighted users typically hold down the Command or Control key, and click-and-drag to add the second range. But this is not an option for keyboard-only users.
Keyboard-only users in Excel actually toggle an "Add to Selection" mode that allows them to navigate to and select the second range without losing the first range.
In other words, the user changes app state, and the app responds by changing its accessibility features on the fly.
Baleada Features supports these dynamic accessibility features, too:
And on top of that, Baleada Features adds these features to UI elements where you might not expect them, but will definitely appreciate them. Returning to our original example, notice how Excel-inspired dynamic keyboard interactions are available in Baleada's multiselect listboxes, too:
The web platform is amazing, but when it comes to accessibility, it's still missing so many UI components, and so much configurability.
Baleada Features aims to close that gap.
