It should go from:
<html id="gui">
<nav role="navigation" aria-labelledby="admin_label" aria-controls="list_nav" aria-owns="gui">
<h2 id="admin_label">Navigation</h2>
<select id="select_nav" role="listbox">
<option role="option" aria-selected="false" aria-owns="gui" value="about:blank">foo</option>
</select>
<ul id="list_nav" role="list">
<li role="listbox" aria-selected="false" aria-owns="gui" value="about:blank">
<a href="about:blank">page</a>
</li>
</nav>
</html>
to:
<html id="gui">
<nav role="navigation" aria-labelledby="admin_label" aria-controls="select_nav" aria-owns="gui">
<h2 id="admin_label">Navigation</h2>
<select id="select_nav" role="listbox">
<option role="option" aria-selected="false" aria-owns="gui" value="about:blank">foo</option>
</select>
<ul id="list_nav" role="listbox">
<li role="option" aria-selected="false" aria-owns="gui" value="about:blank">
<a href="about:blank">page</a>
</li>
</nav>
</html>
Use the following binding:
aria-owns
on thenav
,li
, andoption
elements to bind togui
listbox
role onselect
andul
containersoption
role onoption
andli
elementsaria-controls
on thenav
element to togglelist_nav
/select_nav
bindinglist_nav
andselect_nav
IDs to reference as IDREF bindingsCSS styles such as:
[role='listbox'] { display: none; } nav[aria-controls]:target { display:block }
Since:
The navigation items need to be contained in an appropriate widget, such as a tree, menubar, toolbar, or listbox
The widget should be labelled by using aria-label or aria-labelledby
aria-controls should be set with a value that refers to the content region that is controlled by the navigator
The states and properties of the navigation item should communicate the following.
- Name of the target page or function
- Current display status
- Operational selection status
- Navigation region
References