Resource URL
https://www.w3.org/WAI/tutorials/menus/flyout/
Description
I have some questions to the following examples:
1. Use parent as toggle
Use this approach in situations where the parent menu item only summarizes the submenu and doesn’t have to carry out a function, such as linking to a web page. In this case, the submenu is opened by a script when the user activates the top-level item and closed when the focus leaves the submenu.
Note: The value of the href attribute is ignored but you might still want to link to an existing document in case JavaScript is not loaded.
As the a-tag with JS loaded has a button functionality, but no role button, wouldn´t this fail SC 4.1.2?
Or is the attribute "aria-expanded" on the a-tag sufficient to announce the expected functionality to screen reader users?
And wouldn´t it be better to remove the "href"-attribute and add tabindex=0 and button role, as explained in this example (https://www.w3.org/WAI/ARIA/apg/patterns/button/examples/button/) to avoid a role-mix?
2. Use button as toggle
<a href="#flyoutnavkbbtn" aria-expanded="false">Space Bears</a>
Why does the a-tag still have the attribute "aria-expanded"?
How would you judge the case, when the toggle-button is hidden and only gets visible, when it has focus?
A final remark: as the page is last updated in 2022, maybe a reference to the disclosure-examples (https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation/) should be mentioned in the top section.
Thanks in advance.
Resource Shortname
wai-tutorials
Resource URL
https://www.w3.org/WAI/tutorials/menus/flyout/
Description
I have some questions to the following examples:
1. Use parent as toggle
As the a-tag with JS loaded has a button functionality, but no role button, wouldn´t this fail SC 4.1.2?
Or is the attribute "aria-expanded" on the a-tag sufficient to announce the expected functionality to screen reader users?
And wouldn´t it be better to remove the "href"-attribute and add tabindex=0 and button role, as explained in this example (https://www.w3.org/WAI/ARIA/apg/patterns/button/examples/button/) to avoid a role-mix?
2. Use button as toggle
<a href="#flyoutnavkbbtn" aria-expanded="false">Space Bears</a>Why does the a-tag still have the attribute "aria-expanded"?
How would you judge the case, when the toggle-button is hidden and only gets visible, when it has focus?
A final remark: as the page is last updated in 2022, maybe a reference to the disclosure-examples (https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation/) should be mentioned in the top section.
Thanks in advance.
Resource Shortname
wai-tutorials