首页 > 代码库 > 与WCAG相关的一些学习心得

与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=http://www.mamicode.com/"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" />

 

 

 都是自己总结的,未经博主同意禁止转载。欢迎大家指正,补充~

   :) 持续更新 ...

 

 

与WCAG相关的一些学习心得