在HTML中，我如何获得仅供屏幕阅读器访问的文本（即对于盲人）？ [英] In HTML, how can I have text that is only accessible for screen readers (i.e. for blind people)?
问题描述
我有一个网站，上面有数字的彩色div，例如里面有数字2的红色块。颜色对理解很重要。一位盲人用户给我发了一封电子邮件，问我是否可以为他的屏幕阅读器声明2红色。
我尝试将此添加为alt =2 red说没有做任何事情。他认为它可能只是读取图片的alt标签。
有没有一种很好的方法可以为div做这件事？
感谢！
至于替代文字，您是正确的，只适用于图像..但您可以使用aria-label代替非图像元素的alt属性，如下所示：
解决方案
ARIA标签★★★★★★
aria-label （不要专注于 aria-labeled by ）用于将屏幕描述性内容添加到元素，这与 alt = 属性添加屏幕描述内容到图像不可显示时使用的图像。
区别在于， aria-label 可以是用于非图像元素。
< div aria-label =test A>< p aria-hidden =true> test B< / p>< / div>
<！ -
结果（屏幕阅读器）：test A
结果（常规）：test B
- >
添加了 aria-hidden 属性隐藏内文。
位置+剪辑+折叠★★★★
.screenreader {
position：absolute！important; / *在DOM流之外* /
height：1px;宽度：1px; / *几乎折叠* /
溢出：隐藏;
clip：rect（1px 1px 1px 1px）; / * IE 7+仅支持不带逗号的剪辑* /
剪辑：rect（1px，1px，1px，1px）; / *所有其他浏览器* /
}
剪辑用于隐藏1px x 1px元素，否则它仍然可以在屏幕上看到。
位置★★★
.screenreader {
position：absolute;剩余
：-9999px;
}
< div> Wed< span class =screenreader> nesday< / span> ;, 9月< span class =screenreader> ember< / span> 24，2014< / div>
缩进★
.screenreader {
text-indent：-5000px;
}
实际缩进值并不重要，只要它超出你的页面布局。该示例将把内容移动到左侧的5,000像素。
该解决方案仅适用于全部文本块。它不适用于锚点或表单，或从右到左的语言，或与其他文本混合的特定内联文本。
无法正常工作
visibility：hidden;和/或显示：无;
这些样式将隐藏所有用户的文本。文本从页面的可视流中移除，并被屏幕阅读器忽略。如果您希望屏幕阅读器读取内容，请不要使用此CSS。但是，请将其用于您不希望被屏幕阅读器阅读的内容。
如上所述，因为没有高度或宽度的元素从页面流中移除，所以大多数屏幕阅读器将忽略此内容。 HTML宽度和高度可能会得到相同的结果。如果您希望屏幕阅读器读取内容，请勿将内容大小设置为0像素。
另外：
I have a website that has colored divs with numbers, e.g. a red block with the number 2 inside of it. The color is important to understanding. A blind user emailed me asking if I could make it say "2 red" for his screen reader.
I tried adding this as an alt="2 red" but he said that didn't do anything. He thinks it might only read alt tags for images.
Is there a good way to do this for divs?
Thanks!
As far as alt text, you are correct, that only works for images.. But you can use aria-label in place of the alt attribute for non-image elements like so:
Solutions that work
ARIA Labels ★ ★ ★ ★ ★ ★
aria-label (not to be focused with aria-labeledby) is used to add off-screen descriptive content to an element much in the way an alt= attribute adds off-screen descriptive content to images to be used when the images are not displayable.
The difference is, aria-label can be used on non-image elements.
<div aria-label="test A"><p aria-hidden="true">test B</p></div>
<!--
result (screenreaders): test A
result (regular): test B
-->
The addition of the aria-hidden attribute hides the inner text.
Position + Clip + Collapse ★ ★ ★ ★
.screenreader {
position: absolute !important; /* Outside the DOM flow */
height: 1px; width: 1px; /* Nearly collapsed */
overflow: hidden;
clip: rect(1px 1px 1px 1px); /* IE 7+ only support clip without commas */
clip: rect(1px, 1px, 1px, 1px); /* All other browsers */
}
The clip is used to hide the 1px x 1px element completely, otherwise it will still be visible on the screen.
Position ★ ★ ★
.screenreader {
position: absolute;
left:-9999px;
}
<div>Wed<span class="screenreader">nesday</span>, Sept<span class="screenreader">ember</span> 24, 2014</div>
Indent ★
.screenreader {
text-indent: -5000px;
}
The actual indent value is not important as long as it's outside of the range of your pages layout. The example will move the content to the left 5,000 pixels.
This solution only works for full blocks of text. It won't work well on anchors or forms, or right-to-left languages, or specific inline-text intermixed with other text.
Will not work
visibility: hidden; and/or display:none;
These styles will hide text from all users. The text is removed from the visual flow of the page and is ignored by screen readers. Do not use this CSS if you want the content to be read by a screen reader. But DO use it for content you don't want read by screen readers.
width:0px;height:0px
As above, because an element with no height or width is removed from the flow of the page, most screen readers will ignore this content. HTML width and height may give the same result. Do not size content to 0 pixels if you want the content to be read by a screen reader.
Further:
这篇关于在HTML中，我如何获得仅供屏幕阅读器访问的文本（即对于盲人）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
