检查列表

确定你的站点的可访问性

简介

这份检查清单使用 Web 内容可访问性指南（WCAG）作为参考点。WCAG 是一个面向个人、组织和政府的共享的 Web 内容可访问性标准。

在 WCAG 中，有三个等级来划分可访问性, 它们反映了支持的优先级。

1. A：必不可少。如果不满足此要求，辅助技术可能无法阅读、理解或完全操作页面或视图。
2. AA：理想支持。现在是欧盟政府和公共机构网站必须的。
3. AAA：高级支持。这个通常保留给服务于特定受众的网站。

这份清单针对的很多，但不是全部的 A 和 AA 级。注意，不同级别的 WCAG 支持并不一定表示实施的难度增加。

成功标准

这份清单上的每一项都有对应 WCAG 的「成功标准」。成功标准是支持 WCAG 的具体的、可测试的规则，由参考数字和简短标题描述。例如，文本调整的规则叫做 1.4.4 Resize text。

一些可访问性问题可能适用于多个成功标准。我们已经为每个清单项目确定了最相关的内容。

这份检查列表能保证我的网站是可访问的吗？

不会。但是，解决这个清单中的问题将有助于改善每个使用您的站点的人的体验。

这份检查清单提示你见的问题涵盖了广泛的残疾状况。没有所谓的「完美可访问性」或者一个站点「100% 可访问」。你应该警惕做出这种承诺的公司和服务。

内容

内容是网站最重要的部分。

• 使用简单易懂的语言，避免使用修辞、习语和复杂的隐喻。
• 确保你的 button、a 以及 label 元素内容唯一且可描述。
• 对于从左到右的语言使用左对齐的文本；对从右向左的语言使用右对齐的文本。

全局代码

全局代码是影响整个网站的代码。

• 验证你的 HTML。
• 在你的 html 元素内使用 lang 属性。
• 为每个页面或视图提供一个唯一的 title。
• 确保视窗缩放没有禁用。
• 使用地标元素来表示重要的内容区域。
• 确保是线性内容流。
• 避免使用 autofocus 属性。
• 移除会话超时。
• 移除 title 属性工具提示。

键盘

使用键盘来操作和浏览界面和内容非常重要。 有些人没法使用鼠标，或者 可能正在使用其他不允许“悬停”或精确单击的辅助技术。

• 确保交互式元素有可见的焦点样式，可以通过键盘输入导航到该样式。
• 检查键盘焦点的顺序是否与视觉布局相匹配。
• 删除不可见的可聚焦元素。

图像

图像是大部分网站中非常常见的一部分。你可以使用一些技巧来确保所有人都喜欢。

所有的图像

• 确保所有的 img 元素都有 alt 属性。
• 确保装饰图像的 alt 属性为空值。
• 为复杂的图像(如图表、图形和地图)提供文本替代。
• 对于包含文本的图像，确保 alt 描述中包含图像的文本。

SVG

SVG 是使用标记描述的图像。

• 确保 svg 元素在它们是可聚焦元素的子元素时，包含代码 focusable="false"。
• 添加 aria-hidden="true" 到装饰性的 svg。
• 确保 svg 利用 use 元素时 svg 和 use 元素间有空格。
• 确保具有 svg 源的 img 元素包含属性 role="img"。

标题

标题元素（h1，h2，h3等等）帮助将页面内容分成相关的信息块。

• 使用标题元素来介绍内容。
• 一个页面或视图仅使用一个 h1 元素。
• 标题元素应该按逻辑顺序写。
• 不要跳过标题级别。

列表

列表让人们知道内容是相关的，以及分组中包含多少项。

• 列表内容使用列表元素（ol，ul 和 dl）。

控制

控件是交互元素，如链接和按钮，让用户导航到目的地或执行操作。

• 链接使用 a 元素。
• 确保链接是可识别的。
• 确保控制有 :focus 状态。
• 按钮使用 button 元素。
• 提供一个跳过链接，并确保焦点对准时可见。
• 识别在新窗口中打开的链接。

表格

表格是一组结构化的数据，帮助人们理解不同类型信息之间的关系。

• 使用 table 元素来描述表格数据。
• 对表头使用 th（使用适当的范围属性）。
• 使用 caption 元素为表格提供标题。

表单

表单允许人们将信息输入到站点中进行处理和操作。这包括发送消息和下订单。

• 表单中的所有输入都与对应的 label 元素相关联。
• 在适当的地方使用 fieldset 和 legend 元素。
• 输入在适当的地方使用 autocomplete。
• 确保表单输入错误在提交后显示在 form 上方的列表中。
• 将输入错误消息与其对应的输入关联起来。
• 确保错误、警告和成功状态不是仅通过颜色进行视觉交流。

媒体

媒体包括预先录制的和现场的音频和视频等内容。

• 确保媒体不会自动播放。
• 确保媒体控件使用适当的标记。
• 检查所有媒体是否可以暂停。

视频

• 确认字幕的存在。
• 移除占用触发器。

音频

• 确保文本可用。

外观

在专门的浏览模式下检查您的内容。

• 检查您的内容在专门的浏览模式。
• 将文本大小增加到200%。
• 再次检查内容之间是否保持了良好的接近性。
• 确保颜色不是传达信息的唯一方式。
• 使用简单、直接、一致的布局。

动画

内容可以自己移动，也可以由激活控件的人触发。

• 确保动画精巧且不会有太多闪烁。
• 提供暂停背景视频的机制。
• 确保所欲动画均遵循 prefers-reduced-motion 媒体查询。

色彩的对比

色彩的对比 是当相邻并排放置时具有清晰的颜色。

• 检查所有普通尺寸文本的对比度。
• 检查所有大尺寸文本的对比度。
• 检查所有图标的对比度。
• 检查输入元素(文本输入，单选按钮，复选框等)的边框对比度。
• 检查与图像或视频重叠的文本
• 检查自定义 ::selection 颜色。

移动端触摸

要检查的东西最好支持不同的设备尺寸。

• 检查网站是否可以旋转到任何方向
• 删除水平滚动。
• 按钮和链接图标可以轻松激活。
• 确保可单击项之间有足够的空间，以便提供滚动区域。

本译文仅用于学习和交流目的，转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议，如果我们的工作有侵犯到您的权益，请及时联系我们。

原文地址：https://learnku.com/docs/front-end-devel...

译文地址：https://learnku.com/docs/front-end-devel...