HTML menu collapsing to select should have role="navigation"?

StackOverflow https://stackoverflow.com/questions/20375917

Frage

i could'nt find nothing on the subject. So i was wondering...

I built a jQuery plugin which collapse html menu to a select box. From:

<nav role="navigation">
    <ul>
        <li><a href="http://go.to">page</a><li>
    </ul>
</nav>

To:

<div>
    <select>
        <option value="http://go.to">page</option>
    </select>
</div>

As i told before i could'nt find any about this neither on HTML5 or ARIA roles spec but should'nt it become:

<nav role="navigation">
    <select>
        <option value="http://go.to">page</option>
    </select>
</nav>

instead? Thx!

War es hilfreich?

Lösung

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 the nav, li, and option elements to bind to gui
  • listbox role on select and ul containers
  • option role on option and li elements
  • aria-controls on the nav element to toggle list_nav/select_nav binding
  • list_nav and select_nav IDs to reference as IDREF bindings

  • CSS 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

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top