如何通过 CSS 定位盲文/屏幕阅读器答案

【问题标题】：How to target a braille / screen-reader via CSS如何通过 CSS 定位盲文/屏幕阅读器
【发布时间】：2012-08-22 15:32:16
【问题描述】：

我使用网络字体在网站上显示一些图标。这太棒了，因为它们可以缩放，如果我愿意，我可以打印它们……但问题是盲人将它们视为普通字母或字符。以下示例返回一个不错的图标 + 文本。

<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）会大声朗读“内容”部分。我自己测试过。

@media braille, speech -> 接缝不会对 VoiceOver 产生影响。它读取屏幕上可见的内容（使用 safari 和 chrome 测试）

speak: none; -> 对 VoiceOver 或 NVDA (https://twitter.com/#!/jcsteh/status/143848614979055616) 完全没有影响

【问题讨论】：

如果您不需要旧的 IE 支持，您可以将这些跨度换成 :before 伪元素。
@BoltClock 不幸的是我这样做了：/ 你确定 :before 不会被屏幕阅读器解释吗？
是的，因为它是一个视觉元素，不参与内容。
@BoltClock 好的，我会测试一下，谢谢。但我仍然需要一个适用于 ie6 和 7 的解决方案... :(
不要赌:before/:after：虽然它们不会作为内容出现在DOM中，但它们对有视力的最终用户是可见的，因此屏幕阅读器会尝试获取该内容 -如果不是在当前版本中，那么在将来。与有视力的用户平等是这里的关键问题。

标签： html css accessibility

【解决方案1】：

我认为对此没有“终极解决方案”。但是您可以使用 abbr-tag 来描述 font-char 的使用，因此大多数屏幕阅读器会读出 abbr 的 title-param 并且用户会了解“icon-character”的含义。

我不能 100% 确定，但是因为它结合了 NVDA、JAWS 和适用于 iOS 的 VoiceOver 这在 Mac OS X 上有效（不幸的是）不是...

例子：

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

【讨论】：

啊，这是一个非常性感的解决方案。通过这种方式，盲人可以跳过图标，至少它是这样宣布的
有趣。 Mac OS X 用它做什么？
@stringy macos 像其他所有东西一样大声读出它......：/但是，我仍然认为它是迄今为止最好的解决方案......

【解决方案2】：

您不是唯一一个对这里的可访问性问题感到疑惑的人。在displaying icons with fonts and data-attributes 上最近的 24Ways 文章中有很多关于它的讨论。 Jon Hicks 提出的建议是仅使用 :before 伪元素生成您的跨度，大多数屏幕阅读器都不会使用该元素（我相信 Apple 的 VoiceOver 可能是个例外，但无论如何都要在所有目标浏览器中测试它） .这样，有视力的用户将获得图标和文本，而辅助浏览器将仅获得文本。

编辑补充：我自己没有尝试过这种方法，但它看起来非常简单和可预测。

【讨论】：

我想反对使用 :before 和 :after ：这里的关键问题是，虽然这些文本不是 DOM 的一部分，但有视力的用户可以看到，基本上屏幕阅读器都是关于试图以一种或另一种方式与有视力的用户平等。如果内容不是 DOM 中的内容，他们会在必要时从 CSS 中提取它。如果不在当前版本中，那么可能在未来版本中。假设读者会忽略它们，今天使用它们的危险在于读者将来可能会改变行为，“破坏”你的页面。
我明白你的意思。我认为 font-as-icon 是应该通过 :before 添加的部分，并且作为浏览器和 AT 可以处理它的人的渐进增强。实际的文本/内容应该是基本 HTML 的一部分，没有 css/js 诡计，以便所有人都可以使用。我确实认为 font-as-icon 技术并不像它应该的那样强大，并且不会自己使用它。但如果有人要使用它，他们不妨尝试使用现有技术使其易于访问。
不过，奇怪的是，它不是渐进式增强 - 它几乎是一个奇怪的反向版本：发生的情况是你从 :before 开始文本没有被读出，因为今天的一些屏幕阅读器忽略它，这是想要的效果；但后来，屏幕阅读器赶上并添加了对这些的支持，然后它“中断”。这里的问题是我们依赖的功能不可用；而 PE 是在该功能不可用时运行良好，而在该功能可用时运行更好。
想要添加这个 github Terse Font Icons 方法作为 Jon Hicks 文章的变体。当我说它不健壮时，它现在可以工作但以后可能不会的事实就是我的意思。

【解决方案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;
    }
}

这会为屏幕阅读器读取的每个图标添加说明，但 moves it off the screen 因此在标准 Web 浏览器中不可见。

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

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

此外，由于将内容移出屏幕似乎是为屏幕阅读器提供替代文本的常用方法，因此该解决方案不太可能突然中断（即屏幕阅读器不太可能首先说出 icon 部分，即使它被移到了最左边）。

【讨论】：