Listbox

Introduction

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 select.

More info: WAI-ARIA Authoring Practices.

Caution

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).

Implementation

HTML code

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-label or 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="visually-hidden">unread messages</span></li>
  <li role="option">Sent</li>
  <li role="option">Draft</li>
  <li role="option">Trash</li>
</ul>

Note that the ul and li tags could be replaced by simple div tags.

Interactions

To stick with the pattern of the ARIA listbox (WAI-ARIA Authoring Practices), we must handle some interactions using JavaScript.

Keyboard interaction:

• 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.

Examples

The W3C provides several functional examples.

Links

More information on ARIA and listbox:

• WAI-ARIA Authoring Practices 1.2
• The listbox role model