About this translation
该志愿翻译可能不能准确地反映出英文原版内容。
翻译者： heybran . 贡献者： 金凯 .
Web 无障碍倡议（WAI）感谢这些翻译者们，并欢迎其他的翻译。
为每个表单控件关联一个标签
将<label>元素的for属性关联到表单控件的id属性，或者使用WAI-ARIA属性。在特定情况下，视觉上隐藏<label>元素是允许的，但在大多数情况下，需要使用label元素来帮助所有用户理解所需的输入内容。
为图片添加替代文本
确保为所有信息性和功能性图片添加图像替代文本。对装饰性图片使用空的替代文本alt=“”，或将其包含在 CSS 中。图片替代文本通常由负责书面内容的人员提供。
确定页面语言和语言变化
在 html 元素中使用 lang 属性来指明每个页面的主要语言，例如 <html lang=“en”>。当特定元素的语言与页面其他部分不同时，可在该元素上使用 lang 属性。
使用正确的HTML元素来传达语义和结构
为标题、列表、表格等使用语义化的标记。HTML5 提供了许多元素，如 <nav> 和 <aside>，以便更好地组织内容。
WAI-ARIA 角色可以提供额外的含义，例如，使用 role=“search” 来标识搜索功能。
与设计人员和内容撰写人员合作，就含义达成一致，然后统一使用。
帮助用户避免和纠正错误
提供清晰的说明、错误信息和通知，来帮助用户填写网站上的表单。当出现错误时：
- 帮助用户找到问题所在
- 提供具体、易懂的解释
- 建议更正方法
在处理用户输入时，对格式尽可能宽容。例如，接受包含空格的电话号码，并根据需要删除空格。
在代码顺序中反映阅读顺序
确保代码中元素的顺序与所展示信息的逻辑顺序一致。检查的方法之一是移除 CSS 样式并检查内容的顺序是否合理。
编写能适应用户技术的代码
使用响应式设计，使显示内容适应不同的缩放状态和视窗尺寸，如移动设备和平板电脑。
当字体大小增加至少200%时，应避免水平滚动并防止内容被剪切。
使用渐进增强技术，确保无论使用何种技术，都能使用核心功能和内容。
为非标准互动元素提供意义
使用 WAI-ARIA，为自定义组件（如手风琴组件accordions和自定义按钮）提供功能和状态信息。
例如，role=“navigation” 和 aria-expanded=“true”。
要实现此类组件的行为，如展开和折叠内容或组件如何响应键盘事件，还需要额外的代码。
确保所有可交互元素可以通过键盘操作
考虑键盘操作，尤其是在开发像菜单，鼠标悬浮信息，收缩件或者媒体播放器等交互元素。
对于默认不支持Tab键的 <div>，<span> 等元素，当它们被用来当作交互元素时，则可以添加 tabindex="0" 属性使键盘可以焦距到它们上面，同时使用脚本捕捉和反应键盘事件。
尽可能避免使用验证码（CAPTCHA）
验证码会给用户造成很多阻碍。除了验证码，还有其他更易使用的用户输入验证方式，比如自动检测或者界面交互验证。
如果一定需要用到验证码，确保它是容易理解的，另外提供其他可选方案，比如：
- 提供多于两种解决验证码的方法
- 让用户有机会请求可绕过验证码的人工代表的帮助
- 授权用户无需验证码
回到顶部