Updated the ARIA markup to better support screen reader accessibility #23
Conversation
|
Could you explain the thinking behind these changes? |
|
No problem. The use of the Button role within the A tags gives screen reader users a clear indication which controls are meant to toggle hidden panels versus standard A tags that navigate away from the page, also allowing them to use the B or Shift+B quick navigation key commands to quickly jump past open panels and to the next toggle control, which aids navigation for non-sighted users. The use of aria-haspopup on the toggle links is an invalid use of ARIA, because the aria-haspopup attribute is specifically dedicated within the Accessibility API to indicate that there is an attached menu. Since the content panels include both static textual content and links, it can't be accurately described as a menu construct. Screen readers such as NVDA for instance will announce "submenu" when encountering this for instance, which is confusing when a traditional menu doesn't actually open when activated. This issue is more fully described in the W3C bug at The use of role="group" here to associate grouped content panels is an invalid use of ARIA, because the group role has only a few valid uses including the association of sub-tree structures within an ARIA role="tree" control, but not much else. Also, when the panels are dynamically rendered, aria-labelledby is used to associate the grouped panel name with the triggering link, none of which works within role="group". Additionally, since the group role isn't treated as a region, none of the screen reader commands for detecting and navigating grouped region content are available, such as conveying the beginning and ending boundaries of the content panel, what the name of that panel is via aria-labelledby, nor the ability to quickly jump to and past the panel using the R and Shift+R key commands in JAWS for example. By changing the role to "region" instead, all of these features suddenly become available, conveying the panel as an explicitly named region that includes beginning and ending boundaries, plus the ability to quickly navigate to and from the panel using available hotkeys for jumping between regions. Confirmed using JAWS and NVDA in IE and FF. The dual functionality of the toggle links is still an accessibility issue, because it can't do both, expand a hidden section and also navigate to another page when activated, because both functionalities can't be conveyed to non-sighted screen reader users at the same time. |
|
Thanks! It's a shame this project has been abandoned, someone should take over. |
|
I would be open to working on this
|
#23 uses aria-expanded rather than aria-haspopup to indicate top nav items can expand.
No description provided.