與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" />
都是自己總結的，未經博主同意禁止轉載。歡迎大家指正，補充~
:) 持續更新 ...
與WCAG相關的一些學習心得