search

w3c / aria-practices

WAI-ARIA Authoring Practices Guide (APG)
https://www.w3.org/wai/aria/apg/
Other
1.21k stars 345 forks source link

Confusing rules of aria-expanded #1318

Open kahlan88 opened 4 years ago

kahlan88 commented 4 years ago

I've encountered conflicting information on aria-expanded attribute for menu buttons and listbox buttons.

https://www.w3.org/WAI/GL/wiki/Using_aria-expanded_to_indicate_the_state_of_a_collapsible_element and https://a11yproject.com/patterns/ say to set it to false when the menu/dropdown is closed.

document.getElementById(id2).setAttribute('aria-expanded', 'false');

while https://www.w3.org/TR/wai-aria-practices/examples/menu-button/menu-button-links.html and https://www.w3.org/TR/wai-aria-practices-1.1/examples/listbox/listbox-collapsible.html tell me otherwise:

The aria-expanded attribute is removed when the menu is closed.

We decided to go with false, but I am still not 100% sure which one is correct (or maybe both are?)

JAWS-test commented 4 years ago

I think both options are okay. Because of aria-haspopup, in one variant, you can perceive that there is something that can be faded in. In the other, it's perceptible due to aria-expanded=false.

kahlan88 commented 4 years ago

If both are okay, I think it would be helpful if both were mentioned where this is described. Or it can be mentioned as optional attribute for elements with closed menus. I'm sure I'm not the only person scratching their head over this :-)

mcking65 commented 4 years ago

The states and properties section of the menu button design pattern includes the following language:

When the menu is displayed, the element with role button has aria-expanded set to true . When the menu is hidden, it is recommended that aria-expanded is not present. If aria-expanded is specified when the menu is hidden, it is set to false .

It is common for the example implementations of the design patterns to include optional or recommended characteristics. However, this is not the first question about an optional behavior that is not documented as such on the example page. We could do better here. I opened #1320.