Question

我的网站上有带数字的彩色div，例如一个红色的块，里面有数字2。颜色对理解很重要。一位盲人用户通过电子邮件告诉我，我是否可以说出来＆＃34; 2 red＆＃34;他的屏幕阅读器。

我尝试将其添加为alt =＆＃34; 2 red＆＃34;但他说没有做任何事情。他认为它可能只读取图像的alt标签。

为div做一个好方法吗？

Answer 1

就alt文本而言，你是正确的，只适用于图像..但你可以使用aria-label代替非图像元素的alt属性，如下所示：

有效的解决方案

ARIA标签★★★★★★

aria-label（不专注于aria-labeledby）用于向元素添加屏幕外描述性内容，与alt=属性添加屏幕外描述内容的方式非常相似图像不可显示时使用的图像。

不同之处在于，aria-label可用于非图像元素。

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

添加aria-hidden属性会隐藏内部文本。

位置+剪辑+折叠★★★★

.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 */
}

该剪辑用于完全隐藏1px x 1px元素，否则它仍会在屏幕上显示。

位置★★★

.screenreader {
    position: absolute;
    left:-9999px;
}

<div>Wed<span class="screenreader">nesday</span>, Sept<span class="screenreader">ember</span> 24, 2014</div>

缩进★

.screenreader {
    text-indent: -5000px;
}

实际的缩进值并不重要，只要它超出了页面布局的范围。该示例将内容移动到左侧5,000像素。

此解决方案仅适用于整个文本块。它不会在锚点或表格，或从右到左的语言，或与其他文本混合的特定内联文本上运作良好。

无效

可见性：隐藏;和/或显示：无;

这些样式将隐藏所有用户的文字。文本将从页面的可视流中删除，并被屏幕阅读器忽略。如果您希望屏幕阅读器读取内容，请不要使用此CSS。但是，请将它用于您不希望屏幕阅读器阅读的内容。

<击>宽度：0像素;高度：0像素

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

此外：

Answer 2

除非在接受的答案中另有说明，至少 Chromevox ¹ 和NVDA ²也要阅读如果设置了display:none，则设置样式visibility: hidden或aria-hidden=false CSS属性。但目前仅限于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读取第一个和第二个标题。另请参阅：https://jsfiddle.net/4y3g6zr8/6/

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

^{1 _{Chromevox https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn}} ^{2 _{NVDA https://www.nvaccess.org/}}

Answer 3

您可以在视觉中隐藏元素：

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

要在视觉上隐藏＆＃34;，您可以借用HTML5样板文件的方式：

.visually_hidden { 
    border: 0; 
    clip: rect(0 0 0 0); 
    height: 1px; 
    margin: -1px; 
    overflow: hidden; 
    padding: 0; 
    position: absolute; 
    width: 1px; 
}

Answer 4

关于标题中的问题：不，没有办法（以HTML或其他方式）拥有只能供屏幕阅读者访问的文本。无论您做什么，例如使用具有非空img属性的alt元素以及缺少或不正常src属性`或使用CSS隐藏某些内容，都可以使用任何软件关心它（由于某种原因，屏幕阅读器可能无法访问）。

另一方面，如果您实际使用例如。

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

然后大多数屏幕阅读器会将其读作“两个红色”，但普通浏览器也会表现良好，因此效果不仅限于屏幕阅读器。

您应该做什么 for accessibility 是一个不同的问题，取决于上下文和使用红色的目的。请注意，即使浏览器显示一个红色的框，由于色盲，用户也可能看不到它为红色;特别是如果区分红色和绿色，很多人都不会这样做。

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

Answer 5

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

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

在HTML中，我如何才能获得仅供屏幕阅读器（即盲人）访问的文本？

5 个答案: