WCAG2.0總結

 

Aria屬性列表

Label            經常使用在input輸入框要關聯對應的說明時，用for屬性的id值關聯對應的說明

Aria-label,   要給元素加簡短說明時使用

aria-labelledby,   通常關聯兩或者多個個元素時，或者用在描述說明比較長時（能夠關聯多個id）

aria-describedby,   關聯描述內容

aria-checked,  描述複選框的選中狀態

aria-expanded,   描述展開收起狀態

aria-haspopup,   表示點擊時出現菜單或者是浮動的選項

aria-selected,表示選擇狀態，undefined未知，true已選擇，false未選擇

aria-busy   使讀屏工具在模塊沒有更新完成以前不要告訴用戶

aria-live和aria-atomic配合使用

網頁某個某塊有更新，通知用戶  經常使用值爲：aria-live=「assertive」 不打斷用戶使用

 aria-atomic=」true/false」  是否把整個更改的內容通知用戶

aria-readonly  設置是否爲只讀狀態

aria-required  設置是否爲必填項

aria-hidden  設置隱藏

role屬性列表

role=」alert」    當要表現彈出框內容或者提示input輸入框輸入內容不爲空

 

role=」button」   模擬button ， 當元素爲div或者a標籤，起到button的做用時

role=」tab」   通常和menulist連用，   模擬tab，當元素爲div或者a標籤，起到tab的做用時

role=「radio」和role=「radiogroup」   經常使用在一組單選按鈕

role=」option」和role=「combox」  連用  表示下拉選項

role=「checkbox」和role=「group」  連用    經常使用在一組複選框

role=「menu」  經常使用在菜單

role=「listbox」     經常使用在列表框

role=」heading」   經常使用在應用標題頭，日曆標題頭

role=「 application」  表示應用程序或者某個功能模塊，例如：日曆

 

tabindex：最經常使用的值0和-1；0表示讓其得到焦點，-1表示不要使其得到焦點

1.非裝飾性圖片無替代文本

 利用alt 屬性

 <img alt='jdlogo' src='1.jpg'>

2. 圖片連接缺乏目的文本

  在 alt 屬性中描述目的

  <a href='2.html'><img src='2.jpg'  alt='回家的路線'></a>

 利用文案連接

 <a href='3.html'><br/>

 <img src='3.jpg' alt=' '>去到無障礙主頁

</a>

alt和文案連接配合使用

<a href='23.html'>

  <img src='response.gif' alt='收到響應的圖標'>

</a>

3. 圖片按鈕缺乏目的文本

  利用tittle屬性

<button type='tutton' tittle='信息產業聯盟'><img src='logo.jpg'  alt=''></button>

  利用alt屬性

<button type='tutton' ><img src='logo.jpg'  alt='信息產業聯盟'></button>

4. 圖片按鈕/連接不能響應回車鍵----->添加鍵盤響應事件

<img src='圖片按鈕' onkeyup='handle()'>

5. 圖片按鈕控件類型朗讀不正確  利用role屬性

<img src='圖片按鈕' onkeyup='handle()' role='button'>

6.圖片按鈕沒法得到鍵盤焦點  利用tabindex屬性

  網頁元素中,只有表單元素和超連接是默認支持獲取焦點的,其餘元素要被focus到,要用tabindex屬性

   //去掉 onfocus='this.blur()'

   <img src='圖片按鈕' onkeyup='handle()' role='button'   tabindex='0'>