在 HTML 中，如何隐藏只有悬停时屏幕阅读器才能访问的文本？

Question

我正在改进网站的可访问性。有带有图标的编辑和删除按钮。我们使用这个技巧让屏幕阅读器可以阅读它们，但它只在 Tab 时有效：

.screenreader {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

html:

<button class="btn-link">
   <span class="screenreader">edit e-mail</span>
   <span class="icon icon-md icon-create"></span>
</button>

但我希望使用鼠标的视障用户在将鼠标悬停在按钮上时能够被朗读。但是我无法让它工作。希望有人能帮帮我！

Answer 1

您只需要进行一项细微的更改即可使其正常工作。

如果您使用 aria-hidden 隐藏图标，那么屏幕阅读器将退回到您提供的视觉隐藏文本（因为此时它可能正在尝试破译图标）。

经过快速测试，下面的示例可以在 JAWS 和 NVDA 中运行。

.screenreader { 
    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 */
}

<button class="btn-link">
   <span class="screenreader">edit e-mail</span>
   <span class="icon icon-md icon-create" aria-hidden="true">ICON</span>
</button>

顺便说一句，我使用了一个稍微不同的仅限屏幕阅读器的类，它对边缘情况更加健壮并且面向未来，如果可以的话，我建议将其替换为 visually hidden class detailed in this answer I gave.

Answer 2

首先，感谢您尝试了一种很少被无障碍专业人士测试的组合。将鼠标跟踪与屏幕阅读器结合使用当然是某些用户需要的组合，但并未经常进行测试。

我想你发现了这个 NVDA 错误 - https://github.com/nvaccess/nvda/issues/12047

您的原始代码和@graham 的代码都适用于 Firefox、Chrome 和 Edge 上的 JAWS。当我将鼠标悬停在按钮上时，我听到“编辑电子邮件”。您必须在 JAWS 中启用鼠标回声才能听到鼠标悬停下的文本，因为默认情况下鼠标回声是不开启的。

但是，对于 NVDA，它仅适用于 Firefox。 Chrome 和 Edge 都不会在鼠标悬停时读取“编辑电子邮件”文本。 （Edge 基于 chromium 引擎，所以如果 Chrome 不工作，Edge 也不能工作是有道理的。顶部提到的 NVDA 错误也表示它在 Edge 中不工作）。

默认情况下，NVDA 开启了鼠标跟踪。您可以使用 Ins+M 切换它或进入设置并切换“启用鼠标跟踪”复选框。

“编辑电子邮件”按钮的可访问性属性在 Chrome 上是正确的。

注意“名称”（即accessible name）是“编辑电子邮件”，来自“内容”。当元素获得焦点时，应该读取可访问的名称。正如您最初指出的那样，它适用于 TAB 但不适用于鼠标悬停。

因此，如果 Chrome 中的辅助功能属性看起来正确并且 JAWS 通过在鼠标悬停时宣布“编辑电子邮件”与 Chrome 正常工作，为什么 NVDA 不读取文本？ NVDA 当然可以访问可访问的名称。 NVDA 在 Firefox 中可以很好地读取可访问的名称。那么为什么 NVDA 可以在 Firefox 上运行，但在 Chrome 上不行呢？我不确定（对不起）。 Chrome 可能没有显示 NVDA 需要的一些信息，尽管 JAWS 在没有这些其他信息的情况下工作得很好，这就是为什么我认为这是一个 NVDA 错误。

所以现在您必须决定是否要围绕 NVDA 错误编写代码。有时这会导致非常混乱的代码，从而可能导致其他问题。我的建议是使用您当前拥有的代码，因为它编码正确，并更新aforementioned NVDA bug.