與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" />

 

 

　都是本身總結的，未經博主贊成禁止轉載。歡迎你們指正，補充~

   :) 持續更新 ...