A11y for a select input with selectable groups of options

user_313115 0
Viewed 213

I've got a select input which has hierarchical options group. I can't use the optgroup because the headers of the groups are supposed to be selectable. Example:

<select>
  <option class="category">Mammals</option>
  <option class="child"> → Cats</option>
  <option class="child"> → Dogs</option>
  <option class="category">Birds</option>
  <option class="child"> → Parrots</option>
  <option class="child"> → Eagles</option>
</select>

What would be the best way to mark these groups in an accessible way? I'd like to use the group role, maybe. However, that is usually used when children can be part of the same DOM subtree.

According to MDN on using the group role:

Group members that are outside of the DOM subtree of the group need to have explicit relationships assigned to them in order to participate in the group.

So, apparently, it should be possible to have groups like that, but I am not sure how to have those "explicit relationship".

I was thinking I could mark the parent to aria-owns each children, but I am not sure if that's the best way to go.

Also, while I also think that the presentation of the options text is not enough for a screenreader user to understand that some of those options are categories (especially because in my actual use-case, these are not so obviously “categories”). Would it be advisable to mark the category headers with an alternative aria-label (e.g. aria-label="Category: Mammals") to make it more explicit?

wai-aria accessibility html
1 Answers

My approach would probably be to actually use optgroup, but include an additional selectable option for the category as a whole (whether it means any animal in the category, all animals in the category, or something else determines the label you would use).

<select>
  <optgroup label="Mammals">
    <option class="category">Any/All Mammals</option>
    <option class="child">Cats</option>
    <option class="child">Dogs</option>
  </optgroup>
  <optgroup label="Birds">
    <option class="category">Any/All Birds</option>
    <option class="child">Parrots</option>
    <option class="child">Eagles</option>
  </optgroup>
</select>

This achieves the semantic value of optgroup while allowing the overall category to be selected.

Something worth noting: I was very deliberate in including the name of the category in the "Any/All" options, because the Accessibility Support for optgroup is sometimes lacking. So being explicit in the category name is a safe bet.

user_61630660
Related