如何仅在屏幕阅读器上显示标签 - 网页可访问性

Question

在HTML中，我想展示一个<label>与我的文本框一起显示，只供屏幕阅读器或语音浏览器使用。有哪些方法可以根据WAG-ARIA指南实现这一点？我还想知道反过来的情况，如何隐藏一些文本，只供语音浏览器使用？

- Ravi

Answer 1

我发现最好的方法是创建一个可以切换的类，使用CSS来隐藏文本。 我所用的代码是：

    .hidden
{position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;}

关于仅从屏幕阅读器中隐藏文本，什么情况下需要这样做？

- gotohales

---

嗨mookamafoob，谢谢你的回答+1。这是一个关于可访问性的面试问题，我无法回答 :) - Ravi

gotohale的回答与Bootstrap的做法非常相似（他们使用一个名为“.sr-only”的类）。你需要这样做的情况是，如果出于布局目的而省略了标签。你可能会将它们作为文本输入框中的占位符，但屏幕阅读器不会将该占位符文本视为标签。你需要定义实际的标签并将它们隐藏起来。 - user721856

Answer 2

为了实现这个目标，只需使用一些CSS来将其定位到屏幕外。除非禁用样式表，否则这将在视觉上隐藏标签。在这里您不需要ARIA，除非您试图做比您说的更花哨的事情。

到底有谁会禁用样式表呢？

我不能给出一个百分比，但由于许多原因，我会周期性地禁用它们。今天早上我必须这样做才能填写一个表格，因为他们的CSS和JS有问题。

我也想知道如何从语音浏览器中隐藏某些文本的反向场景？

我真的不知道你指的是什么。我尝试冒险猜测一下，你是在谈论那些使用Dragon NaturallySpeaking的人。隐藏标签实际上会减少用户体验。对于屏幕阅读器JAWS、NVDA、VoiceOver，它会进行以下操作:“嗨，我在文本框中，是否有一个for属性与我的ID相对应的标签？”是的，有，然后宣布这个里面的文本。 Dragon的工作方式几乎相反。它认识到文本是一个标签，并匹配，当人们说标签中的单词（如名字）时，表单元素获得焦点。

看看其他答案，如果他们正确地解释了这个问题：“如何从屏幕阅读器中隐藏页面的某些部分？”，答案是可以的，通过使用aria-hidden属性。我回答了关于aria-hidden的问题，其中的链接可以提供帮助。

- Ryan B

---

嗨，Ryan，感谢你的回答+1。这是一个关于无障碍性的面试问题，我无法回答 :) - Ravi

我建议您将此添加到问题正文中。 - Ryan B

Answer 3

在Chrome中，目前也可以像这样工作：

<h1 aria-hidden="false" style="display: none;">Heading only for Screen Readers</h1>
<h1 aria-hidden="false" style="visibility: hidden;">Second Heading only for Screen Readers</h1>
<h1 aria-hidden="true">Heading only for Screen</h1>

第一和第二标题将被屏幕阅读器读取。

此外，您可以在这里查看我的答案：https://dev59.com/LF8e5IYBdhLWcg3wJnyl#49940541

- klues

Answer 4

我一直在尝试寻找解决方案，写了类似于这样的东西：

   .hidden {
    opacity: 0;
    pointer-events: none;
    position: absolute;
   }

你觉得呢？

- Karol Ciesluk

Answer 5

最佳答案是正确的方式。

*class/tag* { 
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}

应该知道这是Webaim推荐的代码，该组织致力于为所有人提供网络无障碍。

- T3nt4c135