相關(guān)文章：
- 網(wǎng)頁(yè)內(nèi)容無(wú)障礙指引1.0
- 在 30 天內(nèi)打造更具親和力的網(wǎng)站
- 騰訊網(wǎng)無(wú)障礙說(shuō)明
- 如何開發(fā)無(wú)障礙的 Web 網(wǎng)頁(yè)應(yīng)用詳細(xì)手冊(cè)教程指南
- 開發(fā)和測(cè)試訪問(wèn)無(wú)障礙的 Web 應(yīng)用
- WAI-ARIA 無(wú)障礙Web規(guī)范
- 使用 JAWS 測(cè)試 Web 應(yīng)用的技巧
關(guān)于 Image
- 圖片或者動(dòng)畫均需提供 alt 信息，使得讀屏軟件可以將圖片動(dòng)畫的內(nèi)容清楚的讀出來(lái)。
- 對(duì)于某些用于裝飾性的圖片哨啃，則需設(shè)置 alt 為空逝慧，使得讀屏軟件可以忽略此元素熟掂。
- 對(duì)于圖表文件嗜侮，alt 屬性的設(shè)置則需要簡(jiǎn)明扼要的表達(dá)出圖表的信息稽犁，并不用把里面的細(xì)節(jié)都詳細(xì)得描述出來(lái)沮翔。
- 對(duì)于圖表文件陨帆，alt 屬性的設(shè)置則需要簡(jiǎn)明扼要的表達(dá)出圖表的信息，并不用把里面的細(xì)節(jié)都詳細(xì)得描述出來(lái)鉴竭。
<img src="cat.gif" alt="Image about cat" />
<img src="ring.gif" alt="" />
<a >
<img src="iphone.jpg" alt="">Apple iPhone
</a>
CSS 將樣式跟結(jié)構(gòu)分離
很多裝飾性的圖片也都放在 CSS 里面來(lái)加載歧譬，帶來(lái)的一個(gè)問(wèn)題就是在 CSS 里面的圖片在高對(duì)比度模式下都無(wú)法顯示。如果這個(gè)圖片并不僅僅是裝飾性的搏存，還可以觸發(fā)功能瑰步，那就需要從 CSS 里面拿出來(lái)，當(dāng)成一個(gè)獨(dú)立的 img 或者 input元素璧眠。
<div class=” save_button” ></div>
.save_button{
background: url("images/save_button.png");
width: 33px;
height: 33px;
vertical-align:middle;
}
這樣當(dāng)用戶切換到高對(duì)比度模式缩焦，這個(gè)圖片就是一片空白读虏，用戶無(wú)法再去點(diǎn)擊保存。
//推薦使用
<img src="images/save_button.png" alt="save"/>
<input type="image" src="images/save_button.png" alt="save"/>
關(guān)于 Table
- 布局用 table袁滥，讀屏軟件沒必要知道這是一個(gè)表盖桥，可以通過(guò)設(shè)置 role=presentation 使 JAWS 忽略這個(gè)表，只關(guān)注里面的內(nèi)容题翻。
- 數(shù)據(jù)用 table揩徊，則需要設(shè)置 caption 屬性，說(shuō)明整個(gè)表是用來(lái)做什么的嵌赠，使得 JAWS 可以告訴用戶這個(gè)表的作用塑荒。對(duì)于每一個(gè)單元內(nèi)的數(shù)據(jù)，還應(yīng)該通過(guò) th 屬性使得 JAWS 能識(shí)別這個(gè)數(shù)據(jù)的表頭是什么姜挺。對(duì)于復(fù)雜表齿税，可以通過(guò) id 和 header 屬性來(lái)標(biāo)識(shí)。
