ARIA lists (listbox)
ARIA provides a large number of components that can be used in rich interfaces (tab, accordion, slider, listbox...). In this example, we will look into the listbox component.
A listbox is a component that allows the user to select one or more items from a list.
The items of a listbox are static, a listbox is not intended to receive interactive items (such as links, buttons…), however it can contain images unlike the
More info: WAI-ARIA Authoring Practices.
Although improvements are being made with each new version, support for ARIA is still partial for all screen readers. Its use should be conditioned by compatibility tests on the target environments (browser/screen reader combinations).
To create a listbox, just apply the role
listbox to a parent container. Then apply the
option role to the list items. We must make it focusable for users who navigate using the keyboard (adding the
tabindex="0" attribute) or adding the
aria-labelledby label for people using a screen reader.
<ul role="listbox" tabindex="0" aria-label="folder list"> <li role="option">Inbox (4) <span class="sr-only">unread messages</span></li> <li role="option">Sent</li> <li role="option">Draft</li> <li role="option">Trash</li> </ul>
Note that the
li tags could be replaced by simple
- Up arrow to select the previous item
- Down arrow to select the next item
For multiple selection lists: shift or control + Up and Down arrows, space bar.
The W3C provides several functional examples.