我正在构建一个需要符合WCAG标准的网站(在WordPress中，用于上下文(。我有一个完全可键盘导航的主导航，包括切换子菜单。
我遇到的问题是：在包含子菜单的导航项目中，有些实际上链接到页面，而另一些使用 href="#"，因为它们包含子菜单但实际上并没有链接到任何地方。
通常我会在使用 href="#" 的导航项上使用 aria 标签，但由于它们是自动生成的(由 WordPress(，我无法这样做。
有人有什么建议吗？这甚至是一个相关的WCAG问题吗？每个 href="#" 导航项后跟一个 V 形(用于切换其子菜单(，其中包含"切换子菜单"的 arial 标签。这足够好吗？
谢谢！
编辑：我试图回答这个问题的特定任务已被搁置。一旦解决，我可以用我们追求的解决方案更新这个问题。我将@slugolicious的答案标记为首选，因为在他的评论中，他提供了一个合乎逻辑的解释，说明为什么保持当前不一致的顶级导航项目系统是不可取的。
我不能与wordpress交谈，但可以评论应该生成的html，但是生成的某些内容取决于您想要的行为。
是希望用户打开菜单并在列表中向上/向下箭头，还是希望他们在列表中按Tab 键？
前者要求您自己管理焦点(箭头键的键盘处理程序和维护tabindex属性(，而后者要简单得多 - 浏览器可以通过菜单中的链接处理 Tab 键。
通常，如果您的菜单用于导航，则需要后者。
对于前者(箭头键导航(，应使用菜单角色(菜单、菜单项(和属性(aria-haspopup(。 当屏幕阅读器看到这些属性时，它会告诉用户使用箭头键进行导航。 如果您有一个具有子菜单的菜单项，则该菜单项应指定 aria-haspopup。
对于后者(Tab 键导航(，请勿使用上述任何菜单角色。 相反，您的菜单应该只是一个链接列表(<ul>((列表通常具有list-style:none(。 如果任何列表项具有子菜单，则它们应包含子列表(嵌套<ul>(，并且列表项应具有 aria 扩展属性。
关于子菜单的 V 形，V 形是一个单独的制表位吗？
更新以回答@LCW在此答案的第一条评论中提出的其他问题。
aria-expanded继续您选择显示子菜单的元素，因此在您的情况下，至少从我对您的描述的理解来看，它将是 V 形本身。 听起来像是如果您选择一个链接，它会转到另一个页面，但是如果您选择 V 形，它会在该项目下打开一个子菜单？ 如果是这样，那么您的代码将是这样的：
<nav>
<ul>
<li>
<a>menu item 1</a>
</li>
<li>
<a>menu item 2</a>
<button aria-expanded="false">chevron</button>
<ul style="display: none">
<li>
<a>submenu item 1</a>
</li>
<li>
<a>submenu item 2</a>
</li>
</ul>
</li>
<li>
<a>menu item 3</a>
</li>
</ul>
</nav>
V 形按钮最初aria-expanded="false"，当您选择它时，您应该将值切换为"true"并取消隐藏子菜单。 你可以在Abercrombie & Fitch购物页面上看到类似的例子，https://www.abercrombie.com/shop/us。 但是，A&F隐藏了人字形，直到您按Tab键。 鼠标用户永远不会看到它，因为子菜单在鼠标悬停时打开。 他们也aria-expanded设置了他们的人字形。
我相信空链接不是WCAG违规。但是，如果拥有链接的主要目的只是触发JS函数，那么对于屏幕阅读器用户来说，这是有问题的。 当 SR 读取时不会有任何区别
<a href="#">HTML</a> vs <a href="https://www.w3schools.com/html/">HTML</a>.
两者都会被解读为"链接HTML"，因此用户希望链接在新选项卡中打开并离开当前页面并显示相关信息。
如果您不能使用 aria-label/aria-labelledby/aria-describedby 来阐明链接目的 给用户，那么我建议使用(按钮(标签而不是锚标签。
听起来这里的核心问题是...如何修改WordPress菜单吐出的默认HTML元素。
然后，您可以应用所需的任何辅助功能。
https://digwp.com/2011/11/html-formatting-custom-menus/
这已经过时了，但应该为您指明正确的方向。您的主题可以通过多种不同的方式进行导航。如果该指南未涵盖您的主题如何生成导航，则需要有关您的 wordpress/主题设置的更多信息才能进一步分析。