小技巧，提升读屏操作体验 读屏软件怎么用啊

本文介绍在Web前端中为读屏提供补充信息的一种小技巧，并简单分析了此技巧的应用场景和注意事项，适当使用本技巧可以在网页浏览中有效提升读屏的操作体验。

在WordPress主题的css中，有一条这样的class定义：

.screen-reader-text { clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; position: absolute !important; width: 1px; word-wrap: normal !important; /Many screen reader and browser combinations announce broken words as they would appear visually. */}

那么这个screen-reader-text可以用来做什么呢？从名称上，我们很容易看出，它是针对读屏的文本样式定义。具体表现如何，让我们来做下面一个实验：

<p>你爱吃的<span class="screen-reader-text">水果</span>都在这里</p>

通过上面的实验，我们发现我们在P标签中设置的“你爱吃的水果都在这里”中的“水果”二字，视觉上不可见了。让我们在使用读屏阅读上面的文字试试看。没错，当你使用读屏阅读的时候，读屏却完整的读出了P标签中的内容“你爱吃的水果都在这里了”。

现在我们清楚了，screen-reader-text样式，用以隐藏那些视觉不需要展现儿对读屏有价值的内容。

我们在来看一个实际可被应用的例子：

<div class="news-list"> <div class="news-list-area"> <h2><a href="javascript:void(0);">军事</a></h2> <ul> <a href="javascript:void(0);">新闻标题1</a> <a href="javascript:void(0);">新闻标题2</a> ... </ul> <a class="more" href="javascript:void(0);">更多</a> </div> <div class="news-list-area"> <h2><a href="javascript:void(0);">科技</a></h2> <ul> <a href="javascript:void(0);">新闻标题1</a> <a href="javascript:void(0);">新闻标题2</a> ... </ul> <a class="more" href="javascript:void(0);">更多</a> </div></div></div>

我们使用读屏Tab键，遍历上面的内容，可以发现，读屏是按照代码书写的元素的线性顺序进行导航的，也就是说，先读分类标题，在读新闻标题，最后是“更多”链接。这里存在一个问题，当我们按键盘Tab键导航到“更多”链接，读屏只会读出“更多 链接”，对于不熟悉这个页面布局的读屏用户，可能会难以判断这个“更多”是哪一个分类的“更多”。

让我们用screen-reader-text来解决这个问题。修改“更多”链接的代码为：

<a href="javascript:void(0);">更多<span class="screen-reader-text">军事新闻</span></a>...<a href="javascript:void(0);">更多<span class="screen-reader-text">科技新闻</span></a>

这样，当我们使用读屏，Tab键定位到“更多”链接的时候，就能读出“更多 军事新闻”、“更多 科技新闻”，可以清楚区分“更多”链接到底属于哪一个分类了。

到这里，已经很清楚了，screen-reader-text样式，可以使应用了此样式的内容视觉不可见，读屏却能朗读，是一种为一些元素添加补充内容信息的方法。

与此相同的，还可以使用WAI-ARIA中的aria-label等属性，但aria-label属性在不同读屏上表现略有差异，比如下面的代码，在NVDA和争渡读屏上就有不同：

<a aria-label="更多军事新闻" href="javascript:void(0);">更多</a>

NVDA朗读：链接 更多军事新闻

争渡工艺版朗读：更多 更多军事新闻

NVDA朗读采用aria-label值替代原有的链接文本，争渡工艺版则是链接文本+aria-label值。

这主要是不同读屏对于WAI-ARIA支持程度和处理策略的不同所导致的，使用screen-reader-text却能解决这种差异问题，使用此样式，读屏朗读基本上体验是一致的了。但需要注意，WAI-ARIA属于标准，具有更广泛的普适性，所以我们还是仍然推荐首先考虑使用WAI-ARIA标准，紧在使用WAI-ARIA无法满足需求的情况下，才使用screen-reader-text技巧来实现。

最后，我们再来谈谈使用screen-reader-text样式的注意事项。

这里，我总结了两点：

1. 补充信息明确、简洁

应用screen-reader-text的信息应该足够的明确、简洁，冗余的内容将会耗费读屏朗读的时间，影响操作效率。

1. 紧在需要的时候使用

合理使用screen-reader-text样式，因为应用它的元素是不可见的，这对使用读屏的用户和视觉浏览的用户在交流网页呈现内容的时候，可能存在一定的困扰，双方接收到的信息是不完全相同的。另一方面，增加朗读的内容，会使得读屏用户听渠道更多的内容，影响操作效率。我们可以仅在提供的内容信息无法满足读屏用户理解的情况下，提供应用了screen-reader-text的补充内容，用以清晰的传达预期传递的信息。

以上就是我们队screen-reader-text的介绍，希望可以对您有所启发。如果您有什么好的想法，也欢迎与我们交流！

刘彪

刘彪信息无障碍专家

信息无障碍研究会