Accessibility可访问性

109 阅读2分钟

将label与每个表单控件关联

在大多数情况下,使用label标签来帮助所有使用者理解需要的输入。在链接到表单元素id属性的label标签上使用for属性,表明所需的输入是什么内容。

给图片添加描述文字

对于装饰性的图像,最好添加alt='',或将其写在css里。其余图像最好使用alt写明图像内容。

使用语义化的标签

例如<nav><aside>。WAI-ARIA角色可以提供其他含义,例如,使用role="search"可以标识搜索功能。

<form action="#" method="post">
  <div role="search">
    <label for="search">Search for</label>
    <input type="search" id="search" aria-describedby="search-help">
    <div id="search-help">Search records by customer id or name</div>
    <button type="submit">Go</button>
  </div>
</form>

帮助用户避免和纠正错误

提供清晰的说明、错误消息和通知,帮助用户填写网站上的表单,发生错误时:

  • 帮助用户找到问题所在
  • 提供具体、易于理解的解释
  • 建议更正

在处理用户输入时,尽可能宽容格式。例如,接受包含空格的手机号,并根据需要删除空格。

在代码顺序中反应阅读顺序

确保代码中元素的顺序与所呈现信息的顺序一致

编写适应用户设备的代码

使用响应式设计,尽量避免水平滚动。使用渐进式增强来确保无论使用何种设备,核心功能和内容都可用。

为非标准交互元素提供含义

使用WAI-ARIA提供有关自定义小组件的功能和状态信息。

确保所有交互元素都能通过键盘访问

使用tabIndex="0"将通常不接收焦点的元素(divspan)添加到用于交互时的导航顺序中。需要使用JS捕获和响应键盘事件。

尽可能避免使用验证码

如果确实需要包含验证码,请确保它便于理解,并包含针对残障用户的替代方案,例如:

  • 提供两种以上的方法来解决验证码;
  • 提供对可以绕过验证码的人类代表的访问
  • 授权用户不需要验证码