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