辅助功能基础:你的页面在屏幕阅读器中是什么样子的?

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费额度!

优秀的网页设计师会花费大量时间使他们的页面易于访问。思考辅助功能的一种方法是考虑最极端的情况,即网站上除了纯 HTML 之外,所有其他内容都被禁用。我指的是没有图像、没有 CSS、没有 Flash、没有 Javascript。如果关闭所有这些内容,你的页面是否仍然有意义?当然,它不会很漂亮。但顶部是否仍然有标题?导航是否仍然存在?

这就是为什么在谈论辅助功能时你会听到“屏幕阅读器”这个词,因为这就是使用屏幕阅读器时得到的结果。没有花哨的东西,只有内容。来自 维基百科

屏幕阅读器是一种软件应用程序,旨在识别和解释屏幕上显示的内容。然后,这种解释以文本转语音、声音图标或盲文输出的形式呈现给用户。屏幕阅读器是一种辅助技术 (AT),可能对盲人、视力障碍者或学习障碍者有用,通常与其他 AT(如屏幕放大镜)结合使用。

尝试禁用你自己的网站上的所有内容,看看会发生什么。如果你使用 Firefox,则 网页开发者工具栏 可以帮助你做到这一点。你得到了什么?以下是 CSS-Tricks.com 的样子

cssandimagesoff.png

我认为还不错。页面有一个标题、简单的网站导航,然后直接进入内容。许多其他网站导航,例如“最近的帖子”,位于底部,对此我没有任何问题。我认为如果使用屏幕阅读器的用户访问此网站,他们应该尽快看到一些内容。

再次引用 维基百科,全球 2.6% 的人口视力受损。如果我们愿意做出改变并适应通过 IE 5.0 访问我们网站的 2% 的人,我们也应该愿意帮助通过屏幕阅读器访问网站的 2.6% 的人。

认为这些百分比太小,不值得关注?那么请记住:**良好的辅助功能等于良好的搜索引擎优化。** 将那些可爱的 Google 机器人想象成屏幕阅读器。它们无法查看你的图像,不关心你的花哨 CSS 技巧,当然也无法查看 Flash 内容内部。它们像屏幕阅读器一样读取你的 HTML。

当然,我并不是说我们应该放弃我们很棒的 CSS 设计,转而采用更简单的纯文本设计。实际上,恰恰相反。**CSS 帮助我们保持 HTML 代码的简洁性**,并最终使其对屏幕阅读器友好。

本周晚些时候:对于那些患有某种形式的色盲的 4-10% 的人口,我们该怎么办?