专栏名称: 前端之巅
InfoQ前端垂直社群:紧跟前端发展,共享一线技术,万名淀粉互助,共登前端之巅!
目录
相关文章推荐
奇舞精选  ·  从 DeepSeek 看25年前端的一个小趋势 ·  12 小时前  
奇舞精选  ·  从 DeepSeek 看25年前端的一个小趋势 ·  12 小时前  
新疆教育厅  ·  全区中小学生家长心理健康教育科普讲座——第十讲 ·  15 小时前  
新疆教育厅  ·  全区中小学生家长心理健康教育科普讲座——第十讲 ·  15 小时前  
前端早读课  ·  【第3451期】前端 TypeError ... ·  昨天  
江苏司法行政在线  ·  宿迁司法行政人、江苏监狱戒毒民警,给您拜年啦! ·  3 天前  
江苏司法行政在线  ·  宿迁司法行政人、江苏监狱戒毒民警,给您拜年啦! ·  3 天前  
51好读  ›  专栏  ›  前端之巅

开箱即用的网站可访问性提升指南

前端之巅  · 公众号  · 前端  · 2017-07-04 22:35

正文

作者 | 小冉 (饿了么大前端)
本文首先介绍什么是网站可访问性、残障人士如何访问网站;然后提供一些开箱即用的建设无障碍网站的操作指南,让你能够立即在项目中使用;最后介绍了如何检测网站的可访问性。
什么是网站可访问性

网站可访问性指的是残障人士 (包括全盲和低视力、失聪和听力衰退、学习障碍、精神局限、行动受限、语言障碍、光敏性以及多重残障) 在使用网站时不会遇到障碍,也就是说他们可以认知、理解网站、在网站上导航以及与网站组件进行交互。

残障人士如何访问网站

残障人士大概可以分为视觉障碍、听觉障碍、肢体障碍和认知障碍四大类。每类群体都有特定的访问网站的方式和页面要求。

视觉障碍

主要包括色盲、色弱和全盲和视力衰退等。全盲用户主要靠读屏软件来接收页面信息;色盲和色弱的用户对页面色彩要求比较高,包括颜色的选择和对比度的使用;视力衰退的用户有时需要放大页面上的文字和图片来阅读。

听觉障碍

主要包括耳聋或者听力衰退等。这类用户对页面上的一些音频信息有一定的要求,包括音频内容的可暂停、音量的调节、音频字幕等。

肢体障碍

主要是肢体残缺。这类用户主要借助一些软件或者硬件来访问网站,比如手臂残疾者借助一些物体敲击键盘来访问我们的网站。这就对我们网站的键盘可访问性有很高的要求,其中包括能通过键盘聚焦页面的交互组件、触发相应的键盘事件来进行交互、快速导航到主要内容区域等。

认知障碍

主要包括学习障碍和聚焦障碍、语言障碍、精神局限等。这类用户需要页面内容清晰易懂、能够重复多次阅读、内容可以灵活调节,这就要求我们页面上一些滚动区域的内容可以随时停止和重启、一些复杂的内容的能够配以简单易懂的说明文字、相同的链接使用相同的文字、页面上动画的设计不会引起用户不适等。

让你的网站无障碍
清晰的网站结构

1、通过 ARIA 中的 role 或者 HTML5 中语义化的标签

等来为页面提供 Landmark,常见的有 Landmark 有 navigation、search、banner、contentinfo、complementary;

2、使用 H1 ~ H6 表示标题文字,用 H 元素组织页面区块;

网站样式和内容

1、确保你的设计有足够的颜色对比(字体颜色和背景色),这对低视力和色盲用户有益。WCAG 2.0 AAA 级要求正常文本最小对比度为 7:1,大号文本为 4.5:1,AA 级的建议是正常文本最小对比度为 4.5:1,大号字体为 3:1;

2、颜色不作为传递信息的唯一渠道,比如必填项、错误提示等信息的传递;

3、为  标签提供 lang 属性;

4、当页面内容的语言与  标签语言不同时,使用 lang 属性为内容标明语言;

5、尽量保证 DOM 顺序和视觉顺序一致;

6、页面缩放时能保证内容排版的正常阅读;

