Question

我们正在尝试使用一个巨型菜单构建一个非常特殊的交互/动画，这个菜单引导我们找到一个解决方案，我们需要从层次结构中提取顶级项目。

因此，例如，理想的标记通常是这样的：

<ul>
    <li>Fruit
        <ul>
            <li>Apple</li>
            <li>Banana</li>
        </ul>
    </li>
    <li>Vegetables
        <ul>
            <li>Radish</li>
            <li>Potato</li>
        </ul>
    </li>
    <li>Meat
        <ul>
            <li>Chicken</li>
            <li>Beef</li>
        </ul>
    </li>
</ul>

它是分层的，通过键盘和语音反馈很容易导航。

对于我们希望创建的交互，我们真的需要这样的东西，其中两个级别完全分开：

<ul>
    <li>Fruit</li>
    <li>Vegetables</li>
    <li>Meat</li>
</ul>
<div>
    <ul>
        <li>Apple</li>
        <li>Banana</li>
    </ul>
    <ul>
        <li>Radish</li>
        <li>Potato</li>
    </ul>
    <ul>
        <li>Chicken</li>
        <li>Beef</li>
    </ul>
 </div>

这仍然可以像前者一样方便吗？如果是这样，需要做些什么来确保良好的键盘导航以及屏幕阅读器的兼容性？

Answer 1

您需要将其标记为ARIA菜单。正确的标记如下：

    <ul role="menubar">
        <li role="menuitem" aria-haspopup="true" aria-owns="fruitmenu" tabindex="0">Fruit</li>
        <li role="menuitem" aria-haspopup="true" aria-owns="vegmenu" tabindex="-1">Vegetables</li>
        <li role="menuitem" aria-haspopup="true" aria-owns="meatmenu" tabindex="-1">Meat</li>
    </ul>
    <div>
        <ul role="menu" id="fruitmenu" aria-expanded="true" >
            <li role="menuitem" tabindex="-1">Apple</li>
            <li role="menuitem" tabindex="-1">Banana</li>
        </ul>
        <ul role="menu" id="vegmenu" aria-expanded="false" >
            <li role="menuitem" tabindex="-1">Radish</li>
            <li role="menuitem" tabindex="-1">Potato</li>
        </ul>
        <ul role="menu" id="meatmenu" aria-expanded="false" >
            <li role="menuitem" tabindex="-1">Chicken</li>
            <li role="menuitem" tabindex="-1">Beef</li>
        </ul>
     </div>

然后你需要使用JavaScript来实现控件来管理菜单的展开/折叠，并操纵tabindex属性进行焦点管理（加上关注焦点）和aria-expanded（尽管取决于JavaScript键盘处理这个可能是多余的。

以下是accessible ARIA menu implementation in Polymer的一个示例，尽管由于Polymer的仿真DOM仿真中的命名空间存在问题，但ID并不是唯一的。

A jQuery ARIA menu library

Native Web Components, Polymer and Angular2 ARIA menu implementations

当标记不是时，可以访问可视的分层菜单吗？

1 个答案: