Question

我在这个问题上找不到任何东西。所以我想知道......

我构建了一个jQuery插件，将html菜单折叠到选择框。从：

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

要：

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

正如我之前所说，我无法在HTML5或ARIA角色规范中找到任何关于此但不应该成为：

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

代替？ THX！

Answer 1

应该来自：

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

为：

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

使用以下绑定：

aria-owns在nav，li和option元素上绑定到gui

listbox

select

ul

option option和li元素

aria-controls

nav切换list_nav / select_nav绑定
list_nav和select_nav ID作为IDREF绑定引用

CSS样式，例如：

 [role='listbox'] { display: none; }
 nav[aria-controls]:target { display:block }

自：

导航项需要包含在适当的小部件中，例如树，菜单栏，工具栏或列表框

应使用 aria-label 或 aria-labelledby
标记小部件
aria-controls 应设置一个值，该值引用由导航器控制的内容区域

导航项的状态和属性应通知以下内容。


目标页面或功能的名称

当前显示状态

操作选择状态

导航区域

<强>参考

折叠选择的HTML菜单应该有role =“navigation”？

1 个答案: