Search code examples
accessibilitywai-arialighthouse

ARIA-controls property for a 'show all' button

Backstory:

I have a long list of items grouped by categories. There is a button control for each category and also one for "show all".

Visual Example:

[button show all] [button 001] [button 002] [button etc]

  • Category 001
    • item 01
    • item 02
  • Category 002
    • item 03
    • item 04
  • Category etc
    • item 05
    • item 06

I'm testing with Google Lighthouse and I keep getting dinged for

[aria-*] attributes do not have valid values

This is clearly because there is no "show all" group of elements, rather the button simply shows all of the available grouped elements.

Question:

What is the accepted value for an "ARIA-controls" property on a button that "shows all"? Or do I leave it out for this element?

Note:

All the individual category buttons and groups are fine, their ARIA properties are all set correctly to the group ID, no errors from Lighthouse. Only the button for "show all" is the issue

Solution

  • After reading the material in the comments I have come to the conclusion that there isn't any value I can set for ARIA-controls that will be both a valid ID and also be useful to the visitor using ARIA.

    I could set all the IDs of all the elements, this would be technically valid, but this would not be functionally useful for the visitor.

    The best option for this is to make sure the button itself is explanatory and then leave the ARIA out for this one button element.

    Google Lighthouse testing confirms that having no ARIA-controls on this element is better than having an incorrect setting.