无障碍阅读 · 建议阅读 7 分钟

无障碍阅读入门:标题、链接文字与图片说明怎么看?

海角网站介绍无障碍阅读中的标题层级、明确链接文字与图片替代说明,并通过结构图和阅读练习说明这些信息如何帮助不同读者理解页面。

先看简明回答

无障碍阅读让页面的信息关系不只依赖视觉效果:标题表达层级,链接文字说明目标,图片说明补充图像的意义或功能。清晰的文字结构也能帮助小屏阅读、快速浏览和反复查找。

标题层级、明确的链接文字、键盘焦点和图片说明的示意
标题层级、明确的链接文字、键盘焦点和图片说明的示意

标题层级表达关系,不只是字号大小

一个页面可以有文章主标题、主要小节和小节内的分项。W3C WAI 的标题教程说明,标题应按内容关系嵌套组织;辅助技术能够利用这些关系帮助用户导航。对普通读者来说,清楚的提纲也有助于快速找到所需信息。

例如一篇“认识网站”的文章,主要小节可以是“网站类型”和“页面层级”,而“首页”“栏目页”“详情页”属于后者下面的分项。不能因为某句话看起来字体大,就认定它在结构上是标题;视觉效果与页面中表达的语义需要相互配合。

链接文字应让人预期点击后的去向

“阅读页面结构课程”比单独的“点击这里”更能说明目标。W3C WAI 的写作建议强调有意义的链接文字,这对使用链接列表浏览的人尤其有帮助,也让扫读页面的访客少猜一步。

阅读时可先问自己:不看附近的大图,我能否理解这个入口?如果链接会打开文件、转向外部资料或执行有明显后果的动作,页面说明应提供相应上下文。纯图标入口也需要能被理解的名称,不能要求每位读者都熟悉同一个图形习惯。

图片说明要解释用途,不能只是重复“图片”

W3C WAI 的图片教程根据图像用途区分文字替代方式:传递信息的图片需要表达关键信息,功能图片需要说明动作或目标,纯装饰图片通常不应重复打断阅读。复杂图表还可能需要附近正文提供更完整的解释。

以本站的网站层级图为例,有价值的说明是“首页连接栏目,栏目连接详情,并可沿栏目返回”,而不是“蓝色图片”或文件名。文字说明不必逐个描述所有圆角与阴影,重点是让没有看到图片的人仍能理解这张图在此处传达的关系。

教学练习:把模糊表述改成可理解的信息

以下是自拟教学对照,不是对某个真实网站的评价。改写的目标是减少猜测,并保持文字与实际内容一致;增加很多字却没有说明对象,同样不能解决问题。

位置不清楚的表达更清楚的表达
文章小节更多怎样从栏目找到详情
阅读入口点击这里阅读链接与按钮的区别
信息图说明示意图片五步阅读路线:提问、找目录、读详情、补充、回顾
关闭图标只有一个叉号关闭菜单

读者可以怎样观察页面是否容易使用

先尝试只扫标题,看看能否复述文章提纲;再读几个链接名称,判断是否知道其目标;最后看图注和周边正文,确认核心结论是否只能从图片获得。也可以放大浏览器文字,观察正文是否仍易于连续阅读。

这些小练习只能揭示部分体验,不能替代完整的无障碍评估。不同辅助技术、设备和个人需求可能带来不同问题。作为读者,记录“哪里不清楚、影响了什么、期待什么说明”,往往比笼统地评价页面好不好更有帮助。

常见问题

每一张图片都需要很长的说明吗?

不需要。说明长度由图片用途决定:简单信息图可简短表达要点,复杂图表需要更充分解释,纯装饰图则通常应避免重复朗读。

无障碍阅读只与使用读屏软件的人有关吗?

不只如此。清晰标题、明确入口和文字说明也能帮助小屏阅读、快速定位或暂时无法看清图片的读者。不同人的具体需要仍可能不同。

延伸资料

以下原始资料帮助进一步理解相关概念;本文中的练习情境为教学示例。

继续学习

按你的问题选择下一篇,也可以回到课程目录重新安排顺序。

返回六篇课程目录
海角网站 六篇教程 · 从一个问题开始
课程目录