7、页面中必须包含一个 </code> 元素,并且不能为空;</p><p style="font-weight: 400; font-family: Avenir,-apple-system-font,微软雅黑,sans-serif; box-sizing: border-box; font-size: 16px; text-align: justify; white-space: pre-line; padding: 23px 8px 0px; margin: 0px; color: rgb(74, 74, 74); line-height: 1.75em;">8、移除页面上的 i 和 b 标签,用 css 实现加粗等样式。要强调的词、短语和句子,请用 em,strong 实现;</p><p style="font-weight: 400; font-family: Avenir,-apple-system-font,微软雅黑,sans-serif; box-sizing: border-box; font-size: 16px; text-align: justify; white-space: pre-line; padding: 23px 8px 0px; margin: 0px; color: rgb(74, 74, 74); line-height: 1.75em;">9、最大化兼容当前和未来的用户代理 (包括辅助技术);</p><p style="font-weight: 400; font-family: Avenir,-apple-system-font,微软雅黑,sans-serif; box-sizing: border-box; font-size: 16px; text-align: justify; white-space: pre-line; padding: 23px 8px 0px; margin: 0px; color: rgb(74, 74, 74); line-height: 1.75em;">10、为页面提供一个无障碍帮助文档的链接,用于说明页面无障碍使用方法;</p><p style="font-weight: 400; font-family: Avenir,-apple-system-font,微软雅黑,sans-serif; box-sizing: border-box; font-size: 16px; text-align: justify; white-space: pre-line; padding: 23px 8px 0px; margin: 0px; color: rgb(74, 74, 74); line-height: 1.75em;">11、为页面上的非文字内容提供替换文本,如图片,ASCII,SVG, Charts,Graphs  等;</p><section class="h4" style="font-family: Avenir,-apple-system-font,微软雅黑,sans-serif; box-sizing: border-box; font-size: 16px; text-align: left; margin: 30px 0px 0px 8px; font-weight: 500; color: rgb(60, 112, 198);"><span style="display: inline-block; width: 15px; height: 15px; margin-right: 10px; background: transparent url(" http:="" no-repeat="" scroll="" center=""/> <strong style="font-size: 16px; font-weight: bold; text-align: left;">Form</strong> </section><p style="font-weight: 400; font-family: Avenir,-apple-system-font,微软雅黑,sans-serif; box-sizing: border-box; font-size: 16px; text-align: justify; white-space: pre-line; padding: 23px 8px 0px; margin: 0px; color: rgb(74, 74, 74); line-height: 1.75em;">1、form 表单里面的表单元素必须有一个独一无二的 label。一般通过 label 配合 for,id 使用或者 aria-label,aria-labelledby 实现;</p><p style="font-weight: 400; font-family: Avenir,-apple-system-font,微软雅黑,sans-serif; box-sizing: border-box; font-size: 16px; text-align: justify; white-space: pre-line; padding: 23px 8px 0px; margin: 0px; color: rgb(74, 74, 74); line-height: 1.75em;">2、如果页面上有多个表单,submit 和 reset button 必须是独一无二的;</p><p style="font-weight: 400; font-family: Avenir,-apple-system-font,微软雅黑,sans-serif; box-sizing: border-box; font-size: 16px; text-align: justify; white-space: pre-line; padding: 23px 8px 0px; margin: 0px; color: rgb(74, 74, 74); line-height: 1.75em;">3、Invalid 的表单输入值使用 aira-invalid 属性标识非法性;</p><p style="font-weight: 400; font-family: Avenir,-apple-system-font,微软雅黑,sans-serif; box-sizing: border-box; font-size: 16px; text-align: justify; white-space: pre-line; padding: 23px 8px 0px; margin: 0px; color: rgb(74, 74, 74); line-height: 1.75em;">4、必填元素使用 required 或 aria-required 来标识;</p><p style="font-weight: 400; font-family: Avenir,-apple-system-font,微软雅黑,sans-serif; box-sizing: border-box; font-size: 16px; text-align: justify; white-space: pre-line; padding: 23px 8px 0px; margin: 0px; color: rgb(74, 74, 74); line-height: 1.75em;">5、错误信息提示:为关联的表单输入项添加 aria-describedby 链接到错误提示 或者 使用 ARIA 中的 role = alert 或 Live Region;</p><p style="font-weight: 400; font-family: Avenir,-apple-system-font,微软雅黑,sans-serif; box-sizing: border-box; font-size: 16px; text-align: justify; white-space: pre-line; padding: 23px 8px 0px; margin: 0px; color: rgb(74, 74, 74); line-height: 1.75em;">6、input = images 必须有 alt 或者 titile 属性,且不为空;</p><p style="font-weight: 400; font-family: Avenir,-apple-system-font,微软雅黑,sans-serif; box-sizing: border-box; font-size: 16px; text-align: justify; white-space: pre-line; padding: 23px 8px 0px; margin: 0px; color: rgb(74, 74, 74); line-height: 1.75em;">7、输入框的描述文字或者错误提醒里面应提供正确例子和格式说明;</p><p style="font-weight: 400; font-family: Avenir,-apple-system-font,微软雅黑,sans-serif; box-sizing: border-box; font-size: 16px; text-align: justify; white-space: pre-line; padding: 23px 8px 0px; margin: 0px; color: rgb(74, 74, 74); line-height: 1.75em;">8、使用 fieldset 和 legend 为表单内容提供说明文字;</p><section class="h4" style="font-family: Avenir,-apple-system-font,微软雅黑,sans-serif; box-sizing: border-box; font-size: 16px; text-align: left; margin: 30px 0px 0px 8px; font-weight: 500; color: rgb(60, 112, 198);"><span style="display: inline-block; width: 15px; height: 15px; margin-right: 10px; background: transparent url(" http:="" no-repeat="" scroll="" center=""/> <strong style="font-size: 16px; font-weight: bold; text-align: left;">Table</strong> </section><p style="font-weight: 400; font-family: Avenir,-apple-system-font,微软雅黑,sans-serif; box-sizing: border-box; font-size: 16px; text-align: justify; white-space: pre-line; padding: 23px 8px 0px; margin: 0px; color: rgb(74, 74, 74); line-height: 1.75em;">1、使用 th 来定义 row 或者 column 中数据的标题;</p><p style="font-weight: 400; font-family: Avenir,-apple-system-font,微软雅黑,sans-serif; box-sizing: border-box; font-size: 16px; text-align: justify; white-space: pre-line; padding: 23px 8px 0px; margin: 0px; color: rgb(74, 74, 74); line-height: 1.75em;">2、数据表格必须有 name 和 descption 且不能相同。使用 caption、summary、title、aria-label、aria-labelledby 等属性实现;</p><p style="font-weight: 400; font-family: Avenir,-apple-system-font,微软雅黑,sans-serif; box-sizing: border-box; font-size: 16px; text-align: justify; white-space: pre-line; padding: 23px 8px 0px; margin: 0px; color: rgb(74, 74, 74); line-height: 1.75em;">3、尽量不要使用 table 布局,仅用于数据展示;</p><section class="h4" style="font-family: Avenir,-apple-system-font,微软雅黑,sans-serif; box-sizing: border-box; font-size: 16px; text-align: left; margin: 30px 0px 0px 8px; font-weight: 500; color: rgb(60, 112, 198);"><span style="display: inline-block; width: 15px; height: 15px; margin-right: 10px; background: transparent url(" http:="" no-repeat="" scroll="" center=""/> <strong style="font-size: 16px; font-weight: bold; text-align: left;">Link 和 导航</strong> </section><p style="font-weight: 400; font-family: Avenir,-apple-system-font,微软雅黑,sans-serif; box-sizing: border-box; font-size: 16px; text-align: justify; white-space: pre-line; padding: 23px 8px 0px; margin: 0px; color: rgb(74, 74, 74); line-height: 1.75em;">1、链接应该聚焦在本页面,如果需要在新窗口打开页面需要提前告知用户该行为;</p><p style="font-weight: 400; font-family: Avenir,-apple-system-font,微软雅黑,sans-serif; box-sizing: border-box; font-size: 16px; text-align: justify; white-space: pre-line; padding: 23px 8px 0px; margin: 0px; color: rgb(74, 74, 74); line-height: 1.75em;">2、使用 aria-label,aria-labelledby 或 title 为链接提供说明文本,描述去向;</p><p style="font-weight: 400; font-family: Avenir,-apple-system-font,微软雅黑,sans-serif; box-sizing: border-box; font-size: 16px; text-align: justify; white-space: pre-line; padding: 23px 8px 0px; margin: 0px; color: rgb(74, 74, 74); line-height: 1.75em;">3、链接的描述文字必须是独一无二的,相同的链接描述文字应该一致;</p><p style="font-weight: 400; font-family: Avenir,-apple-system-font,微软雅黑,sans-serif; box-sizing: border-box; font-size: 16px; text-align: justify; white-space: pre-line; padding: 23px 8px 0px; margin: 0px; color: rgb(74, 74, 74); line-height: 1.75em;">4、如果一个链接包含一个图片和文字,并且 alt 中的内容和文字类似 / 相同,那么 alt 的属性应该为空;</p><p style="font-weight: 400; font-family: Avenir,-apple-system-font,微软雅黑,sans-serif; box-sizing: border-box; font-size: 16px; text-align: justify; white-space: pre-line; padding: 23px 8px 0px; margin: 0px; color: rgb(74, 74, 74); line-height: 1.75em;">5、保证不会的用户不知情的情况下刷新和跳转页面;</p><section class="h4" style="font-family: Avenir,-apple-system-font,微软雅黑,sans-serif; box-sizing: border-box; font-size: 16px; text-align: left; margin: 30px 0px 0px 8px; font-weight: 500; color: rgb(60, 112, 198);"><span style="display: inline-block; width: 15px; height: 15px; margin-right: 10px; background: transparent url(" http:="" no-repeat="" scroll="" center=""/> <strong style="font-size: 16px; font-weight: bold; text-align: left;">Image</strong> </section><p style="font-weight: 400; font-family: Avenir,-apple-system-font,微软雅黑,sans-serif; box-sizing: border-box; font-size: 16px; text-align: justify; white-space: pre-line; padding: 23px 8px 0px; margin: 0px; color: rgb(74, 74, 74); line-height: 1.75em;">1、为 img 标签提供替换文本,使用 alt 或者 aria-labelledby 等属性;</p><p style="font-weight: 400; font-family: Avenir,-apple-system-font,微软雅黑,sans-serif; box-sizing: border-box; font-size: 16px; text-align: justify; white-space: pre-line; padding: 23px 8px 0px; margin: 0px; color: rgb(74, 74, 74); line-height: 1.75em;">2、纯装饰性图片提供 alt = "",role = "presentation" 或者用 background-image 实现;</p><p style="font-weight: 400; font-family: Avenir,-apple-system-font,微软雅黑,sans-serif; box-sizing: border-box; font-size: 16px; text-align: justify; white-space: pre-line; padding: 23px 8px 0px; margin: 0px; color: rgb(74, 74, 74); line-height: 1.75em;">3、避免提供与相邻链接或文字类似 / 相同 的 alt 文字,造成冗余;</p><p style="font-weight: 400; font-family: Avenir,-apple-system-font,微软雅黑,sans-serif; box-sizing: border-box; font-size: 16px; text-align: justify; white-space: pre-line; padding: 23px 8px 0px; margin: 0px; color: rgb(74, 74, 74); line-height: 1.75em;">4、为一组图片的第一个 item 提供替代文本,比如商品评分 star 图片组</p><p style="font-weight: 400; font-family: Avenir,-apple-system-font,微软雅黑,sans-serif; box-sizing: border-box; font-size: 16px; text-align: justify; white-space: pre-line; padding: 23px 8px 0px; margin: 0px; color: rgb(74, 74, 74); line-height: 1.75em;">5、提供图片验证码的替代文本,并提供针对不同类型感官直觉的输出方式,如语音验证码</p><p style="font-weight: 400; font-family: Avenir,-apple-system-font,微软雅黑,sans-serif; box-sizing: border-box; font-size: 16px; text-align: justify; white-space: pre-line; padding: 23px 8px 0px; margin: 0px; color: rgb(74, 74, 74); line-height: 1.75em;">6、有背景图片的应该提供图片缺失或者不可用时的背景色</p><section class="h4" style="font-family: Avenir,-apple-system-font,微软雅黑,sans-serif; box-sizing: border-box; font-size: 16px; text-align: left; margin: 30px 0px 0px 8px; font-weight: 500; color: rgb(60, 112, 198);"><span style="display: inline-block; width: 15px; height: 15px; margin-right: 10px; background: transparent url(" http:="" no-repeat="" scroll="" center=""/> <strong style="font-size: 16px; font-weight: bold; text-align: left;">Hn</strong> </section><p style="font-weight: 400; font-family: Avenir,-apple-system-font,微软雅黑,sans-serif; box-sizing: border-box; font-size: 16px; text-align: justify; white-space: pre-line; padding: 23px 8px 0px; margin: 0px; color: rgb(74, 74, 74); line-height: 1.75em;">1、每个页面应该有且仅有一个 H1 标题且包含在 main 区块或者 banner 区块;</p><p style="font-weight: 400; font-family: Avenir,-apple-system-font,微软雅黑,sans-serif; box-sizing: border-box; font-size: 16px; text-align: justify; white-space: pre-line; padding: 23px 8px 0px; margin: 0px; color: rgb(74, 74, 74); line-height: 1.75em;">2、同级标题的内容必须是独一无二的,不能相同;</p><p style="font-weight: 400; font-family: Avenir,-apple-system-font,微软雅黑,sans-serif; box-sizing: border-box; font-size: 16px; text-align: justify; white-space: pre-line; padding: 23px 8px 0px; margin: 0px; color: rgb(74, 74, 74); line-height: 1.75em;">3、H 标签里面必须包含可视性文本,H2 ~ H6 中除了 img 的 alt 属性外,还应该包含文字内容;</p><p style="font-weight: 400; font-family: Avenir,-apple-system-font,微软雅黑,sans-serif; box-sizing: border-box; font-size: 16px; text-align: justify; white-space: pre-line; padding: 23px 8px 0px; margin: 0px; color: rgb(74, 74, 74); line-height: 1.75em;">4、标题合理嵌套,方便屏幕阅读器理解文档结构, 如 H2 嵌套 H3,不要跳级嵌套;</p><section class="h4" style="font-family: Avenir,-apple-system-font,微软雅黑,sans-serif; box-sizing: border-box; font-size: 16px; text-align: left; margin: 30px 0px 0px 8px; font-weight: 500; color: rgb(60, 112, 198);"><span style="display: inline-block; width: 15px; height: 15px; margin-right: 10px; background: transparent url(" http:="" no-repeat="" scroll="" center=""/> <strong style="font-size: 16px; font-weight: bold; text-align: left;">键盘可访问性</strong> </section><p style="font-weight: 400; font-family: Avenir,-apple-system-font,微软雅黑,sans-serif; box-sizing: border-box; font-size: 16px; text-align: justify; white-space: pre-line; padding: 23px 8px 0px; margin: 0px; color: rgb(74, 74, 74); line-height: 1.75em;">1、提供可以直接导航到主内容区域的链接和快捷键;</p><p style="font-weight: 400; font-family: Avenir,-apple-system-font,微软雅黑,sans-serif; box-sizing: border-box; font-size: 16px; text-align: justify; white-space: pre-line; padding: 23px 8px 0px; margin: 0px; color: rgb(74, 74, 74); line-height: 1.75em;">2、用 Tab 导航时,获取 focus 的顺序必须有意义,尽量和视觉效果保持一致,且在获取焦点时样式上要和未获得焦点的元素不同;</p><p style="font-weight: 400; font-family: Avenir,-apple-system-font,微软雅黑,sans-serif; box-sizing: border-box; font-size: 16px; text-align: justify; white-space: pre-line; padding: 23px 8px 0px; margin: 0px; color: rgb(74, 74, 74); line-height: 1.75em;">3、页面上所有的交互功能必须可以通过键盘来完成。不要使用双击处理程(onDblClick),因为键盘不能执行这个行为。鼠标事件要提供对应的 keydown、keypress、keyup、onfocus 等事件;</p><p style="font-weight: 400; font-family: Avenir,-apple-system-font,微软雅黑,sans-serif; box-sizing: border-box; font-size: 16px; text-align: justify; white-space: pre-line; padding: 23px 8px 0px; margin: 0px; color: rgb(74, 74, 74); line-height: 1.75em;">4、不要有键盘陷阱,保证用户不会被困在某个弹窗里(不能退出)或者迷失焦点元素里。可以使用 tabindex = "-1" 从 Tab 顺序中移除一个元素;</p><p style="font-weight: 400; font-family: Avenir,-apple-system-font,微软雅黑,sans-serif; box-sizing: border-box; font-size: 16px; text-align: justify; white-space: pre-line; padding: 23px 8px 0px; margin: 0px; color: rgb(74, 74, 74); line-height: 1.75em;">5、为页面上的公有区域比如公共导航,提供可以直接跳过的快捷键;</p><p style="font-weight: 400; font-family: Avenir,-apple-system-font,微软雅黑,sans-serif; box-sizing: border-box; font-size: 16px; text-align: justify; white-space: pre-line; padding: 23px 8px 0px; margin: 0px; color: rgb(74, 74, 74); line-height: 1.75em;">6、保证提供的页面快捷键不会和浏览器标准快捷键相冲突;</p><p style="font-weight: 400; font-family: Avenir,-apple-system-font,微软雅黑,sans-serif; box-sizing: border-box; font-size: 16px; text-align: justify; white-space: pre-line; padding: 23px 8px 0px; margin: 0px; color: rgb(74, 74, 74); line-height: 1.75em;">7、保证所有的 menu 子菜单可通过键盘打开并在其中导航;</p><section class="h4" style="font-family: Avenir,-apple-system-font,微软雅黑,sans-serif; box-sizing: border-box; font-size: 16px; text-align: left; margin: 30px 0px 0px 8px; font-weight: 500; color: rgb(60, 112, 198);"><span style="display: inline-block; width: 15px; height: 15px; margin-right: 10px; background: transparent url(" http:="" no-repeat="" scroll="" center=""/> <strong style="font-size: 16px; font-weight: bold; text-align: left;">多媒体和动画</strong> </section><p style="font-weight: 400; font-family: Avenir,-apple-system-font,微软雅黑,sans-serif; box-sizing: border-box; font-size: 16px; text-align: justify; white-space: pre-line; padding: 23px 8px 0px; margin: 0px; color: rgb(74, 74, 74); line-height: 1.75em;">1、音频必须要有配套的可替换文字和描述文字;</p><p style="font-weight: 400; font-family: Avenir,-apple-system-font,微软雅黑,sans-serif; box-sizing: border-box; font-size: 16px; text-align: justify; white-space: pre-line; padding: 23px 8px 0px; margin: 0px; color: rgb(74, 74, 74); line-height: 1.75em;">2、音频内容在页面加载时自动播放,超过 3s 的内容要让用户可以自主的暂停和重启内容;</p><p style="font-weight: 400; font-family: Avenir,-apple-system-font,微软雅黑,sans-serif; box-sizing: border-box; font-size: 16px; text-align: justify; white-space: pre-line; padding: 23px 8px 0px; margin: 0px; color: rgb(74, 74, 74); line-height: 1.75em;">3、页面上不要出现闪动频率高于 3 次 /s 的内容,以免引起不适;</p><p style="font-weight: 400; font-family: Avenir,-apple-system-font,微软雅黑,sans-serif; box-sizing: border-box; font-size: 16px; text-align: justify; white-space: pre-line; padding: 23px 8px 0px; margin: 0px; color: rgb(74, 74, 74); line-height: 1.75em;">4、如果用户的交互是受时间限制的,需要提供一个方式让用户可以关闭,调整这个时间限制;</p><p style="font-weight: 400; font-family: Avenir,-apple-system-font,微软雅黑,sans-serif; box-sizing: border-box; font-size: 16px; text-align: justify; white-space: pre-line; padding: 23px 8px 0px; margin: 0px; color: rgb(74, 74, 74); line-height: 1.75em;">5、滚动内容或者自动更新的内容在页面加载完成自动开始,更新或移动频率低于 5s 时,需要提供一个可以停止和重启的功能;</p><section class="h2" style="color: rgb(63, 63, 63); font-weight: 400; font-family: Avenir,-apple-system-font,微软雅黑,sans-serif; text-align: center; margin: 0px; box-sizing: border-box; font-size: 20px;"> <span style="height: 65px; line-height: 95px; color: rgb(60, 112, 198); font-weight: 500; border-bottom: 2px solid rgb(27, 95, 160); background: transparent url(" http:="" no-repeat="" scroll="" auto="" margin:="" padding-bottom:="" display:="" inline-block=""><strong style="font-size: 16px; font-weight: bold; text-align: left;">检测网站的可访问性</strong></span> </section><p style="font-weight: 400; font-family: Avenir,-apple-system-font,微软雅黑,sans-serif; box-sizing: border-box; font-size: 16px; text-align: justify; white-space: pre-line; padding: 23px 8px 0px; margin: 0px; color: rgb(74, 74, 74); line-height: 1.75em;">建站完成之后,可以使用一系列的测评工具对页面的可访问性进行检测。其中包括使用测评插件、键盘可访问性检测、内容检测、屏幕阅读器、其他方式等。</p><section class="h4" style="font-family: Avenir,-apple-system-font,微软雅黑,sans-serif; box-sizing: border-box; font-size: 16px; text-align: left; margin: 30px 0px 0px 8px; font-weight: 500; color: rgb(60, 112, 198);"><span style="display: inline-block; width: 15px; height: 15px; margin-right: 10px; background: transparent url(" http:="" no-repeat="" scroll="" center=""/> <strong style="font-size: 16px; font-weight: bold; text-align: left;">测评插件</strong> </section><p style="font-weight: 400; font-family: Avenir,-apple-system-font,微软雅黑,sans-serif; box-sizing: border-box; font-size: 16px; text-align: justify; white-space: pre-line; padding: 23px 8px 0px; margin: 0px; color: rgb(74, 74, 74); line-height: 1.75em;">目前比较流行的测评插件有 Chrome 的 WAVE,Firefox 的 Accessibility Evaluation Toolbar 。</p><section class="h4" style="font-family: Avenir,-apple-system-font,微软雅黑,sans-serif; box-sizing: border-box; font-size: 16px; text-align: left; margin: 30px 0px 0px 8px; font-weight: 500; color: rgb(60, 112, 198);"><span style="display: inline-block; width: 15px; height: 15px; margin-right: 10px; background: transparent url(" http:="" no-repeat="" scroll="" center=""/> <strong style="font-size: 16px; font-weight: bold; text-align: left;">键盘检测</strong> </section><p style="font-weight: 400; font-family: Avenir,-apple-system-font,微软雅黑,sans-serif; box-sizing: border-box; font-size: 16px; text-align: justify; white-space: pre-line; padding: 23px 8px 0px; margin: 0px; color: rgb(74, 74, 74); line-height: 1.75em;">在只是用键盘的情况下访问网站。</p><section class="h4" style="font-family: Avenir,-apple-system-font,微软雅黑,sans-serif; box-sizing: border-box; font-size: 16px; text-align: left; margin: 30px 0px 0px 8px; font-weight: 500; color: rgb(60, 112, 198);"><span style="display: inline-block; width: 15px; height: 15px; margin-right: 10px; background: transparent url(" http:="" no-repeat="" scroll="" center=""/> <strong style="font-size: 16px; font-weight: bold; text-align: left;">内容检测</strong> </section><p style="font-weight: 400; font-family: Avenir,-apple-system-font,微软雅黑,sans-serif; box-sizing: border-box; font-size: 16px; text-align: justify; white-space: pre-line; padding: 23px 8px 0px; margin: 0px; color: rgb(74, 74, 74); line-height: 1.75em;">缩放浏览器 75% ~ 200% 进行检测,看页面上信息展示是否完整。</p><section class="h4" style="font-family: Avenir,-apple-system-font,微软雅黑,sans-serif; box-sizing: border-box; font-size: 16px; text-align: left; margin: 30px 0px 0px 8px; font-weight: 500; color: rgb(60, 112, 198);"><span style="display: inline-block; width: 15px; height: 15px; margin-right: 10px; background: transparent url(" http:="" no-repeat="" scroll="" center=""/> <strong style="font-size: 16px; font-weight: bold; text-align: left;">屏幕阅读器</strong> </section><p style="font-weight: 400; font-family: Avenir,-apple-system-font,微软雅黑,sans-serif; box-sizing: border-box; font-size: 16px; text-align: justify; white-space: pre-line; padding: 23px 8px 0px; margin: 0px; color: rgb(74, 74, 74); line-height: 1.75em;">使用主流的阅读器主要包括 JAWS, NVDA, VoiceOver 来阅读网站。







请到「今天看啥」查看全文