与WCAG相关的一些学习心得

1.什么是 WCAG？

WCAG全称Web Content Accessibility Guidelines 网页内容无障碍浏览准则，简单的说就是为了方便残障人士（包括低视患者，盲人，聋人，学习障碍，行动不便，认知障碍....）访问Web内容而制定的相关标准，可使网站更加人性化。

举个例子，在WCAG准则2.3.2中规定：网页不包含任何闪光超过3次/秒的内容。

即不要设计会致使癫痫发做的内容（每秒3次以上的闪烁可能会使癫痫发做）。

WCAG具体内容和条例请参考Web内容无障碍指南2.0版(WCAG2.0)中文受权翻译。

 

2.可访问性测试工具WAVE

wave在线版，进去之后直接输入你想测的页面link便可，缺点是当你想测的页面须要登陆时，他只会测到登陆界面（即访问的第一个页面）；

推荐使用火狐浏览器，在菜单栏里面搜索wave并安装插件，成功后工具栏将会出现WAVE图标（下图右上角绿色图标）。正常访问你要测试的页面而后点击此图标，WAVE将会自动测试当前页面，左侧显示存在的Errors和Alerts等错误信息，点击错误信息自动导航到该行代码并在页面下方显示。

 

3.Fix the Error

如下仅列出我遇到过的Errors以及solution！！

• 第一类Error：

Missing alternative text add attribute alt=“”  ;
Linked image missing alternative text   ;
Missing alternative textMore information   ;
Image button missing alternative textMore information   ;
Linked image missing alternative textMore information   ;

solution ：

给元素添加 alt=“” 属性；alt属性的做用是当页面图片不能正常显示时，会在图片位置显示alt的值。

example ：

<img src="Logo.png"  alt="Picture cannot be displayed" />

 

• 第二类Error：

Empty form labelMore information ;
Empty buttonMore information   ;
Empty linkMore information   ;
Empty form label    ;
Empty link   ;
Empty button   ;

solution ：

根据WCAG标准某些元素不能为空，可是在个人页面这些元素就应该是空的，因此我给他们中间加了一个不为空的span而后隐藏起来就不报错了。

若是你们有更好的solution，告诉我吧~

example ：

<label><span display:none>null</span></label>

 

• 第三类Error：

Missing form label ;
Missing form labelMore information   ;

solution ：

给元素添加 aria-labelledby="" 属性；

aria-labelledby属性的做用：读屏软件会读出aria-labelledby的内容，方便视力有障碍的用户使用。

注意aria-labelledby值应该和id值相同。

example ：

<input type="text" name="txtSubject" id="Subject" aria-labelledby="Subject" /> 

 

• 第四类Error：

Missing or uninformative page title ;

solution ：

给页面添加title标题标签。

example ：

<title>Home</title>

 

• 第五类Error：

Broken ARIA reference；

Broken ARIA referenceMore information；

solution ：

报这类错误是由于aria-labelledby属性值与id值不相同。改为相同值便可。

example ：

<input type="text" name="txtSubject" id="Subject"  aria-labelledby="Subject" />

 

 

　都是本身总结的，未经博主赞成禁止转载。欢迎你们指正，补充~

   :) 持续更新 ...