Drop down menu 当不使用标记时，是否可以访问视觉层次化菜单？

我们正试图通过一个超大菜单构建一个非常特殊的交互/动画，这将引导我们找到一个解决方案，在这个解决方案中，我们需要将顶级项目从层次结构中拉出

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

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

果
蔬菜
肉


苹果
香蕉


萝卜
马铃薯


鸡
牛肉

---

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

您需要将其标记为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键盘处理）

下面是一个示例，尽管由于Polymer的ShadowDOM仿真中的名称空间问题，ID并不是唯一的

---

您需要将其标记为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键盘处理）

下面是一个示例，尽管由于Polymer的ShadowDOM仿真中的名称空间问题，ID并不是唯一的

---

谢谢！至于标签索引，你能不能提前设置？（水果菜单=1，苹果=2，香蕉=3，蔬菜菜单=4，等等？）您不应将tabindex设置为大于0，因为这会导致其他可访问性问题。如果您不关心通过整个菜单进行tabindex设置，则可以将它们全部设置为0，但这不符合aria创作指南@unbof From。您可以看到，无法将aria扩展属性设置为role=menuitem。在这种情况下如何解决？谢谢！至于标签索引，你不能提前设置吗？（水果菜单=1，苹果=2，香蕉=3，蔬菜菜单=4，等等？）您不应将tabindex设置为大于0，因为这会导致其他可访问性问题。如果您不关心通过整个菜单进行tabindex设置，则可以将它们全部设置为0，但这不符合aria创作指南@unbof From。您可以看到，无法将aria扩展属性设置为role=menuitem。在这种情况下如何解决?