屏幕阅读器无法读取锚标记内的可见文本

Question

我有一个 Angular 应用程序，它有一个下拉菜单，如下所示

我使用 NVDA 阅读器来阅读屏幕。在这里，当我选择焦点时，它只读取 aria-label 中的内容。我希望它读取 aria 标签内容和其他文本（“帐户”、用户名、电子邮件）锚标签也是。

navigation.tpl.html

<ul id="accountMenu" class="dropdown-menu" role="menu">
  <li class="account" ng-click="openDialog($event)">
    <a class="account-container" role="button" aria-label="Open dropdown" href="#">
      <div href="#" class="dropdown-menu">Account</div>
      <div class="account-name">{{ ::username }}</div>
      <div class="account-email" ng-bind="::email"></div>
    </a>
  </li>
</ul>

Answer 1

在您的示例中，您用aria-label 覆盖了“帐户、用户名、电子邮件”文本。

aria-label 用作“向屏幕阅读器说这个而不是这个元素的内容”属性，覆盖其中的信息。

如果您想添加其他信息，您应该查看aria-labelledby。

但我总是鼓励人们不要使用aria-label，而是使用视觉隐藏的文字。

这一切都归结为支持aria-label 没有完美的支持，而视觉隐藏的文本将一直工作到 IE6！

在不支持 CSS（纯文本浏览器）的浏览器上也可以使用视觉隐藏的文本，这是一个很好的额外奖励。

我在下面创建了一个 sn-p 来向您展示如何执行此操作。

关于语义的补充说明

请注意，我还在 sn-p 中添加了第二个示例，我将您的锚点 (<a>) 更改为 <button>。

语义很重要，按钮表示同一页面上的操作，锚点表示导航到另一个页面。将 role="button" 添加到没有目标 (#) 的锚点比使用 <button> 复杂得多，而且远不如一开始就使用按钮那么健壮！

这可能需要一些 CSS 摆弄，但我建议您尝试按照按钮模式进行相同的页面操作，使用锚点进行导航，因为它会让您的生活更轻松。

为什么不直接使用.sr-only

如果您想知道为什么我会推荐这个自定义 CSS 类，用于在引导程序等中的标准 .sr-only 类上隐藏文本。here is the original explanation I made on Stack Overflow 解释了 .sr-only 类目前存在的问题。

.visually-hidden { 
    border: 0;
    padding: 0;
    margin: 0;
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
    clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
    clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
    white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}

<ul id="accountMenu" class="dropdown-menu" role="menu">
  <li class="account" ng-click="openDialog($event)">
    <a class="account-container" role="button" href="#">
      <span class="visually-hidden">Open dropdown</span>
      <div href="#" class="dropdown-menu">Account</div>
      <div class="account-name">{{ ::username }}</div>
      <div class="account-email" ng-bind="::email"></div>
    </a>
  </li>
</ul>

<h2>A suggestion to improve this further</h2>

<ul id="accountMenu" class="dropdown-menu" role="menu">
  <li class="account" ng-click="openDialog($event)">
    <button class="account-container">
      <span class="visually-hidden">Open dropdown</span>
      <div href="#" class="dropdown-menu">Account</div>
      <div class="account-name">{{ ::username }}</div>
      <div class="account-email" ng-bind="::email"></div>
    </button>
  </li>
</ul>