如何仅向屏幕阅读器显示标签 - Web Accessiblity

Question

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

Answer 1

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

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

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

Answer 2

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

谁在地球上禁用样式表？

我不能给出百分比,但由于一些事情,我会定期禁用它们.今天早上我必须填写表格,因为他们的CSS和JS很不稳定.

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

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

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