（1） 图形缺少alt属性类

从表1的统计数据可知,图形缺少alt属性导致检测WCAG报错所占比例非常高。因此,解决此因素对网站无障碍的影响至关重要。解决方法是为图形元素添加alt属性。同属于此范畴的问题还有：锚用图像缺少有效的替代文字;输入元素所使用的图像缺少替代文字;图像映射区域元素缺少alt属性。

图像映射区域元素缺少alt属性的代码如下：

国家图书馆>图书——文津图书奖图片链接（时间：2011-08-19）

< img src=＂http：//www．nlc．gov．cn/service/images/wjtsj．jpg＂ width=＂100＂ height=＂41＂ border=＂0＂ />

该例中,由于“文津图书奖图片”缺少alt属性导致视障人士浏览此网页将无法感知此下一步的相关链接信息。

为图形添加了alt属性但不规范的代码如下：

湖北图书馆网站首页——新书推荐栏目（时间：2011-06-19）

< img src=http：//www．library．hb．cn/index/newbook1/201003/W020100324611728122845．jpg alt=＂绿色战略． jpg＂ width=＂59＂ height=＂80＂ border=＂0＂ />

其中斜体加粗的字段部分虽然添加了alt属性,却没有具体及完整的说明性文字。视障人士浏览此页时只是得到“绿色战略．jpg”这种模糊信息。

参照WCAG标准,内容可感知性原则中的替代文本指南——为任何非文本内容提供必要的文本替代^{[ 1]}。规范后的图形添加alt属性无障碍代码如下：

< img src=book．jpg width=＂300＂ height=＂375＂border=＂0＂ alt=＂参考书 系统集成项目管理工程师教程＂ />

通过对图形添加规范alt属性后,即使视障人士上网浏览时无法通过屏幕阅读器或盲文点字器等设备直接读取图像,也可以通过读取图像中产生的文本信息了解对应图像所表达的内容。而对于健全人,当遇上图像无法正常载入时,也可以通过网页中显示 “参考书 系统集成项目管理工程师教程” 的文字来了解图像所表达的完整信息。

（2）标签缺失类

①选择元素缺少相关标签

通过编程、用户代理、文本表述等方式,其中也包括借助无障碍辅助技术来提取数据,以此呈现不缺失的全信息及顺序结构给特殊用户感知^{[ 1]}。

参考AChecker提供的HTML Tag To Check^{[ 14]},对代码做相应的修改。为选择元素添加相关标签实现网页无障碍前后对比的代码如下：

< p >< label >书目类型：

< select name=＂abcselect＂ id=＂type＂ >

< option value=＂1＂ >图书

< option value=＂2＂ >期刊

< option value=＂3＂ >音像资料

——规整前

< p >< label for=＂type＂ >书目类型：

< select name=＂abcselect＂ id=＂type＂ >

< option value=＂1＂ >图书

< option value=＂2＂ >期刊

< option value=＂3＂ >音像资料

——规整后

通过在代码中添加相关联的label标签斜体加粗字段后,当视障人士浏览此类网页时由规整前的无语音提示,到规整后通过鼠标点击相应区域即可利用屏幕阅读器或读屏软件点读得到“书目类型”的提示语音。

②标签文本为空

当需要使用者输入内容时,要给出标签说明,提供操作反馈予使用者^{[ 1]}。

参考AChecker提供的HTML Tag To Check^{[ 15]},对代码做相应的修改。为标签添加说明文本实现网页无障碍前后对比的代码如下：

< p >< label for=＂name＂ >

< input type=＂text＂ name=＂firstname＂ id=＂name＂ />

——规整前

< p >< label for=＂name＂ >编著者：

< input type=＂text＂ name=＂firstname＂ id=＂name＂ />

——规整后

通过在代码中为相关联的标签添加相应的文本斜体加粗字段后,当视障人士浏览此类网页时由规整前的无语音提示,到规整后通过鼠标点击相应区域即可利用屏幕阅读器或读屏软件点读得到“编著者”的提示语音。

③“××”型输入元素缺少相关标签文本

其含义是所有的input元素,“XX”类型,应该有一个明确的相关标签文本label与之对应^{[ 1]}。

