hzhu / listbox Goto Github PK

Symptom

For a listbox with three options, the screen reader does not say aloud “Option 3 (3 of 10)”. Rather it just says “Option 3".

Problem

It appears that the accessibility tree is build in a way that the parent element of the options or listitems is presumed to be a listbox or list of items, respectively. Screen readers and assistive technologies might not work as intended if a parent element contains non-semantic children elements. This is probably why <div>s shouldn't be used as children inside a <ul>:

// don't do this
<ul>
  <div>One</div>
  <div>Two</div>
</ul>

This is bad and the screen reader won’t say “Option 3 (3 of 10)” and it will just say “Option 3":

<div role="listbox">
  <ul>
    <li role="option">Option 1</li>
  </ul>
</div>

Solution

We can write composite widgets similar to native widgets by giving them proper semantics using ARIA roles. Below are three good ways to author a composite listbox component:

1. This is good and should be the preferred way to write build a listbox widget:

<ul role="listbox">
  <li role="option">Option 1</li>
</ul>

2. And this is good too:

<div role="listbox">
  <div role="option">Option 1</div>
</div>

3. This seems to be good too:

<div role="listbox">
  <ul role="presentation">
    <li role="option">Option 1</li>
  </ul>
</div>

The role="presentation" remove semantic meaning from the <ul>. The <li> (options) don't "belong" to the <ul> anymore, rather they belong to the <div> with role="listbox".

4. And finally this is good too:

<div role="listbox">
  <div role="presentation">
    <div role="option">Option 1</div>
  </div>
</div>

For this project I'm going to try out the last alternative because I would like the listbox to possibly support grid based listboxes like an emoji picker.

<div role="listbox">
  <div role="presentation">
    <div role="option">⚾️</div>
    <div role="option">🏀</div>
    <div role="option">⚽️</div>
  </div>
  <div role="presentation">
    <div role="option">🏈</div>
    <div role="option">🏉</div>
    <div role="option">🏐</div>
  </div>
</div>