6

在 HTML 中，我想显示一个<label>放置在我的文本框中的内容，以便仅显示给屏幕阅读器或语音浏览器。关于 WAG-ARIA 指南，有什么方法可以实现这一点，我也想知道反之亦然的情况，即仅从语音浏览器中隐藏一些文本？

4

5 回答 5

8

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

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

至于仅对屏幕阅读器隐藏文本，什么样的情况需要这样做？

于 2012-11-26T15:46:13.490 回答
5

为此，只需使用一些 CSS 将其置于屏幕外。这将在视觉上隐藏标签，除非他们禁用样式表。你在这里并不需要 ARIA，除非你想要做的东西比你说的更花哨。

到底是谁禁用了样式表？

我不能给出百分比，但由于一些原因，我会定期禁用它们。我今天早上必须这样做才能填写表格，因为他们的 CSS 和 JS 很不稳定。

我还想知道反之亦然的情况，即仅从语音浏览器中隐藏一些文本？

我真的不知道你这是什么意思。我会在黑暗中拍摄，并说你在谈论使用 Dragon NaturallySpeaking 的人。隐藏labels 实际上会降低用户体验。对于屏幕阅读器、JAWS、NVDA、VoiceOver，它执行以下操作：哦，嘿，我在一个文本框中，是否有一个带有我 ID 的 for 属性的标签？是的，有，然后在label. 龙几乎以相反的方式工作。它识别出文本是一个标签，并且匹配起来，当人们说出标签中的单词（例如名字）时，表单元素会获得焦点。

查看另一个答案，如果他们将这个问题正确解释为：“如何[或可以]从屏幕阅读器中隐藏页面的某些部分？” 答案是肯定的，您可以使用该aria-hidden属性。前几天我回答了一个问题aria-hidden，其中的链接可能会提供见解。

于 2012-11-26T14:10:58.997 回答
2

目前在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 ://stackoverflow.com/a/49940541/9219743

于 2018-04-20T11:27:42.617 回答
0

我一直在试图找到一个解决方案并写了这样的东西：

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

你怎么看？

于 2021-06-23T11:12:31.280 回答
0

最佳答案是正确的方法。

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

应该知道，这是 Webaim 推荐的代码，Webaim是一个致力于为所有人提供 Web 可访问性的组织。

于 2022-01-20T19:55:29.670 回答