前端无障碍设计

372 阅读3分钟

1、图片等功能性的非文本内容有文字说明。主要是:a 标签 title 和 img 标签 alt,但如果已经有说明了的就不需要重复提醒;
2、视频、语音等非文本标签有文字描述(直播类有文字直播),使得读屏软件、布莱叶盲文等工具进行处理;
3、产品和交互设计上,网页内的所有信息有严格的逻辑性和顺序性;
4、给需要用户填写的 form 表单加上 label 标签和 for 属性;
5、表格:用 th 标签定义 table 的头,用 caption 标签描述表格的总体情况;复杂的表格用 id 和 header 属性来说明归属关系;
6、对文本描述和分布使用语义化的标签,且页面无 CSS 亦可正常阅读;
7、不只用颜色传达信息,采用其他表示,提示或可辨别的元素来辅助对颜色不敏感的用户;
8、声音:如果页面自动播放超过 3s 的音频,需要提供暂停和关闭功能。背景音频对读屏软件会造成很大的干扰(eg:可以设置 esc 快捷键或在头部明显说明);
9、对比度:文字和背景色要有一定的区分度,使得弱视用户可以分辨;
10、所有的功能都可以通过键盘操作,使得无法依赖视觉的用户可以通过键盘或者键盘模拟器进行操作;
11、让脚本对键盘是可用的。不允许出现 onfocus=”this.blur ()”; 对事件的处理上同时支持鼠标和键盘(mousedown==keydown;mouseup==keyup;click==keypress;mouseover==focus;mouseout==blur;);
12、给特殊需要的用户足够的时间进行操作和阅读。对于要进行的倒计时开始前,用户可以取消、调整;
13、对闪动、滚动和自动更新的内容,允许用户暂停、停止或者隐藏;
14、在网页里不要出现一秒钟闪动 2 次以上的内容;
15、读屏工具可以通过标签属性进行导航或略过。比如:①可以通过 h2 等标签进行页面内容预览,②使用 ul 和 ol 或 map 处理链接;③对重要内容可以添加 WAI-ARIA 属性 role 说明;
16、主要内容提供略过导航、直接到达主要内容的方法(提高读屏效率);
17、为 iframe 设置 title 属性和说明文本,使得读屏用户可以轻松判断该文档是否需要进行阅读;
18、提供页面标题,描述页面的主题和目的,使得读屏用户可以判断自己所在的位置和页面内容对自己是否有价值;
19、网页里保持导航的有序性且符合逻辑。比如对表单、链接、重要说明设置合理的 tabindex;
20、超链接需要带有相应说明,使得读屏用户可以判断链接是跳转到哪里;
21、使用描述性标题和标签;
22、给 html 元素设置默认页面使用的语言 lang 属性,使得读屏软件可以正确阅读;
23、对标签使用 lang 对页面内特殊语言部分进行描述;
24、当焦点在任何元素上的时候,不应该改变该元素的内容。否则读屏用户就不知道该元素的作用;
25、当用户输入内容或选择选项的时候,不自动切换内容,除非已经给用户提示;
26、对输入错误有明确的提醒,同时为了读屏用户更便捷操作可以给 input 标签增加 aria-required 或 aria-invalid 属性;
27、对需要用户输入的地方,给出标签或说明;
28、尽可能的兼容各种浏览器,使用标准的标签;