web无障碍分析与实现

前言

当前，数字技术创新空前活跃，已成为促进经济社会发展、改善民生的重要力量。但老年人、残疾人等群体由于身体机能退化或缺陷、信息技能水平不高等原因，难以平等、方便、安全地获取、交互、使用信息。

第七次全国人口普查数据显示，我国 60 岁及以上人口达到 2.64 亿人 ，占总人口的 18.7%。 我国残障人口人数超过 8500 万人。对于老年人和残疾人的关注和保障工作 ，一直是我国政策法规的重点方向。而随着社会文明的提升、老龄化问题的加剧、新冠疫情等因素的共同影响，“无障碍环境建设”已成为重中之重。在“十四五规划”中，明确 提及“加快信息无障碍建设，帮助老年人、残疾人等共享数字生活”的要求。

以互联网应用适老化及无障碍改造为例， 自 2020 年 11 月国务院制定《关于切实解决老年人运用智能技术困难实施 方案》要求起，截止至 2022年4月，工信部已组织 325 家网站和 App 完 成相关改造。

系统需求分析

系统设计背景

“信息无障碍是指通过信息化手段弥补身体机能、所处环境等存在的差异，使任何人（无论是健全人还是残疾人、无论是年轻人还是老年人）都能平等、方便、安全地获取、交互、使用信息。”。网站无障碍建设是属于信息无障碍领域的其中一部分。

推进信息无障碍意义重大。 信息无障碍是保障民生的重要内容，是全面建设信息社会的必然要求，信息无障碍助力残疾人、老年人等社会特殊群体共享社会发展成果、共享信息化发展的数字红利。我国信息无障碍产业尚处于起步阶段，蕴含着巨大的市场空间。开展相关建设，是不齐我国民生短板的重要举措，帮助这些人群享受民生服务的重要举措。扫清相关人群的消费客观障碍，充分释放内需，推动我国数字经济进一步增长的重要力量。

目前网站无障碍建设普及率大幅提升。已有800多个政府单位完成呢个信息无障碍服务平台的建设，实现无障碍功能的网站数量达到3万多个。公共服务网站无障碍进程提速。老年人，残疾人通过网站社交，购物，获取信息的需求得到基本的保障。

系统设计流程

整网无障碍网站建设步骤主要分为分析设计、效果确认、制作开发、无障碍化、整体测试、网页发布和跟踪维护。

• 网站网页结构

网站栏目结构要清晰，层次尽量不要超过3层，各栏目内的子栏目和内容不要重叠。网站中建议设计结构清晰的导航网页，网站中设计无障碍声明网页，说明无障碍的级别、功能、操作方法等，并在首页的显著位置放置“无障碍声明”和“残疾人专栏”链接。

• 网页内容和对象

网页中的各种对象要采用能够用键盘控制和操作的对象，减少不必要的图片、FLASH、视频等内容和对象。

• 针对弱视人群的特殊设计

  考虑到弱视人群还具有一定的视力，在网站中为弱视人群提供字体放大、字间距放大、对比度提高、界面放大、标尺等辅助功能

• 无障碍信息发布

为了保证网站无障碍的长期稳定运行，需要建立无障碍发布机制，检查每天即将或已发布的网页是否符合无障碍标准。

系统设计目的

一些网站本身不能满足WCAG（Web 内容无障碍指南）2.0 定义的 AA 级别要求，直接影响了残障人士和老年人获取政府信息和服务的便捷程度；老年人和残障人士直接访问网站无法享受无障碍公共服务平台提供的无障碍辅助帮助。开展互联网网站的无障碍改造与优化，使其改造符合 WCAG2.0 A 级、AA 级标准，可为残疾人接受教育，提高职业技能创造更多机会，提高其创业就业的能力以及访问网站的公平性和便利性。

系统需求

功能需求

从可感知性、可操作性、可理解性和兼容性等方面作出要求，包括确定网站可访问性、无障碍辅助工具功能等要求

1.可感知性-信息和用户界面组件必须以可感知的方式呈现给用户。 1.1：替代文本：为所有非文本内容提供替代文本，使其可以转化为人们需要的其他形式，如大字体印刷，盲文，语音，符号或更简单的语言。 1.2 适应性：创建可用不同方式呈现的内容（例如简单的布局），而不会丢失信息或结构。 1.3 可辨别性：使用户更容易看到和听到内容，包括把背景和前景分开。

2：可操作性-用户界面组件和导航必须可操作。 2.1 键盘可访问：使所有功能都能通过键盘来操作 2.2 充足的时间：为用户提供足够的时间用以阅读和使用内容。 2.3 癫痫：不要设计会导致癫痫发作的内容。网页不包含任何闪光超过 3 次/秒的内容，或闪光低于一般闪光和红色闪光阈值。 2.4 可导航性：提供帮助用户导航、查找内容、并确定其位置的方法。

3：可理解性-信息和用户界面操作必须是可理解的。 3.1 可读性：使文本内容可读，可理解。 3.2 可预测性：让网页以可预见的方式呈现和操作。 3.3 辅助输入：帮助用户避免和纠正错误。

4：鲁棒性-内容必须健壮到可信地被种类繁多的用户代理(包括辅助技术)所解释。

4.1 兼容：最大化兼容当前和未来的用户代理(包括辅助技术)。

4.1.1 解析:使用标记语言实现的内容，元素要有完整的开始和结束标签，元素根据其规格进行嵌套，元素不含重复的属性，任何 ID 都是唯一的，除非规范允许这些特性。

作用：代码书写规范，有助于辅助技术对于页面内容的解析。不规范的代码，可能会对辅助技术解析内容的能力造成影响，甚至无法解析。

4.1.2：对于组件，应该明确提供其名称、角色、状态、值等信息，这对于使用屏幕阅读器的用户非常重要，他们根据这些信息来判断如何与组件进行交互，缺少这些信息，将使用户产生困扰。

性能要求

响应时间： 如果不考虑各种浏览器的加载速度，不同用户有不同的的网络状态以及计算机运行程度的性能，一般来说，在打开无障碍工具条，使用每个功能时间延迟不超过2秒。

安全性： 适用于语音播报会频繁请求接口查询音频，这是要做限流限制，1秒之内有超过30次限制播报，对特定的网站白名单制，其它ip无法访问

技术要求

1.使改造后的主站可访问性达到 WCAG（Web 内容无障碍指南）2.0 定义的AA 级别的相关标准，并符合《网站设计无障碍技术要求》相关标准第一等级和第二等级及部分第三等级要求。

2.实现网页内容的可感知、接口组件的可操作、网站内容和控制的可理解、网站内容对现有和未来可能出现技术的可支持等要求，满足信息无障碍云服务部署条件。根据《网站设计无障碍技术要求》(YD/T1761-2012)、《Web 内容无障碍指南（WCAG)2.0》要求，制定网站页面规范。

运行环境

服务器端环境

操作系统：Windows 11

网站服务器：本地服务器Tomcat8.0 + jdk1.8

数据库：MySQL5.5 

用户端环境

用户端: 操作系统：Windows 11 浏览器：支持除IE浏览器以外的浏览器，谷歌浏览器最佳

系统设计

总体设计

（一）设计制作一个无障碍入口首页（统一命名为 index_wza.htm,统一放在网站根目录下)，该首页以现有网站首页为基础，去除或者另行设计部分难以实现或者无需实现无障碍阅读模块，作为信息无障碍各功能统一入口。

（二）应对网站元素如图片、链接、操作控件进行梳理，添加文字说明；实现全网站页面元素可用键盘操作,可用 TAB 键盘进行元素间切换，规范网页书写代码，避免焦点陷阱等。

（三）统一快捷键设计。 accesskey 属性（快捷键、又称热键）【变更属性】，accesskey="任意的值"， 用 Accesskey 属性指定键盘上的键用于代表快捷键，即：热键。当单击键盘上的 快捷键（热键）时，光标就会跳到该当元素。或者按下快捷键（热键）执行定义 的命令。HTML5 中的命令一般为抽象化的按钮或者链接，所以 a 元素的链接也 是命令，当 a 元素中指定了 accesskey 属性，只要按下键盘上指定的快捷键（热 键），就会跳转到指定网页。该内容属性经常使用于智能手机网站的导航中。

实际上，调用 accesskey 的方法和动作，会因为 OS 或者浏览器的不同而不 同，例如，Windows 环境中，单独按定义了 accesskey 属性的快捷键，基本上不 会有什么动作。还需要与其他热键配合使用。例如上例中，定义的快捷键为 1， 但是在 Chorme35 浏览器上需要同时按下“Alt+1”才能实现网页跳转。Firefox 浏 览器上需要同时按下“Alt+Shift+1”。

• 不同 OS 上热键的组合

浏览器	Windows	Linux	Mac
IE	[Alt] + accesskey	N/A
Chrome	[Alt] + accesskey	[Alt] + accesskey	[Control] [Alt] + accesskey
Firefox	[Alt] [Shift] + accesskey	[Alt] [Shift] +accesskey	[Control] [Alt] + accesskey
Safari	[Alt] + accesskey	N/A	[Control] [Alt] + accesskey
Opera	Opera15 以上版本 ：[Alt] + accesskey， Opera12.1 以下版本: [Shift] [Esc] + accesskey

HTML5 中的 accesskey 属性可以设定多个候补热键（优先使用前面的热键）。 定义多个候补热键（快捷键）时，热键之间用半角逗号分隔。

web可行性

网络的力量在于它的普遍性。无论残疾如何，每个人都可以访问是一个重要方面。可访问性最重要的部分之一是确保设计可以支持易于访问的实现。设计不仅要考虑颜色对比度，字体选择，文本大小和语言，还要考虑应用程序中的内容是如何组织的

可访问性完全按照以下标准来实现：

1.万维网联盟(W3C)网络可访问性倡议(WAI)为不同的组件制定了Web可访问性标准

2.用户代理无障碍指南(UAAG)一网络浏览器和媒体放器，包括一些辅助技术

3.创作工具辅助功能指南(ATAG)一创作工具

4.网络内容无障得指南(WCAG)

5.WCAG2.1四大指导

6.Web可访问性倡议一一可访问的富互联网应用程序(WAI-ARIA)

包括：

1.图像的替代文本：图像应在标记/代码中 包含等效的替代文本（替代文本）。如果没有为图像提供替代文本，则图像信息将无法访问，例如，对于无法查看和使用屏幕阅读器的人来说，该屏幕阅读器可以朗读页面上的信息，包括可视图像的替代文本。当提供等效替代文本时，盲人和关闭图像的人（例如，在昂贵或低带宽的区域）可以使用该信息。它也适用于无法看到图像的技术，例如搜索引擎。

2.键盘输入：有些人不能使用鼠标，包括许多精细运动控制有限的老年用户。可访问的网站不依赖于鼠标；它使键盘上的所有功能都可用。然后，残疾人可以使用模仿键盘的辅助技术，例如语音输入。

3.音频：提供文本副本使失聪或听力障碍的人以及搜索引擎和其他听不见的技术可以访问音频信息。

语音模块

TTS技术基于ScanSoft_MeiLing语音库，实现语音播报，指读功能

信息无障碍通道

无障碍网站按残障人群(目标用户)分为两大功能模块: 辅助浏览模块，语 音导读模块。

为了方便用户进入无障碍网站，在普通网站上仅设立一个无障碍通道链 接，通过新开窗口打开无障碍网站，并在普通版网站首页实现进入无障碍的快 捷键操作。

除了加载扁平化网站以外，无障碍可使用无障碍首页作为加载的目标首 页。

提供无障碍工具条

按照用户常用的使用习惯，无障碍工具条的位置设计在无障碍页面的顶 部。

无障碍工具条的颜色设计按照网站无障碍设计规范设计成黑白色。

无障碍工具条按功能划分为三个区域，自左至右次是：公共导航区、本版 本特有功能区、公共工具区。

公共导航区，包含：辅助浏览，显示屏，语音导航进入按钮，当前版本按 钮有文字说明和颜色高亮提示。

公共工具区，包含：页面前进，页面后退，页面刷新，页面重置，无障碍 网站导航，退出无障碍系统，无障碍系统帮助。

无障碍工具条上各按钮的功能均实现对应的快捷键功能，并对按钮的鼠标 覆盖事件配以功能及快捷键说明的文字提示和语音提示，以及鼠标覆盖事件的 按钮高亮显示。

主要提供以下功能：

a）提供开启、关闭无障碍网站浏览辅助工具的功能；

b）提供无障碍纯文本转换模式；

c）提供文字大小控制功能；

d）提供高对比度显示功能；

e）提供辅助线辅助功能；

f）提供界面控制功能如：页面放大、缩小等。

功能实现

无障碍改造标签库

关于页面头部必须包括内容 为了保证页面的无障碍访问，首先需要在页面的头部必须有DOCTYPE加上 DTD 的声明以及页面默认的语言。此外，页面的 title 属性值也是必须的。

清单 1. HTML 页面中加入 DTD 声明及默认语言属性

<!DOCTYPE html> 
 <html lang="zh-CN">

清单 2. XHTML 页面中加入 DTD 声明及默认语言属性

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN" xml:lang="zh-CN">

清单 3. 设置 title 属性

<head> 
 <title>页面标题</title>
</head>

关于图片 Image标签

• 图片或者动画均需提供 Alt 信息，使得读屏软件可以将图片动画的内容清楚的读出来。 对应的 HTML 如下： 清单 1. Image 的 HTML

<img src=" url " alt="Image about cat" />

• 对于某些用于装饰性的图片，则需设置 alt 为空，使得读屏软件可以忽略此元素。 对应的 HTML 如下：

清单 1. 装饰性 Image 的 HTML：

<img src="url" alt="" />

必须设置一个空 alt 属性的目的是为了能通过 无障碍工具 的检查，并且使得读屏软件能够忽略此元素。

• 对于放在链接里面的图片，如果已经有文字的说明，alt 也设置为空，这样避免读屏软件重复同样的内容。如下面的 HTML： 清单 1. 无需重复设置 alt 的 Image

<a href=”http://apple.com/iphone/”> 
   <img src=”iphone.jpg” alt=””>Apple iPhone 
</a>

A 的内容已经指明了这是个苹果手机，IMG 的 alt 属性就没必要再设置一次了。否则读屏软件会连续读两次重复的内容，引起混乱。

• 将样式跟结构分离，使得 HTML 代码结构清晰。很多装饰性的图片也都放在 CSS 里面来加载，带来的一个问题就是在 CSS 里面的图片在高对比度模式下都无法显示。如果这个图片并不仅仅是装饰性的，还可以触发功能，那就需要从 CSS 里面拿出来，当成一个独立的 IMG 或者 INPUT 元素。 写在 CSS 里面的做法是：

清单 1. 图片写在 CSS 里面

<div class=” save_button” /> 
 .save_button{ 
     background: url("images/save_button.png"); 
     width: 33px; 
     height: 33px; 
     vertical-align:middle;     
 }

这样当用户切换到高对比度模式，这个图片就是一片空白，用户无法再去点击保存。修改如下：

清单 2. 将 CSS 里面的图片拿出来

<img src=“images/save_button.png” alt=“save”/> 
 <input type=“image” src=“images/save_button.png” alt=“save”/>

• 在一个图片列表里面选中某个图片，区别选中去否我们通常的做法是用边框的颜色来标识。

清单 1. 图片被选中时对应的 CSS

.selectedIcon{ 
     border:5px solid #ACC6F3; 
 } 
 .unSelectedIcon{ 
     border:5px solid #C0D4F7; 
 }

但这样的一个实现实际上违反了可访问检查列表中的一项：不能仅仅通过颜色来区分不同的元素，因为在高对比度下只有黑色或白色，这样的区分在高对比度下是没有任何作用的。我们很容易想到的一种办法就是只有选中的时候才加边框，未选中时则没有边框，这样就可以区分出来了。修改如下：

清单 2. 图片被选中时修改后的 CSS

.selectedIcon{ 
     border:5px solid #ACC6F3; 
 } 
 .unSelectedIcon{ 
     border:0 none; 
 }

这样引起的问题是，图片的布局在选中的时候会浮动，增加了 5px 的边框，看起来效果就很差。那么怎么保证布局又满足可访问性的要求呢？ 可以在上面 CSS 的基础上通过 padding 属性使得布局正确：

清单 3. 图片被选中时正确的 CSS

 .selectedIcon {border:1px solid #ACC6F3;      padding:4px;} 
 .unSelectedIcon {border:0 none;      padding:5px;}

这样保证整体的边界都是 5px。

关于表格 Table标签

在 Web 页面中通常有两种用途的表格，一种用于页面布局，另外一种用于显示数据。

• 数据表格: 需要用 指定行或列的标题行，同时还需要显式地指定 summary 属性值，使得屏幕阅读器可以读出表的主要用途; 表格中必须包含caption标签，caption可以显示或隐藏；合理的使用thead，tbody及tfoot；标题单元格添加scope属性，表示相关的范围。如清单 1 所示：

清单 1. 数据表格

<table border="1" summary="向日葵班2011年体检表">
  <caption>体检表</caption>
  <thead>
    <tr><th scope="col">姓名</th><th scope="col">性别</th><th scope="col">身高/cm</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">小新</th><td>男</td><td>85</td></tr>
    <tr><th scope="row">妮妮</th><td>女</td><td>82</td></tr>
    <tr><th scope="row">阿呆</th><td>男</td><td>82</td></tr>
  </tbody>
</table>

• 布局表格的用途是为了页面布局美观而使用的，所以在其定义中不应该包含行或列标题行，同时设定 summary 的属性值为空。布局表格对于屏幕阅读器应该是透明的。通常情况下，如果表格有至少两行两列四个单元格，同时其大小在 200 到 16000 平方像素之间，在 JAWS 中会默认为是数据表。所以如果一个表格是为布局而设置的，请避免为其指定 summary 属性值。有些屏幕阅读器偶尔会混淆数据表格与布局表格，为了避免混淆我们可以指定 WAI-ARIA 的 role 属性值为 presentation。如清单 2 所示：

清单 2. 设置表格的 role 属性 <table role="presentation">...</table>

然而并非所有的浏览器都支持 WAI-ARIA 属性，这种情形下，我们可以设定表格的 datatable 属性值为 0, 这样 JAWS 也会将其视为布局表格。

清单 3. 设置表格的 datatable 属性

<table datatable="0">...</table>

关于表单控件元素

描述:表单的输入页面，必须让读屏软件可以读出每一个控件的含义

• 标签的value属性可阅读，使用value属性自描述 适用的控件标签：

  input[type=button|submit|reset]
  <input type="button" name="" value="普通"/>
  <input type="submit" name="" value="提交"/>
  <input type="reset" name="" value="复位"/>    
  

• 添加title属性，属性值为描述文案 适用的控件标签：input,select,textarea,fieldset <input type="text" name="" title="宝贝标题" value=""/>

• 添加label标签，将label的for属性和控件元素的id关联起来，label可以显示或隐藏，文案非空 适用的控件标签：input,select,textarea,fieldset

  <input type="checkbox" name="" id="promotion" value="" /><label for="promotion">参加秒杀</label>

• 添加tabindex属性，使标签可被tab切换，tabindex值为非负整数 适用的控件标签：fieldset

  <fieldset tabindex="0" title="" aria-label="基本信息">
    <legend>基本信息</legend>
    <input type="text" name="" aria-label="标题"/>
  </fieldset> 
  

关于链接 a 标签

描述:点击后页面发生跳转的a标签

• 无需辅助属性。 适用场景：文字内容完整，未做截断处理的 <a href="url">XX网首页</a>
• 添加title属性，注明完整内容，非空 适用场景：文字内容有截断的，不能展示全部内容的。 <a href="url" title="全场三折起，降价女鞋甩卖">全场三折起...</a>
• 添加title属性，注明链接的目标，非空 使用场景：文字内容需要结合上下文才可以知道目标页面的。 <a href="url" title="更多新闻">更多</a>

关于多媒体对象 Object 标签

• 不使用iframe、embed、applet等标签展示内容事件。
• 有onmouseover行为的焦点的元素应有类似onfocus的相同效果解决方案。
• 有onmouseout行为的焦点的元素应有类似onblur的相同效果解决方案。
• 鼠标的onmousedown，onmouseup和onmousemove功能，要有相应的键盘解决方案（比如用keydown、keyup、onblur）。
• 没有焦点的元素的onmouseover或onmouseout应该用css中的:hover来实现。
• onClick事件应该绑定在有能有焦点的元素上。
• onChange事件不应使用在select元素上，会导致自动改变焦点或者载入到一个页面中。

关于tabindex 属性与获取焦点的顺序

Tabindex 属性的使用可以使得原本无法取得焦点的元素获取焦点。目的是为了使用户可以用键盘访问任何可以用鼠标访问的元素。我们知道，使用 Tab 键可以按文档顺序 tab 到所有可以获取焦点的元素。Tabindex 可以设置为 -1， 0 或者是任何自然数。

• Tabindex = 0 就使原本无法获取焦点的元素可以在用户 tab 的时候获取焦点，并且按照文档顺序排列。
• Tabindex = -1 使得元素可以获取焦点，但当用户用 tab 键访问的时候并不出现在 tab 的列表里面。可以方便的通过 Javascript 设置上下左右键的响应事件。非常有利于应用小部件内部的键盘访问。
• Tabindex 设置为大于 0 的数字则可以控制用户 Tab 时候的顺序，一般很少用。

我们以 <span> 为例。以下代码是 HTML 中的默认 <span> 元素：<span>span text here</span> 以下元素可以能从鼠标或键盘接收关注；用户可以使用 tab 键来关注此元素，并且 tab 键顺序取决于元素在文档中的位置：

<span tabindex="0">span text here</span>

以下元素不能使用 tab 键接收关注：将 tabindex 设置为 -1 意味着从 tab 序列中移除该元素。因此，您无法使用键盘或鼠标来关注此元素。但是，您仍然可以使用focus()方法来关注它。

<span tabindex="-1">span text here</span>

关于焦点与键盘

• 禁止移除焦点。
• 不可禁用键盘操作。
• 确保包括表单在内的页面元素能获取焦点。

关于菜单和导航

• 使用ul标签作为导航，使用class来添加样式，导航中a标签包含title属性。

• 给导航菜单容器添加role="navigation"属性

• 给容器添加tabindex="0"使其可以被tab切换

• 添加aria-label属性，对导航内容做描述

• 推荐的导航结构：

  < ul role="navigation" tabindex="0" aria-label="导航菜单列表">
  <li><a href="url" title=”xx” >栏目1</a></li>
  <li><a href="url" title=”xx” >栏目1</a></li>
  <li><a href="url" title=”xx” >栏目1 </a></li>
  </ ul>    
  

关于文本样式

• 勿使用blink、font、center、i、b、u标签。
• 要强调的内容使用strong标签。

关于accesskey属性

• 属性值必须是唯一的。

• 不要与浏览器本身的快捷键重复，比如：IE中的ACEFHJMPRTVX Home；chrome中的EFD；firefox：BEFHSTV另外有的插件会把自己安装在菜单栏里，并且绑定一个字母作为快捷键。

• 最好不要使用字母。

• 应用案例:

  <div id="navigation" role="navigation" accesskey="n" tabindex="0" aria-label="导航">
  ……
  </div>
  

关于颜色

• 禁止在html标签中使用color属性，用css来实现。
• 颜色对比度最少值是3：1.
• 颜色对比度最佳值是7：1
• 不能只用颜色作为唯一的信息标识
• 不能只用图形作为唯一的信息标识

关于隐藏的内容

隐藏的内容分为两种，一种是为了布局的需要，在条件满足的情况下才会显示出来；另一种是只给读屏软件读的内容：有时候我们为了使读屏软件更准确的读取信息，会提供一些额外的描述来达到此效果，但为了不给正常用户带来困扰，这些内容对正常用户来说是隐藏起来的。隐藏内容我们通常用 display：none 或者 visibility:hidden 来表示，但读屏软件同样也会忽略这类内容。那如何隐藏内容又能使读屏软件读出来呢？另外一种隐藏内容的方式是使用绝对定位使得内容不出现在当前屏幕上，如：{position:absolute;top:-30000px;} 所以在选择使用哪种方式隐藏内容时就需要慎重考虑，display:none visibility:hidden 对任何人都是隐藏的，如果想只给读屏软件读到就需要使用上面的绝对定位方式。

• 清单 1. 只给读屏软件读的内容

  <span>  is selected</span> 
  .access{
  position:absolute;
  top:-30000px;
  }
  

  这样当用户使用 读屏软件 浏览每一个菜单项时，在选中项上就能听到哪一项是当前的所选中。

快捷键

每个功能点使用不同的快捷键控制：

无障碍辅助工具条

刷新功能

光标功能

纯文本功能

鼠标功能

大字功能

小字功能

配色功能

语音开关功能

语速功能

指读功能

连续功能

显示屏功能

退出功能

主要功能模块测试

人工检测

测试方法：

• 用读屏软件进行手动检测

要体验视障人士如何使用网站，简单的方法是直接关闭显示器，尝试透过读屏软件使用网站。

透过读屏软件浏览网站，以确定能得到多少资讯。 尝试解读标题、导览列、图像，也要检测较复杂的功能，例如输入表格和图表。

• 使用其他检测工具

除了读屏软件外，残障人士还会使用各种其他工具与网页进行互动，其中两种广为使用的工具是： 屏幕放大工具– 这些常用工具协助使用者放大屏幕某个部分及调整对比度。

• 使用者测试

检测网页无障碍程度的最直接的方法，是透过各类残疾人士检测网页，从用户体验的角度上来发现网站的哪些部分是他们难以浏览的，形成缺陷跟踪列表及改进建议。

无障碍检测工具

W3C 官网推荐无障碍检测工具

此 工 具 是 W3C 官 网 推 荐 的 一 种 在 线 检 测 主 厅 可 访 问 性 评 估 工 具 （ www.w3.org/WAI/ER/tool… 帮助确定网页内容是否符合可访问性指南，评估是否符合WCAG 2.0 A 级和 AA 的要求，提供对评估结果的总结和详细报告。是用于无障碍实施完成后全站无障碍检测。

FAE 2.0

FAE工具的火狐浏览器的测试插件 Firefox Accessibility Extension ，这个Firefox的工具栏包括一个大型一套工具来检测那些视觉障碍者访问时网站的外观，也包括了文字，脚本，样式等等的测试。 是一款用于在进行无障碍实施改造的时候进行在线单一页面检测并可视化显示页面哪些不符合要求或者警告的地方，方便改造。

结论

在开发该系统的过程中，思考需求是个漫长的过程。花了大量时间研究w3c网络可访问性,无障碍指南,《信息无障碍白皮书（2022年）》 ,等相关资料文献后，为开发无障碍网站的完整性，便捷性，实用性奠定了极大的帮助。目前的成品可以为不同的残疾人及正常人带来极大的帮助。该系统已完成预期的研究和应用目标，并实现了网站必须具备的功能，但还是不够完善。没能实现为残障人士做出的改善能帮助到普遍大众，形成扩大效应。各种小细节没有打磨好，为残障人士都能做体验的时候，一定会给健全人也带来使用体验上的提高。整个系统并未经过实际生产环境的检验，系统稳定性及复用性还有待考察，，当然这也将会是一个长期的过程。目前系统前台仅为PC端开发页面，在以后的开发中需要继续解决多端兼容问题，甚至可以去单独开发移动端页面。

经过研究以及开发过程，深刻感受到无障碍设计和我们大多数人相关性：做无障碍并不是一个帮助少数人群、投入爱心、不求回报的公益项目，而更多的是帮助包括我们自己在内的所有人，认识到这一点。看待无障碍这个话题的时候，从平等对待所有用户的角度出发，而不是说我们要特别地对待特殊的用户。让一个残障人士的工作能力，生活能力，达到和健全人没有区别的程度，这样的一个状态是我最期待的愿景。总有一天我们看不到人与人之间的差距，因为它已经被科技和人的观念抹平了。也期待国家和企业对这方面发展越来越好，越来越重视。

参考文献

1. HTML文档中增加具有视觉、听觉损伤的用户的可访问性的主动ALT标记[P]. 雷宾德瑞纳斯·杜塔,加纳尼·加纳克瑞曼,理查德·S·施韦特费格尔.

2. 面向建设无障碍网站的Web可访问性研究与应用[D]. 袁俊.重庆大学 2006

3. 通用设计中无障碍网页设计对老龄用户的研究)[J]. 付若尘,韩少华.  设计. 2014(06)

4. W3C Markup Valida- tion Service. WC. http://validator,w3.org . 2007

5. 信息无障碍平台的研究与实现[J]. 李明,张海永,许家成,郝传萍. 中国教育信息化. 2010(13)

普及信息无障碍作用

中国信通院发布《信息无障碍白皮书（2022年）》 提出促进我国信息无障碍加快发展的建议