Accessibility Utilities

Visually Hidden

The Visually Hidden feature on an element hides it on screens, but leaves it visible to screen readers and assistive technologies. Use this when an image's alt text or an aria-label doesn't work for providing a cue to an element's function.

For instance, a paginator might have "previous" and "next" buttons with icons provided via the background-image property, meaning it can't use alt text. In this case, you could put a visually-hidden span inside that button, and the word "Previous" or "Next" as the span's contents.

See the Visually Hidden component for more.

Keyboard Access

The native tags for interactive elements (such as radio buttons, checkboxes, and <button> tags) are inherently clickable and tabbable with the keyboard. However, sometimes a limitation will mean that you must use a semantically-inappropriate tag for an element that still semantically serves as a button or interactive element.

In these cases, you need to make that element clickable and tabbable with the keyboard.

In React

In React, the functions useNonButtonElementAsButton or useNonAnchorElementAsAnchor will return the necessary props to provide the accessibility support to a component.

Neither of these functions have any effect on styling or visuals; they just set things like role, tabindex, and a keypress handler.

In vanilla JS

The CSS class .accessibility-keyboard-clickable will make it so that if the element is in focus, and the user hits either the Enter or Space keys, the keypress will act as a click upon the element.

The element with this class will also need the attribute tabindex="0" to put it into the tab order. Without this, the user can't put the element into focus using the keyboard or a screen reader.

The element also needs an appropriate ARIA role to indicate its function; typically this will be role="button" for a clickable element that acts (but doesn't necessary look like!) a button.