Change aria-pressed into aria-expanded for buttons connected to expandable content #1679
Conversation
This PR changes aria-pressed to aria-expanded on buttons toggeling expanable content. Aria-pressed is used for e.g. switch buttons, a screen reader will announce "on" or "off" with the button. For expandable content like menus the correct attribute is aria-expanded. The screen reader will announce the accessible name if the button adding the state expanded or collapsed when the button gets forcus.
When aria-expanded is used there is no need to add to the aria-label the text “toggle", because the aria-expanded already gives that info and the state of the toggle. So: “Menu”, instead of “Toggle menu”. The screen reader will announce the info as: Button Menu collapsed and Button Menu expanded Also it is for voice recognition software advisable to start the aria-label with the text a user may guess the button stands for. (This is best practice, not WCAG)
|
Hi @rianrietveld, Thank you for submitting a pull request as well as filing #1680! I apologize for the late response - it's been a challenging past few months for me. I also appreciate you giving back after using our theme! I think you are completely correct here that After looking into things a bit more carefully, I'm wondering if we should pair these |
|
Hi @mattxwang, Thank you for your comment. I completely understand that life happens :-)
Also |
This PR changes
aria-pressedtoaria-expandedon buttons toggling expandable content.Related issue: #1680.
aria-pressedis used for e.g. switch buttons, a screen reader will announce "on" or "off" with the button. MDN on aria-pressed.For expandable content like menus the correct attribute is
aria-expanded. The screen reader will announce the accessible name (the aria-label in this case) of the button adding the state expanded or collapsed when the button gets focus. MDN on aria-expanded.This PR also simplifies aria-label for buttons with
aria-expanded: whenaria-expandedis used there is no need to add to the aria-label the text “toggle", because thearia-expandedalready gives that info plus the state of the toggle.So: “Menu”, instead of “Toggle menu”.
The screen reader will announce the info as:
and
Also it is for voice recognition software advisable to start the aria-label with the text a user may guess what the button stands for, to focus it.