关于 href="#" 的辅助功能

Question

我正在构建一个需要符合 WCAG 标准的站点（在 WordPress 中，用于上下文）。我有一个主导航，可以完全通过键盘导航，包括切换子菜单。

我运行遇到的问题是：在我的包含子菜单的导航项中，有些实际上 link 到页面，而其他人使用 href="#"，因为它们包含一个子菜单，但实际上 link 不在任何地方。

通常我会在使用 href="#" 的导航项上使用 aria-label，但由于它们是自动生成的（由 WordPress）我不能这样做。

有人有什么建议吗？这甚至是相关的 WCAG 问题吗？每个 href="#" 导航项后跟一个 V 形（用于切换其子菜单），其中包含 "Toggle submenu" 的 arial-label。够好了吗？

谢谢！

编辑： 我试图回答此问题的特定任务已被搁置。解决后，我可以使用我们追求的解决方案更新此问题。我将 @slugolicious 的回答标记为首选，因为在他的评论中，他提供了一个合乎逻辑的解释，说明为什么不建议保留当前系统的不一致的顶级导航项。

Answer 1

我无法与 wordpress 对话，但可以评论 html 应该应该生成，但是生成的某些内容取决于您想要的行为。

您希望用户打开菜单并使用箭头 up/down 浏览列表，还是要他们 tab 浏览列表？

前者需要您自己管理焦点（箭头键的键盘处理程序并维护 tabindex 属性），而后者要简单得多 - 浏览器可以通过 link 处理制表符s 在菜单中。

通常，如果您的菜单用于导航，则需要后者。

对于前者（箭头键导航），应该使用菜单角色（menu, menuitem) and attributes (aria-haspopup）。当屏幕 reader 看到这些属性时，它会告诉用户使用箭头键进行导航。如果您有一个包含子菜单的菜单项，那么该菜单项应该指定 aria-haspopup。

对于后者（tab键导航），不要使用上述任何菜单角色。相反，您的菜单应该只是 link 的列表 (<ul>)（列表通常有 list-style:none）。如果您的任何列表项有子菜单，它们应该包含一个子列表（嵌套 <ul>）并且列表项应该有 aria-expanded 属性。

关于子菜单的人字形，人字形是一个单独的制表位吗？

更新以回答@LCW 在此答案的第一条评论中提出的其他问题。

aria-expanded 在您 select 显示子菜单的元素上继续，因此在您的情况下，它将是人字形本身，至少根据我对您的描述的理解。听起来如果你 select a link 它会转到另一个页面，但如果你 select 人字形，它会在该项目下打开一个子菜单？如果是这样，那么您的代码将是这样的：

<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"，当您 select 编辑它时，您应该将值切换为 "true" 并取消隐藏子菜单。您可以在 Abercrombie & Fitch 购物页面 https://www.abercrombie.com/shop/us 上看到类似的例子。但是，A&F 会隐藏人字形，直到您 TAB 为止。鼠标用户永远不会看到它，因为子菜单在鼠标悬停时打开。他们的人字形上也设置了 aria-expanded。

Answer 2

我认为 link 为空不违反 WCAG。但是，如果使用 link 的主要目的只是为了触发 JS 函数，那么对于 Screen reader 用户来说就有问题了。 SR 读取

时不会有任何区别

    <a href="#">HTML</a> vs <a href="https://www.w3schools.com/html/">HTML</a>.

两者都将被读作 "Link HTML"，因此用户希望 link 在新选项卡中打开并离开当前页面并显示相关信息。

如果不能用aria-label/aria-labelledby/aria-describedby说明link的目的给用户，那么我建议使用（按钮）标签而不是锚标签。

Answer 3

听起来这里的核心问题是...如何修改 Wordpress 菜单弹出的默认 HTML 元素。

然后您可以应用您想要的任何辅助功能。

https://digwp.com/2011/11/html-formatting-custom-menus/

这是过时的，但应该为您指明正确的方向。您的主题可以通过多种不同方式放置导航。如果该指南未涵盖您的主题如何生成导航，则需要有关您的 wordpress/theme 设置的更多信息以进行进一步分析。

关于 href="#" 的辅助功能

Accessibility Regarding href="#"

navigation

accessibility

wcag