如何通过CSS针对盲文/屏幕阅读器进行定位

Question

我在网站上使用Web字体来显示一些图标。这非常棒，因为它们可以缩放，并且如果需要的话我也可以将它们打印出来... 但是问题是盲人会将它们视为普通字母或字符。下面的例子返回一个漂亮的图标+文本。

<span>i</span> Info
<span>t</span> Contact
etc...

对于盲人来说，他们只会读到：iInfo、tContact 等等...

是否有可能只针对点字和屏幕阅读器使用 CSS？

我在 w3 网站上找到了这个，但我不确定它在实际生活中是否有效：http://www.w3.org/TR/CSS2/media.html#media-types

有人有相关经验吗？

------更新-----

:before 和 :after -> 一些屏幕阅读器（如 MacOS 的 VoiceOver）确实会大声读出“content”部分。我已经亲自测试过。

@media braille, speech -> 对 VoiceOver 没有影响。它会读取屏幕上可见的内容（在 Safari 和 Chrome 中进行测试）

speak: none; -> 对 VoiceOver 或 NVDA 没有任何影响（https://twitter.com/#!/jcsteh/status/143848614979055616）

- meo

---

如果您不需要支持旧版IE，可以将这些span替换为:before伪元素。 - BoltClock

@BoltClock 不幸的是，我确实有这个问题 :/ 你确定屏幕阅读器不会解释:before吗？ - meo

是的，因为它是一个视觉元素，不参与内容。 - BoltClock

@BoltClock 好的，我会测试一下，谢谢。但是我仍然需要一个在ie6和7中运行的解决方案... :( - meo

@meo：是的，我只是想强调一下：这不仅仅是关于屏幕阅读器在某个时刻的行为样本，你还必须考虑它们未来可能的变化。如果你在一年前左右使用VoiceOver进行测试，你可能会认为这是一个“安全”的做法 :) 屏幕阅读器一直在改变以试图跟上HTML和它的使用方式，所以你必须在这里格外谨慎。 - BrendanMcK

Answer 1

我认为这个问题没有“终极解决方案”。但您可以使用缩写标签来描述您的字体字符的用途，因此大多数屏幕阅读器将朗读缩写的标题参数，用户就能理解“图标字符”的含义。

我不完全确定，但似乎NVDA、JAWS和iOS上的VoiceOver可以正常工作，在Mac OS X上（不幸地）不能。

例如：

<abbr title="Attachment Icon">A</abbr>

- albuvee

---

啊，这是一个相当不错的解决方案。这样盲人就可以跳过图标，至少会有相应的提示。 - meo

有趣。Mac OS X 对此怎么处理？ - stringy

@stringy macOS 像其他所有东西一样大声朗读它... :/ 但我仍然认为这是目前最好的解决方案... - meo

Answer 2

你并不是唯一关注这里无障碍问题的人。最近的24Ways文章“使用字体和数据属性显示图标”中对此进行了大量讨论。Jon Hicks建议只使用:before伪元素生成你的span，这样大多数屏幕阅读器就不会捕获它（我认为Apple的VoiceOver可能是个例外，但是在所有目标浏览器中都要测试一下）。这样，有视力的用户将获得图标和文本，而辅助浏览器将只获取文本。

编辑后添加：我自己没有尝试过这种方法，但它似乎非常简单可预测。

- stringy

---

我想反对使用:before和:after：关键问题在于，虽然其中的文本不是DOM的一部分，但对有视力的用户可见，并且基本上屏幕阅读器都试图以某种方式与有视力的用户实现平等。如果内容不是DOM中的内容，则必要时会从CSS中提取它们。如果不在当前版本中，则可能在未来版本中。今天使用它们的危险是假设读者将忽略它们，而读者很可能会在未来改变行为，从而“破坏”您的页面。 - BrendanMcK

我明白你的观点。我认为字体作为图标应该通过:before添加，并作为渐进增强的方式，以便于那些浏览器和辅助技术可以处理它的人使用。实际的文本/内容应该是基本HTML的一部分，没有任何CSS/JS的花招，这样就可以让每个人都能够使用。我确实认为字体作为图标的技术并不像它应该的那样健壮，所以我自己不会使用它。但是如果有人要使用它，他们最好尝试使用现有的技术来使其可访问。 - stringy

关于这个问题的奇怪之处是，它并不是渐进增强-它几乎是一种反着来的版本：开始的时候，由于一些屏幕阅读器忽略它，所以:before文本不会被读出来，这是期望的效果；但后来，屏幕阅读器赶上了，并支持了它们，然后就“破坏”了。这里的问题是我们依赖于一个不可用的功能；而PE 是关于在该功能不可用时良好地工作，并在其可用时工作得更好。 - BrendanMcK

想将这个 Github Terse Font Icons 方法作为 Jon Hicks 文章的一种变体添加进去。当我说它不够健壮时，我的意思是它现在可以工作但以后可能会出问题。 - stringy

Answer 3

你可以像这样编写代码：

<span class="icon">i<span class="audio-description"> icon</span></span> Info
<span class="icon">t<span class="audio-description"> icon</span></span> Contact

以下是相关的CSS代码：

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

@media speech
{
    .icon
    {
        display: none;
        speak: none;
    }
}

这将为每个图标添加一个描述文本，可以被屏幕阅读器读取，但是将其移出屏幕范围，所以在标准Web浏览器中不可见。

这样做的好处是它应该能够优雅地降级：

• 在标准Web浏览器中，您的图标应该以与现在相同的方式呈现（除非CSS被禁用，在这种情况下，查看者将看到额外的icon文本）
• 在尊重@media speech 的屏幕阅读器中，图标不应被读出
• 在不尊重@media speech 的屏幕阅读器中，图标应该被读出为i icon等等。

此外，由于将内容移出屏幕似乎是为屏幕阅读器提供替代文本的常用方法，因此不太可能突然破损（即使已将其移到极左位置，屏幕阅读器也不太可能首先说出icon部分）。

- Matthew Strawbridge