在 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-labeledby 聚焦)用于向元素添加离屏描述内容，很像 alt= 属性将屏幕外描述内容添加到图像无法显示时使用的图像.
区别在于，aria-label 可以用于非图像元素.
<div aria-label="test A"><p aria-hidden="true">test B</p></div><!--结果(屏幕阅读器):测试 A结果(常规):测试 B-->添加 aria-hidden 属性会隐藏内部文本.
位置+剪辑+折叠★★★★
.screenreader {位置:绝对！重要；/* 在 DOM 流之外 */高度:1px；宽度:1px；/* 差点崩溃 */溢出:隐藏；剪辑:矩形(1px 1px 1px 1px)；/* IE 7+ 只支持不带逗号的剪辑 */剪辑:矩形(1px，1px，1px，1px)；/* 所有其他浏览器 */}剪辑用于完全隐藏 1px x 1px 元素，否则它仍然会在屏幕上可见.
位置★★★
.screenreader {位置:绝对；左:-9999px；}<div>周三<span class="screenreader">nesday</span>、九月<span class="screenreader">ember</span>2014 年 2 月 24 日缩进★
.screenreader {文本缩进:-5000px；}实际缩进值并不重要，只要它超出页面布局的范围即可.该示例将内容向左移动 5,000 像素.
此解决方案仅适用于完整的文本块.它不适用于锚点或表单，或从右到左的语言，或与其他文本混合的特定内联文本.
不会工作
可见性:隐藏；和/或显示:无；
这些样式将对所有用户隐藏文本.文本从页面的视觉流中移除并被屏幕阅读器忽略.如果您希望屏幕阅读器阅读内容，请不要使用此 CSS.但请务必将其用于您不想让屏幕阅读器阅读的内容.
width:0px;height:0px
如上，因为从页面流中移除了一个没有高度或宽度的元素，大多数屏幕阅读器会忽略这个内容.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?
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屋！
