在HTML中，如何使文本仅可供屏幕阅读器（即盲人）访问？

我有一个网站，上面有带数字的彩色div，例如一个红色方块，里面有数字2。颜色对于理解很重要。一位盲人用户给我发电子邮件，问我能否让他的屏幕阅读器显示“2红色”

我尝试将此添加为alt=“2红色”，但他说这没有任何作用。他认为它可能只读取图像的alt标记

---

对于div，有没有一个好方法可以做到这一点？

就alt text而言，您是正确的，它只适用于图像。。但对于非图像元素，可以使用aria label代替alt属性，如下所示：

有效的解决方案 咏叹调标签★ ★ ★ ★ ★ ★

aria label

（不适用于

aria labeledby

）用于向元素添加屏幕外描述性内容，就像

alt=

属性在图像不可显示时向图像添加屏幕外描述性内容一样

区别在于，

aria标签

可用于非图像元素

<div aria-label="test A"><p aria-hidden="true">test B</p></div>
<!--
     result (screenreaders):  test A
     result (regular):        test B
-->

该剪辑用于完全隐藏1px 1px元素，否则它仍将在屏幕上可见

位置★ ★ ★ 只要实际缩进值超出页面布局的范围，它就不重要。该示例将内容向左移动5000像素

此解决方案仅适用于完整的文本块。它在锚定、表单、从右到左的语言、或与其他文本混合的特定内联文本上无法正常工作

行不通 可见性：隐藏；和/或显示：无； 这些样式将对所有用户隐藏文本。文本将从页面的可视流中删除，并被屏幕阅读器忽略。如果希望屏幕阅读器读取内容，请不要使用此CSS。但一定要把它用于你不想让屏幕阅读器阅读的内容

.hovereffect a.info {
    color: #9c27b000 !important;
}

宽度：0px；高度：0px 如上所述，由于没有高度或宽度的元素将从页面流中删除，因此大多数屏幕阅读器将忽略此内容。HTML宽度和高度可能给出相同的结果。如果希望屏幕阅读器读取内容，请不要将内容大小设置为0像素

进一步：

---

您可以在其内部放置一个可视隐藏元素：

<div>
    <span class="visually_hidden">2 red</span>
</div>

---

关于标题中的问题：不，没有办法（以HTML或其他方式）让文本只供屏幕阅读器访问。无论您可以做什么，例如使用带有非空

alt

属性的

img

元素，以及缺少或功能失调的

src

属性`或使用CSS在视觉上隐藏某些内容，都可以供任何想要读取它的软件使用（并且可能由于某种原因而无法被屏幕阅读器访问）

另一方面，如果你真的使用

<div class=foo>2 <img alt=red></div>

2

然后，大多数屏幕阅读器都会将其读作“两个红色”，但行为良好的普通浏览器也会这样读，因此效果并不局限于屏幕阅读器

.hovereffect a.info {
    color: #9c27b000 !important;
}

您应该为可访问性做些什么是另一个问题，取决于上下文和使用红色的目的。请注意，即使浏览器将框显示为红色，由于色盲，用户也可能看不到它为红色；特别是如果区分红色和绿色是相关的，许多人将无法做到这一点

在特定情况下可能有一个简单的解决方案，或者可能是一个棘手的问题，没有好的解决方案。有关一般说明和各种技巧，请参阅文档。

编辑2020：

---

目前，

display:none

或

visibility:hidden

似乎通常会导致内容在视觉上和屏幕阅读器上不可见（刚刚在Firefox和Chrome中使用NVDA进行了测试），因此下面的陈述无效。 目前，将内容移出屏幕似乎是仅为screenreader用户提供内容的唯一方式，另请参见下表：

---

除非在接受的答案中有不同的说明，否则至少Chromevox1和NVDA2也要读取样式

display:none

或

visibility:hidden

CSS属性的元素（如果设置了

aria hidden=false

）。然而，目前只有Chrome（65）版，而不是Firefox或Edge（根据我的测试）

因此（不幸的是，目前只有在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>

标题仅适用于屏幕阅读器
第二个标题仅适用于屏幕阅读器
只指向屏幕

其中Chromevox和NVDA读取第一个和第二个标题。 另请参见：

如果所有浏览器都同意这种行为，那么它将是一个比其他解决方案中提出的所有CSS技巧更干净的解决方案

1Chromevox

---

2NVDA

如何使字体颜色完全透明？ 我没有屏幕阅读器来测试这种类型的文本是否可以被屏幕阅读器读取

.hovereffect a.info {
    color: #9c27b000 !important;
}

---

visibility:hidden

或

display:none

不适用于单屏幕阅读器（除非禁用CSS）。它们是向所有人隐藏内容的两种可靠技术，无论屏幕阅读器用户与否。感谢您的更正，我已将答案更新为reflected。此人实际上告诉我，aria label不适用于他的阅读器，尽管规范说应该如此……当我将属性附加到标准div时，aria label不适用于Jaws，阿里亚·拉伯莱德比也没有，有人知道为什么吗？我将此用于FF，IEaria标签仅允许用于具有明确角色的内容，因此我也不明白“最佳”示例是如何工作的。您好，这仍然是2016年的解决方案吗？我还试图找出是否有一种方法可以解决附加到DivThreak的screenreader只能读取字符串的问题，这正是我想要的。从标准的角度来看，最好能以表格形式概述哪些浏览器/屏幕阅读器组合优先，哪些应该优先。Transpar

<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>

.hovereffect a.info {
    color: #9c27b000 !important;
}