2020年05月17日 17:02 阅读量:14363
提供让相关承建单位了解待改造网站信息无障碍实际情况,与WCAG2.0 A,AA级标准差距以及重点改造问题的方案。 通过“人工检测+自动化检测”的方式对网站的无障碍功能可用性、易用性及完善性进行诊断与差距分析,编制诊断报告及网站任务书,并结合网站的特点给出无障碍实施改造的建议。
输出成果:网站可访问性诊断与差距分析报告、《网站改造任务书》及无障碍实施改造建议
。
整网无障碍网站建设步骤主要分为分析设计、效果确认、制作开发、无障碍化、整体测试、网页发布和跟踪维护。
网站栏目结构要清晰,层次尽量不要超过3层,各栏目内的子栏目和内容不要重叠。网站中建议设计结构清晰的导航网页,网站中设计无障碍声明网页,说明无障碍的级别、功能、操作方法等,并在首页的显著位置放置“无障碍声明”和“残疾人专栏”链接。
网页中的各种对象要采用能够用键盘控制和操作的对象,减少不必要的图片、FLASH、视频等内容和对象。
针对弱视人群的特殊设计
考虑到弱视人群还具有一定的视力,在网站中为弱视人群提供字体放大、字间距放大、对比度提高、界面放大、标尺等辅助功能,详细见4.2.2.1 无障碍辅助工具条功能设计。
无障碍信息发布
为了保证网站无障碍的长期稳定运行,需要建立无障碍发布机制,检查每天即将或已发布的网页是否符合无障碍标准。
输出成果:网站信息无障碍建设指南。
关于页面头部必须包括内容 为了保证页面的无障碍访问,首先需要在页面的头部必须有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标签
<img src=" url " alt="Image about cat" />
清单 1. 装饰性 Image 的 HTML:
<img src="url" alt="" />
必须设置一个空 alt 属性的目的是为了能通过 无障碍工具 的检查,并且使得读屏软件能够忽略此元素。
<a href=”http://apple.com/iphone/”>
<img src=”iphone.jpg” alt=””>Apple iPhone
</a>
A 的内容已经指明了这是个苹果手机,IMG 的 alt 属性就没必要再设置一次了。否则读屏软件会连续读两次重复的内容,引起混乱。清单 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 页面中通常有两种用途的表格,一种用于页面布局,另外一种用于显示数据。
清单 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>
清单 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 标签
关于tabindex 属性与获取焦点的顺序
Tabindex 属性的使用可以使得原本无法取得焦点的元素获取焦点。目的是为了使用户可以用键盘访问任何可以用鼠标访问的元素。我们知道,使用 Tab 键可以按文档顺序 tab 到所有可以获取焦点的元素。Tabindex 可以设置为 -1, 0 或者是任何自然数。
我们以 <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 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>
关于文本样式
关于accesskey属性
<div id="navigation" role="navigation" accesskey="n" tabindex="0" aria-label="导航">
……
</div>
关于颜色
关于隐藏的内容
隐藏的内容分为两种,一种是为了布局的需要,在条件满足的情况下才会显示出来;另一种是只给读屏软件读的内容:有时候我们为了使读屏软件更准确的读取信息,会提供一些额外的描述来达到此效果,但为了不给正常用户带来困扰,这些内容对正常用户来说是隐藏起来的。隐藏内容我们通常用 display:none
或者 visibility:hidden
来表示,但读屏软件同样也会忽略这类内容。那如何隐藏内容又能使读屏软件读出来呢?另外一种隐藏内容的方式是使用绝对定位使得内容不出现在当前屏幕上,如:{position:absolute;top:-30000px;}
所以在选择使用哪种方式隐藏内容时就需要慎重考虑,display:none visibility:hidden
对任何人都是隐藏的,如果想只给读屏软件读到就需要使用上面的绝对定位方式。
<span> is selected</span>
.access{
position:absolute;
top:-30000px;
}
这样当用户使用 读屏软件 浏览每一个菜单项时,在选中项上就能听到哪一项是当前的所选中。输出成果:网站可访问性测评标准。
针对诊断分析的结果参照网站信息无障碍建设指南及国内外通用网站无障碍设计规范,结合网站实际情况,制定网站信息无障碍实施的技术方案。
输出成果:网站信息无障碍实施技术方案。
整合各网站无障碍站点资源,为视障人士提供一站式网络无障碍信息导航服务,视障人士在得到协助登录导航系统平台后,即可在不同网站间自由跳转浏览。
从网站中个人事项中按服务部门分类,先关注网站现有服务项目中服务项,建立专门的导航通道,通过调用语音引擎和内容快捷键的设计,以语音导读加快捷操作的方式实现残疾人专栏的内容导读,方便残障人士检索和办理业务。
残疾人专栏的开通将以一个独立的模块进行设计与开通,其内容将来调用现在网站中与残疾人相关的业务内容,但不会影响现在网站的内容布局。
通过“人工检测+自动化检测”的方式对网站进行信息无障碍测试,针对检测出的问题进行分析,形成测试报告,提出每个问题的解决建议及优化步骤,并持续测试至所有问题解决为止。
要求组织接受过专业训练的视障工程师通过读屏软件等辅助工具参与测试,以用户的实际应用体验结果为主要依据,以保证网站无障碍改造成果符合使用者需求。
输出成果:《网站信息无障碍测试报告》
。
测试方法:
要体验视障人士如何使用网站,简单的方法是直接关闭显示器,尝试透过读屏软件使用网站。
透过读屏软件浏览网站,以确定能得到多少资讯。 尝试解读标题、导览列、图像,也要检测较复杂的功能,例如输入表格和图表。
除了读屏软件外,残障人士还会使用各种其他工具与网页进行互动,其中两种广为使用的工具是: 屏幕放大工具– 这些常用工具协助使用者放大屏幕某个部分及调整对比度。
检测网页无障碍程度的最直接的方法,是透过各类残疾人士检测网页,尤其用视障工程师团队抽样检测,从用户体验的角度上来发现网站的哪些部分是他们难以浏览的,形成缺陷跟踪列表及改进建议。
提供网站建设方技术人员改造网站过程中的无障碍技术问答和无障碍改造技术服务
提供网站无障碍工具条使用安装部署服务,如下:
我们能够提供的服务如下:
点击此查看-->
手机端无障碍工具条演示(仅手机端打开)
点击此查看-->
PC端无障碍工具条演示(仅PC端打开)
点击此查看-->
我们能提供的信息无障碍服务
点击此查看-->
无障碍工具条授权方式和区域代理
点击此查看-->
无障碍工具条之盲人读屏功能配置
→
关注[太阳湾科技]
微信公众号,在微信聊天对话框内回复无障碍
即可获取网站信息无障碍相关各种资料文档。
→
关注[太阳湾科技]
微信公众号,在微信聊天对话框内回复报价
即可获取详细价格和优惠价格方案。