在 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 隐藏图标，那么屏幕 reader 将退回到您提供的视觉隐藏文本（目前它可能正在尝试破译图标） .

下面的示例经过快速测试后在 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>

顺便说一句，我只使用了一个略有不同的屏幕 reader class，它对边缘情况更稳健并且面向未来，如果可以的话，我建议将其替换为

Answer 2

首先，尝试一种很少被可访问性专家测试的组合，这是一种荣誉。在屏幕上使用鼠标跟踪 reader 当然是一些用户需要的组合，但并不经常测试。

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

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

但是，对于 NVDA，仅可以在 Firefox 上运行。 Chrome 和 Edge 都不会在鼠标悬停时阅读“编辑电子邮件”文本。（Edge 基于 chromium 引擎，所以如果 Chrome 不起作用，Edge 也不会起作用。顶部提到的 NVDA 错误也说它在 Edge 中不起作用）。 =16=]

默认情况下，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.

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

In HTML, how can I hide text that is only accessible for screen readers on hover?

html

css

accessibility

screen-readers

hover