Question

在HTML中，我想在我的文本框中显示<label>，只显示屏幕阅读器或语音浏览器。关于WAG-ARIA指南有哪些方法可以实现这一点，我也想知道仅从语音浏览器隐藏一些文本的相反方案？

Answer 1

要做到这一点，只需使用一些CSS将其定位在屏幕外。这将以可视方式隐藏标签，除非它们禁用样式表。你在这里并不需要ARIA，除非你想要的东西比你说的更加花哨。

谁在地球上禁用样式表？

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

我还想知道仅从语音浏览器中隐藏一些文本的相反方案？

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

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

Answer 2

我找到的最好方法是创建一个可以切换的类，它将使用CSS直观地隐藏文本。我使用的代码是：

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

至于只从屏幕阅读器隐藏文字，需要什么样的情况？

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

Answer 4

我一直在努力寻找解决方案并写了这样的东西：

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

你怎么看？

如何仅向屏幕阅读器显示标签 - Web辅助功能

4 个答案: