1. 首页
  2. 信息无障碍
  3. 网站信息无障碍改造实施过...

网站信息无障碍改造实施过程提供的服务

2020年05月17日 17:02　阅读量：9995

网站可访问性诊断与差距分析,网站信息无障碍建设指南,网站可访问性测评标准,网站信息无障碍实施技术方案,辅助开通残疾人专栏,视障人士专业测试,网站无障碍技术支持等服务

1 网站可访问性诊断与差距分析

提供让相关承建单位了解待改造网站信息无障碍实际情况，与WCAG2.0 A，AA级标准差距以及重点改造问题的方案。 通过“人工检测+自动化检测”的方式对网站的无障碍功能可用性、易用性及完善性进行诊断与差距分析，编制诊断报告及网站任务书，并结合网站的特点给出无障碍实施改造的建议。

输出成果：网站可访问性诊断与差距分析报告、《网站改造任务书》及无障碍实施改造建议。

2 网站信息无障碍建设指南

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

  • 网站网页结构

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

  • 网页内容和对象

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

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

    考虑到弱视人群还具有一定的视力，在网站中为弱视人群提供字体放大、字间距放大、对比度提高、界面放大、标尺等辅助功能，详细见4.2.2.1 无障碍辅助工具条功能设计。

  • 无障碍信息发布

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

输出成果:网站信息无障碍建设指南。

3 网站可访问性测评标准

关于页面头部必须包括内容 为了保证页面的无障碍访问，首先需要在页面的头部必须有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;
}
    这样当用户使用 读屏软件 浏览每一个菜单项时，在选中项上就能听到哪一项是当前的所选中。

输出成果:网站可访问性测评标准。

4 网站信息无障碍实施技术方案

针对诊断分析的结果参照网站信息无障碍建设指南及国内外通用网站无障碍设计规范，结合网站实际情况，制定网站信息无障碍实施的技术方案。

输出成果：网站信息无障碍实施技术方案。

5 辅助开通残疾人专栏

整合各网站无障碍站点资源，为视障人士提供一站式网络无障碍信息导航服务，视障人士在得到协助登录导航系统平台后，即可在不同网站间自由跳转浏览。

从网站中个人事项中按服务部门分类，先关注网站现有服务项目中服务项，建立专门的导航通道，通过调用语音引擎和内容快捷键的设计，以语音导读加快捷操作的方式实现残疾人专栏的内容导读，方便残障人士检索和办理业务。

残疾人专栏的开通将以一个独立的模块进行设计与开通，其内容将来调用现在网站中与残疾人相关的业务内容，但不会影响现在网站的内容布局。

6 视障人士专业测试

通过“人工检测+自动化检测”的方式对网站进行信息无障碍测试，针对检测出的问题进行分析，形成测试报告，提出每个问题的解决建议及优化步骤，并持续测试至所有问题解决为止。

要求组织接受过专业训练的视障工程师通过读屏软件等辅助工具参与测试，以用户的实际应用体验结果为主要依据，以保证网站无障碍改造成果符合使用者需求。

输出成果：《网站信息无障碍测试报告》。

测试方法：

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

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

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

  • 使用其他检测工具

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

  • 使用者测试

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

7 网站无障碍技术支持

提供网站建设方技术人员改造网站过程中的无障碍技术问答和无障碍改造技术服务

8 网站无障碍工具条

提供网站无障碍工具条使用安装部署服务，如下：

无障碍工具条下载安装部署。

我们能够提供的服务如下: wza-Flow-Chart.jpg

点击此查看-->手机端无障碍工具条演示(仅手机端打开)
点击此查看-->PC端无障碍工具条演示(仅PC端打开)
点击此查看-->我们能提供的信息无障碍服务
点击此查看-->无障碍工具条授权方式和区域代理
点击此查看-->相关服务报价参考

标签：可访问性诊断与差距分析 无障碍建设指南 可访问性测评标准 无障碍实施技术方案