无障碍原则
About this translation
该志愿翻译可能不能准确地反映出英文原版内容。
翻译者: 李松峰 , 冉若曦 .
WAI感谢这些翻译者们,并欢迎其他的翻译。
Notice: The English original has been substantially updated since this translation. — 修改日志
英文版本更新: 2024-07-15 — 翻译更新 2023-12-06.
We welcome a translation update.
Web无障碍标准
Web无障碍依赖几个相互联系的部分,包括:
- Web内容: - 指网站中的任意部分,如文本、图片、表单和多媒体,以及所有标记代码、脚本、应用,等等。
- 用户代理 - 软件,用户通过它来访问Web内容,包括桌面图形界面浏览器、语音浏览器、手机浏览器、多媒体播放器、插件及一些辅助浏览技术。辅助技术 (英文).
- 创作工具: - 软件或服务,用户使用它产生Web内容,包括代码编辑器、文档转换工具、内容管理系统、博客、数据库脚本,以及其他工具。
更多关于web无障碍的标准
这些部分相互关联并相互支持。例如, Web内容 需要包含图像的文本替代。 这些信息需要 web浏览器 处理同时被 辅助技术转换, 例如读屏软件. 为了创建文本替代,作者需要创作工具 来做这些工作. 更多的信息可在 web无障碍的重要组成 (英文)中找到.
标准在为每个组件定义无障碍需求方面扮演着重要的角色。一些无障碍需求很容易满足,但是了解残疾人如何使用Web的基本知识有助于更有效地实现这些需求。无障碍的某些方面需要更多的技术技能,也需要关于人们如何使用Web的高级知识。在所有情况下,在整个web项目中早期让用户参与 (英文)将使您的工作更好、更容易。
W3C的Web无障碍推进(WAI)提供了一组被国际公认为Web无障碍标准指南。这些包括:
还有一个用于无障碍富网络应用(WAI-ARIA) (英文)的WAI规范,其中包括使用Ajax、JavaScript和相关web技术开发的动态内容和高级用户界面控件。
可感知信息和用户界面
用文本替代非文本内容
替代文本与非文内容是等价的。比如:
- 对图片(图标、按钮和图形)的简短描述;
- 图表、示意图和插图上数据的说明;
- 对音频和视频文件等非文本内容的简短说明;
- 表单控件、输入框等用户交互组件的标注。
替代文本传达图片或功能的意图,提供等价的用户体验。比如,对搜索按钮的替代文本应该是“搜索”,而不是“放大镜”。
替代文本的展示方式有很多种。比如,对看不见屏幕或视力不好的读者可以大声朗读出来,可以增大文本字号,也可以在盲文设备上显示。替代文本是控件和功能的标注,可以辅助键盘导航和语音识别导航(语音输入),也是识别音频、视频及其他格式文件乃至嵌入在网页中其他应用的标注。
与替代文件相关的无障碍要求(相关技术规范的链接)
替代文本相关的案例
多媒体的字幕及其他替代物
听不见声音或看不见视频的人需要替代物。比如:
- 音频内容(如广播采访的录音)的文字版或字幕;
- 描述视频中重要影像细节的口述影像;
- 音频内容的手语表达,包括相应的受众体验。
整理规范的文字稿应该提供场所或视觉信息,为读者提供基本的无障碍阅读体验,并作为字幕或口述影像的提炼基础。
与多媒体相关的无障碍要求(相关技术规范的链接)
内容有多种呈现方式
为针对不同用户以不同的方式呈现,内容必须:
- 正确地标记内容的结构,标题、列表、表格、输入字段,等等;
- 信息或指令的顺序适应任何呈现方式;
- 浏览器及辅助技术为定制不同的呈现方式提供便利。
满足这个要求的内容可以被正确的读出、放大,或者改编以适应不同人群的需求及偏好。比如,可以自定义使用不同颜色、字号或其他样式来呈现,以方便阅读。这个要求也有助于其他形式的适配,包括自动生成内容大纲和摘要,从而让用户了解梗概并聚焦到特定部分。
与适应性相关的无障碍要求(相关技术规范的链接)
适应性相关的案例
内容的看和听更容易
便于区分的内容更容易看和听,比如:
- 不只使用颜色传达信息或标识内容;
- 默认的前景和背景色有足够高的对比度;
- 用户将文本放大到400%或增大文本间距时,内容不会丢失;
- 用户放大文本或使用小屏幕时,文本可以重排;
- 文本图片可以缩放或以实际文本替代,或尽可能避免使用;
- 用户可以暂停、停止或调整音频的音量;
- 背景音乐音量小且可以关闭,避免干扰和分神。
满足这个要求有助于将前景和背景分离,让重要的信息更突出。这一条也涉及不使用辅助技术的人群,而对使用辅助技术的用户,音量过大或对比度过高也会导致注意力分散。比如,很多色盲用户不会使用特殊工具,直接依赖网页提供足够的色彩对比度。而对其他人来说,自动播放的音频可能干扰语音合成或 助听设备 (ALDs) (英文).
与可分辨性相关的无障碍要求(相关技术规范的链接)
可分辨性的案例
可操作的用户界面和导航
可以通过键盘使用功能
很多人不使用鼠标而依赖键盘来操作网页。这就要求使用键盘完全可以控制网页,包括表单控件、输入框及其他用户界面组件。
键盘的无障碍性包括:
- 通过鼠标可以操控的功能,同样可以通过键盘实现;
- 键盘焦点不会被内容的任意部分卡住;
- 浏览器、创作工具及其他工具支持键盘操作。
满足这个要求能帮助键盘用户,包括使用人体工程学键盘、屏幕软键盘或开关装置的人方便上网。同样,对于使用语音识别(语音输入)来操作网页和通过键盘输入的人同样有帮助。
与键盘无障碍相关的要求(相关技术规范的链接)
用户有充足的时间阅读和使用内容
阅读理解同样的内容,有人用的时间少,有人用的时间多。比如,有些人打字慢,理解慢,操作控件不熟练,最终导致使用网站的速度慢。
所谓提供充足的时间,包括:
- 必要时提供解除、扩展和调整时间限制的机制;
- 提供暂停、停止或隐藏移动、闪烁或滚动内容的机制;
- 必要时延迟或避免打断用户;
- 会话超时后重新认证确保不丢失数据。
与充足时间相关的无障碍要求(相关技术规范的链接)
充足时间的案例
内容不要诱发癫痫和物理反应
某种频率或图案的闪烁可能诱发光敏反应,包括癫痫。理想情况下,应该完全避免内容闪烁,或者如果无法避免也要确保不会导致已知风险。同样,动画及移动的内容也可能导致不适或物理反应。
避免导致癫痫及物理反应的例子有:
- 不使用某种频率或图案的闪烁;
- 内容闪烁前对用户给出提示,同时提供替代方案;
- 除非必要,要让用户可以关掉动画。
与癫痫相关的无障碍要求(相关技术规范的链接)
用户可以方便地导航、找到内容并确认自己在哪里
组织得当的内容可以让用户随时定位自己并有效导航,比如:
- 页面标题表述适当,各部分标题也具有描述性;
- 在一组网页中有多种方式可以找到相关页面;
- 随时提醒用户在一组网页中的当前位置;
- 让用户可以跳过多个网页中都有的内容块;
- 键盘焦点可以看到,且焦点顺序有意义;
- 链接的意图明确,理想情况下即使链接本身也能让人一目了然。
满足这个要求可以让用户根据自己的需求和偏好在多个页面间导航。比如,有人依赖层级导航结构如菜单来查找特定网页,也有人依赖网站的搜索功能。有人可能用眼睛看,有人可能用耳朵听,而有人会同时看和听。有人可能只使用鼠标,有人可能只使用键盘,而有人则会同时都用。
与导航相关的无障碍要求(相关技术规范的链接)
导航的案例
用户可以使用除键盘外的不同输入方式
除键盘之外的输入方式还有触摸激活、语音识别(语音输入)及手势,这些方式可以为很多人提供便利。但并非所有人都可以同样程度地使用所有方式。特别的设计考量可以最大化这些方式的优势,包括:
- 要求敏捷及精确移动的手势有对应不需要高敏捷性的替代方式;
- 经特别设计避免组件被意外激活,比如提供撤销功能;
- 展示给用户的标注与代码中对象的名字对应,以支持通过语音激活;
- 通过运动激活的功能也可以通过用户界面上的组件激活;
- 按钮、链接和其他活动组件足够大,以便通过触摸来激活它们。
满足这个要求可以让更多有能力使用更多设备的人更方便地使用内容。这里的内容包括手机、笔记本电脑和售票机上的内容。
与输入方式相关的无障碍要求(相关技术规范的链接)
WCAG
可理解的信息和用户界面
文本容易阅读和理解
内容作者要确保文字具有可读性且大多数读者都比较容易理解,包括文字转语音读出来也一样。其中包括:
- 标识网页使用的主要语言,如阿拉伯语、德语或韩语;
- 标识文本、短语或网页中其他部分的语言;
- 对不常见的词汇、短语、 习语和缩略语给出解释;
- 尽可能用最简单明了的表达,或提供简化版本。
满足这个要求有助于软件包括辅助技术正确地处理文本内容。比如,软件因此可以正确地读出内容、生成页面摘要,并对不常用的技术词汇提供解释。同样,这也有助于人们理解复杂的句子、短语和词汇。特别是对具有不同认知背景的用户会有帮助。
与可读性相关的无障碍要求(相关技术规范的链接)
可读性的案例
内容以可预测的方式出现和操作
很多人依赖可预测的用户界面,而不一致的外观和行为则会导致迷惑,转移用户注意力。要让内容可预测,可以:
- 在多个页面相同位置重复出现导航条;
- 给多个页面上重复出现的用户界面组件添加相同的标注信息;
- 给没有用户同意不会发生的变化应用明显的区别。
满足这个要求可以让人们更快熟悉网站提供的功能和导航机制,并根据自己的特殊需求及偏好来使用网站。比如,有些人会给自己频繁使用的键盘导航功能定义快捷键。而也有人会记住在网站上到达某个特定页面或完成特定流程的步骤。这些都有赖于可预测及一致的功能。
与可预测相关的无障碍要求(相关技术规范的链接)
可预测的案例
用户可以得到帮忙以避免和纠正错误
表单及其他交互可能导致用户迷惑或难于使用,最终让用户犯错。帮助用户避免和纠正错误的做法包括:
- 为用户提供说明、错误消息及建议,帮用户提供正确的信息;
- 为复杂功能及交互提供上下文相关的帮助;
- 必要时提供结果预览,以及纠正或重置表单的功能。
满足这个要求可以帮助因为看不到或听不到而难以理解潜在关联、顺序和其他提示的人。对于不理解功能,因此产生困惑或迷茫、记不住,或者因种种原因在使用表单和交互时出错的人同样也有帮助。
与输入辅助相关的无障碍要求(相关技术规范的链接)
输入辅助的案例
健壮的内容和可靠的解释
内容与现在和未来的用户工具兼容
健壮的内容兼容不同浏览器、辅助技术及其他用户代理。比如:
- 确保标记是可以被可靠解释的,比如确保使用有效的标记;
- 对非标准用户界面组件提供名称、角色和值。
满足这个要求可以最大化地兼容当前及未来的用户代理,包括辅助技术。特别地,这可以让辅助技术正确处理内容,以及通过不同方式呈现或操作内容。非标准(脚本化)按钮、输入字段及其他控件也包含在内。