最近在NVDA的英文電郵論談也有在討論這件事
我去年也曾提出這個問題
經過一年加上檢測網頁的經驗
在這邊又想與大家一起討論看看不同的觀點
事情是這樣的
在網頁中載入圖片通常使用 <img>
的標籤
這個標籤內會有兩個常見屬性,分別是 src 與 alt
- src 用來放圖片位置
- alt 用來加註圖片說明
先說一下無障礙規範的部分
- 圖片不是裝飾圖就必須用 alt 加註說明讓導讀軟體可以讀出該圖片的說明
- 如果是裝飾圖,以前是建議用
alt="*"
讓導讀軟體念星號就表示這是個裝飾圖而已
現在都會直接建議alt=""
留空乾脆直接忽略這個圖片 - 有一些圖片連結或群組圖片也可以使用
alt=""
的方式來讓導讀軟體忽略這些圖片以免朗讀太多重複資訊
再來說一下NVDA對這個 <img>
標籤的處理
- 遇到有 alt 屬性的
<img>
標籤就顯示為圖片屬性與說明 - 遇到沒有 alt 屬性的
<img>
標籤或alt=""
留空的狀況都會直接忽略整個圖片
不過畫面上只要 src 位置下對就是有這個圖的
問題討論:
- 當一個有意義的圖片忽略了 alt 或把 alt 留空時,NVDA就會忽略這個圖片
這樣的問題是我們完全不知道那裡有一個圖,萬一這個圖是管理者忘了或漏加 alt 那我們不會知道。
而且我們也有可能需要下載圖片,就這樣隱藏掉似乎不太好。
這也是我在網頁檢測時可能遇到的問題,就是我人工抓不到這個狀況,除非是使用機器檢測。
有一些人跟我是建議NVDA只要看到<img>
就顯示,不管有沒有 alt 但這樣又產生了一個問題 - 這樣網頁想克意讓導讀軟體忽略的圖片就沒辦法做到忽略效果
也就是導讀軟體看到<img>
都會顯示,像是裝飾圖、合併連結的圖片或群組圖片等就沒辦法讓導讀軟體忽略了 - 機器檢測是會抓
<img>
沒有 alt 標籤的狀況,也就是說加了alt=""
就會被放過等人工檢測
但NVDA會忽略 alt 留空的圖片,所以人工檢測就又沒辦法檢測出這個問題
希望大家還看得懂我在講什麼
不知道有沒有比較好的處理圖片標籤方案來討論一下
附上當年寫的 圖片無障礙設計測試
感謝指教
※最後更新時間:2019-08-26 17:43:35 From:211.23.21.202 By:特種兵