将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"将通常不接收焦点的元素(div和span)添加到用于交互时的导航顺序中。需要使用JS捕获和响应键盘事件。
尽可能避免使用验证码
如果确实需要包含验证码,请确保它便于理解,并包含针对残障用户的替代方案,例如:
- 提供两种以上的方法来解决验证码;
- 提供对可以绕过验证码的人类代表的访问
- 授权用户不需要验证码