关于 href="#" 的可访问性答案

【问题标题】：Accessibility Regarding href="#"关于 href="#" 的可访问性
【发布时间】：2018-10-05 20:06:10
【问题描述】：

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

我遇到的问题是：在包含子菜单的导航项中，一些实际上链接到页面，而另一些则使用 href="#"，因为它们包含子菜单但实际上并没有链接到任何地方.

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

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

谢谢！

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

【问题讨论】：

标签： navigation accessibility wcag

【解决方案1】：

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

您希望用户通过列表打开菜单和向上/向下箭头，还是希望他们通过列表tab？

前者需要您自己管理焦点（箭头键的键盘处理程序并维护tabindex 属性），而后者更简单 - 浏览器可以通过菜单中的链接处理选项卡。

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

对于前者（箭头键导航），应使用菜单角色（menu、menuitem）和属性（aria-haspopup）。当屏幕阅读器看到这些属性时，它会告诉用户使用箭头键进行导航。如果您的菜单项具有子菜单，则该菜单项应指定 aria-haspopup。

对于后者（tab 键导航），不要使用上述任何菜单角色。相反，您的菜单应该只是一个链接列表 (<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>

V 形按钮最初有aria-expanded="false"，当您选择它时，您应该将值切换为“true”并取消隐藏子菜单。您可以在 Abercrombie & Fitch 购物页面https://www.abercrombie.com/shop/us 上看到类似的示例。但是，A&F 会隐藏 V 形，直到您 TAB 到它为止。鼠标用户永远不会看到它，因为子菜单会在鼠标悬停时打开。他们的人字形上也有aria-expanded。

【讨论】：

感谢您的详细回复。我正在使用制表键导航。整个导航已经可以使用 Tab 键进行操作。子菜单的 V 形是带有 tabindex="0" 的单独制表位。您能否阐明在由嵌套
您写道“听起来，如果您选择一个链接，它会转到另一个页面，但如果您选择 V 形，它会在该项目下打开一个子菜单？”这是完全正确的，Abercrombie 导航就是一个很好的例子，但有一个例外：我的一些链接不会去任何地方。他们没有href，只有一个雪佛龙。我们根本没有可供他们链接的页面，因此它们的行为更像是对其子菜单的“描述”。这些不链接任何地方的“链接”是否需要 aria-label？
这可能是一个设计/可用性问题，因为现在您的项目不一致。没有人字形的链接会将您带到另一个页面。这很好而且一致。带有人字形的链接可能将您带到另一个页面。那感觉很奇怪。使用 V 形的唯一原因是链接本身转到另一个页面，但您还希望在该链接下显示子菜单。但是您也有一些链接不会转到另一个页面，但仍然有一个子菜单。我认为这需要与你的设计师讨论。

【解决方案2】：

我认为有空链接并不违反 WCAG。但是，如果拥有链接的主要目的只是触发一个 JS 函数，那么对于屏幕阅读器用户来说是有问题的。 SR读取时不会有任何区别

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

两者都将被读取为“链接 HTML”，因此用户希望链接在新选项卡中打开并离开当前页面并显示相关信息。

如果您不能使用 aria-label/aria-labelledby/aria- describeby 来阐明链接目的给用户，那么我建议使用（按钮）标签而不是锚标签。

【讨论】：

感谢您的回复。 <a>s 不会触发 JS。一些<a>s 链接到单独的页面，正如正常导航项所预期的那样。其他包含子菜单，但实际上并没有链接到任何地方。它们充当一种“父链接”，对它包含的子菜单链接进行分类。通过与雪佛龙交互来切换子菜单（此交互需要 JS，但我可以控制雪佛龙 aria-label，因此它们不是问题）。

【解决方案3】：

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

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

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

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

【讨论】：