What is the semantic difference between a listbox and a group with checkboxes?

Question

The official ARIA APG Listbox example implementation makes extensive use of aria attributes. Which makes sense as they want to show off how to use them.

Their A11y tree for a single option looks like this:

RootWebArea “Scrollable Listbox Example | APG | WAI | W3C”

• generic
  • main
    • Section
      • generic
        • listbox “Transuranium elements:”
          • option “Berkelium”
            • StaticText “Berkelium”

But usually I would implement the listbox pattern using inputs with type="checkbox" in a group. This would also match their "No ARIA is better than Bad ARIA" recommendation. Then the ARIA tree looks like this:

RootWebArea

• generic
  • group “Choose your monter’s features:”
    • generic
      • checkbox “Scales”

My questions now

1. If I want to create an ARIA conforming multi-select what is the preferred approach?
2. What is the semantic difference between a listbox and a group with checkboxes?

Answer 1

As always, the preferred approach depends, in this case also on your user base.

listbox allows for a bunch of features to navigate a big amount of options, where tabbing through all options would be a pain:

• arrow key navigation inside the list
• so you can escape the list with Tab
• optionally collapsing the box to save visual space
• keyboard shortcuts for beginning and end
• type-ahead to quickly find an option

So, if you have only a relatively short list, the group + checkbox would be a more lightweight solution.

---

ARIA roles allow to communicate to users what they can expect in terms of the widget’s behaviour. This mainly concerns keyboard navigation.

Keyboard Navigation

Here, a simple list of checkboxes, and a list box, differ.

ARIA states for listbox:

To be keyboard accessible, authors SHOULD manage focus of option descendants for all instances of this role, as described in Managing Focus.

In Information for Authors, this is enforced:

Authors MUST manage focus on the following container roles: […] listbox

This means that inside a list box, arrow keys will control focus between single options, Home and End might jump to the beginning or the end of the list. The APG list multiple other recommended keyboard shortcuts.

In a simple group of checkboxes, only Tab would be used.

Managing focus allows for users to bypass repetitive blocks. If the component is not managing focus and requires Tab keys, don’t use the listbox role.

Collapsible

A second difference is in aria-expanded. A list box sometimes can be collapsed and expanded, while the group role does not allow for this attribute.