参考AChecker提供的HTML Tag To Check^{[ 16]},对代码做相应的修改。为输入元素添加相关标签文本实现网页无障碍前后对比的代码如下：

< p >< label >填写密码：

< input type=＂password＂ name=＂login-password＂ tabindex=＂1＂ />

——规整前

< p >< label for=＂pass＂ >填写密码：

< input type=＂password＂ id=＂pass＂ name=＂login-password＂ tabindex=＂1＂ />

——规整后

通过在代码中添加相关联的标签文本斜体加粗字段后,当视障人士浏览此类网页时由规整前的无语音提示,到规整后通过鼠标点击相应区域即可利用屏幕阅读器或读屏软件点读得到“填写密码”的提示语音。

（3）锚不含（解析）文本类

其含义是为定位元素添加解析文本以便特定人群也能浏览、查找内容、并确定他们位置^{[ 1]}。

参考AChecker提供的HTML Tag To Check^{[ 17]},对代码做相应的修改。为锚添加解析文本实现网页无障碍前后对比的代码如下：

< body >< p >更多馆藏 < a href=＂Collection．html＂ >．

——规整前

< body >< p >更多馆藏< a href=＂Collection．html＂ >关于更多的馆藏内容．

——规整后

通过在代码中添加相应的锚用解析文本斜体加粗字段后,当视障人士上网浏览此类网页时由规整前的无语音提示,到规整后通过Tab键的切换即可利用读屏软件点读得到“关于更多的馆藏内容”的提示语音。

（1）字体色彩失当

网页设计人员往往在对网页字体颜色方面并不太在意,致使视障人士阅读网页文字内容时往往会产生阅读困难。

参考AChecker提供的HTML Tag To Check^{[ 18]},对代码做相应的修改。链接文字色彩对比规整实现网页无障碍前后对比的代码如下：

< body bgcolor=＂＃ffffff＂ link=＂＃ cccccc＂ >

< p >欢迎来到图书馆< p >< a href=＂http：//www．gzlib．gov．cn．com＂ >进入主页

——规整前

< body bgcolor=＂＃ffffff＂ link=＂＃ 000000＂ >

< p >欢迎来到图书馆< p >< a href=＂ http：//www．gzlib．gov．cn．com ＂ >进入主页

——规整后

通过对代码中字体和链接文字色彩斜体加粗部分字段规整,视障人士可以更清晰及方便地浏览网页内容。按照WCAG的要求,亮度对比度链接背景色和文本颜色之间至少是4．5：1,根据视觉呈现的对比度公式来计算（浅色的相对亮度 + 0．05） ：（深色的相对亮度 + 0．05）,比值越大相应对比度越强烈,计算得到大号文本、图像则至少有3：1的对比度,而默认的文本和文本图像至少要有4．5：1的对比度^{[ 1]}。通过对链接文字色彩规整使得视障人士可以更清晰地浏览网页。

（2）使用marquee元素

除非运动、闪烁、或滚动及自动更新是必需行为的一部分,网页内容开发者在开发设计网页时必须为使用者提供一个机制,这个机制可使得使用者自主暂停,停止或隐藏运动、闪烁、或滚动及自动更新这些功能,以便为用户提供足够的时间来使用或阅读内容^{[ 1]}。

使用marquee元素造成视障人士读取信息困难的代码如下：

海南图书馆首页——最新公告（时间：2011-08-19）

< td width=60 >最新公告：

< td width=400 >

< MARQUEE onmouseover=this．stop（） onmouseout=this．start（） scrollAmount=1 scrollDelay=4 width=400 align=＂left＂ >< p >＆nbsp;＆nbsp;没有公告

以上代码中用marquee元素构建的首页中 “没有公告”的横向滚动播放信息,既然没有公告就没必要显示出来,健全人浏览此类滚动播放信息时也许无障碍,但视障人士浏览此类网页就会比较困难。解决方式是去除marquee元素,以定期更新的方式来构建与完善无障碍网站。同属此类问题的实例还有：中国国家图书馆首页——最新公告,海南省图书馆首页——本馆动态,广州图书馆首页——活动公告等都同属于使用了marquee元素。