無障礙網頁檢測培訓課程

第七章 清單與圖片

清單

說明

我們可以用一張清單把屬於同一個族群的項目結合起來。

在清單中，可以是一般的文字、連結、按鈕或標題等，原則上，很多屬性都可以被放在清單當中。

所以這個屬性是一種輔助的項目，可以看成是一個容器。重點還是在於這些包在清單中的項目本身的無障礙狀況。

建議相同區塊的項目使用清單標籤將他們群組起來，有助於使用導讀軟體的使用者對於區塊的了解與定位。

操作

  1. 使用方向鍵可瀏覽清單項目，可駐點項目則可使用 tab 或 shift + tab 鍵來瀏覽
  2. 利用 NVDA 的單鍵瀏覽：
  3. 快速鍵 shift + , 回到清單的第一個項目
  4. 快速鍵 , 回離開清單

態樣

  1. 依據原本的屬性態樣為準
  2. 導讀軟體可朗讀清單相關資訊，如總項目數與編號等。
  3. 導讀軟體可朗讀清單狀態資訊，如進入或(方向鍵)離開清單等。
  4. 自動展開收合或手動操作之清單(擇一即可通過檢測)：

原碼範例

編號 1 數字排序
原碼
<span>本站遊戲列表</span>
<ol>
    <li>大富翁</li>
    <li><a href="#">打磚塊</a></li>
    <li><button>踩地雷</button></li>
</ol>
範例 1 數字排序
補充
  1. 在清單中可以是各種元素
  2. 注意一下 NVDA 會朗讀哪些與清單有關的提示文字
編號 2 符號排序
原碼
<span>本站遊戲列表</span>
<ul>
    <li>大富翁</li>
    <li><a href="#">打磚塊</a></li>
    <li><button>踩地雷</button></li>
</ul>
範例 2 符號排序
補充
  1. 在清單中可以是各種元素
  2. 注意一下 NVDA 會朗讀哪些與清單有關的提示文字

規範

  1. HM1130105E 使用語意組件來標記結構

實測

  1. 臺中醫院 選單的清單可手動展開與收合
  2. 高雄市兒童發展協會 選單的清單會自動開合

圖片

說明

如果只有文字資訊的網頁對明眼人來說實在太單調了。掛上圖片，不管是背景大圖、照片、小圖示等可以讓網頁更活潑生動，在網頁中是很常見的設計。

由於全盲的視障者暫時無法透過導讀軟體「看到」圖片或照片，因此補救的方法就是透過文字敘述，至少讓視障者了解該圖片或照片的意義。

原則上 LOGO,照片、圖片需要加上文字說明，背景圖與小圖示則可以對導讀軟體隱藏。

為了讓連結或按鈕更加生動，經常也會搭配圖片設計，讓整個頁面看起來不會被大量的文字資訊填滿。

現在很流行一種技術，也就是在網頁上提供各式各樣的大、小圖示給設計師使用，讓你的網頁可以使用這些圖示，就不用自己做圖或購買大量素材。

網頁設計師們喜歡用 i 的成對標籤配合 class 屬性來完成這項工作，當然你也必須將原圖的網址連結加在使用的網站當中。

你可以搭配 css 來控制這些圖示的大小位置。如果沒有引入相關 css 或 icon 等連結與設計，原本 i 這個標籤在 html 裡的意義只是讓文字變成斜體的作用而已。

操作

  1. 有意義之圖片可使用方向鍵瀏覽
  2. 利用 NVDA 的單鍵瀏覽 g 可跳至圖片

態樣

  1. 有意義之圖片需要有文字說明(替代文字)
  2. 無意義之圖片需要對導讀軟體隱藏
  3. 圖片連結需要有連結之態樣
  4. 圖片連結重複三次以上相同資訊則需要合併元素或將值留空
  5. 當圖片替代文字較多時，需使用其他方式處理，如長描述、另給連結或在附近區塊進行說明

原碼範例

編號 3 沒有說明文字的圖片
原碼
<img src="../images/link02.jpg">
範例 3 沒有說明文字的圖片
補充
  1. 有意義之圖片需要有替代文字說明
  2. firefox 會直接略過該圖片，chrome 會有「未標示的圖片」或「圖片內容似乎是…」的提示文字
編號 4 加上說明文字的圖片
原碼
<img src="../images/link02.jpg" alt="花蓮崇德海邊的風景">
範例 4 加上說明文字的圖片
補充
  1. 當沒有正確載入圖片時，明眼人才能看到 alt 替代文字
  2. 若在圖片使用 title 屬性，則 NVDA 圖片的單鍵瀏覽 g 可以讀取，但效力不及 alt，還是要以 alt 撰寫替代文字
  3. 關於圖片的 alt 與 title 屬性說明
編號 5 圖片連結
原碼
<a href="http://www.google.com.tw"><img src="../images/link02.jpg" alt="花蓮崇德海邊的風景"></a>
範例 5 圖片連結
補充

需要符合連結與圖片態樣

編號 6 圖片連結有連結文字
原碼
<a href="http://www.google.com.tw"><img src="../images/link02.jpg" alt="花蓮崇德海邊的風景"> google 首頁</a>
<div>
    <a href="http://www.google.com.tw">google 首頁<img src="../images/link02.jpg" alt="花蓮崇德海邊的風景"></a>
</div>
範例 6 圖片連結有連結文字
補充
  1. 使用左或右方向鍵逐字移動可以釐清哪些是圖片替代文字，哪些是連結本身的文字。(會有「離開圖片」的屬性提示)
  2. 使用 NVDA 圖片的單鍵瀏覽 g 只會抓取圖片的替代文字
編號 7 圖片連結的連結文字與圖片替代文字相同
原碼
<a href="http://www.google.com.tw"><img src="../images/link02.jpg" alt="花蓮崇德海邊的風景">花蓮崇德海邊的風景</a>
範例 7 圖片連結的連結文字與圖片替代文字相同
補充
  1. 當連結文字與圖片說明相同時，NVDA 並不會略過相同資訊
  2. 朗讀兩次相同資訊為可接受的範圍
編號 8 圖片連結朗讀三次相同資訊
原碼
<a title="花蓮崇德海邊的風景" href="http://www.google.com.tw"><img src="../images/link02.jpg" alt="花蓮崇德海邊的風景">花蓮崇德海邊的風景</a>
範例 8 圖片連結朗讀三次相同資訊
補充
  1. 朗讀三次以上資訊需要合併或處理，否則無法通過檢測
  2. 建議將 alt 留空，如下個範例
編號 9 改善圖片連結朗讀三次相同資訊
原碼
<a title="花蓮崇德海邊的風景" href="http://www.google.com.tw"><img src="../images/link02.jpg">花蓮崇德海邊的風景</a>
範例 9 改善圖片連結朗讀三次相同資訊
補充
  1. 將圖片的替代文字 alt 留空時，導讀軟體將該圖片連結視為純連結，故當連結文字與 title 屬性補充文字相同時僅會朗讀一次
  2. 因連結之說明文字為所有人皆可見，故建議將 alt 屬性留空為較佳之做法
編號 10 圖片說明不完整
原碼
<img src="../images/link05.png" alt="協會地圖">
範例 10 圖片說明不完整
補充
  1. 組織圖、地圖、樹狀圖等需要有更完整的說明文字
  2. 如照片一、照片二，風景一或風景二等皆為不良之提示文字，無法通過檢測，除非是群組圖片的圖片連結
編號 11 圖片說明雖然完整，但alt不能超過數十個字
原碼
<img src="../images/link05.png" alt="協會地圖：由於本會會址在敦化北路155巷76號上，因此我們以本會之建築物為核心說明附近之街道如下：東北邊有光復北路及其巷弄;東南邊有健康路及其巷弄;西邊有敦化北路">
範例 11 圖片說明雖然完整，但alt不能超過數十個字
補充
  1. 原則上超過50個字就太多了
  2. 應該使用其他方式呈現資訊，如對話框、連結等，見以下範例
編號 12 當圖片說明太長時的額外處理方式(連結)
原碼
<a href="http://wai.forblind.org.tw/ex/7-12-1.html" target="_blank" title="另開新視窗"><img src="../images/link05.png" alt="協會地圖"></a>
範例 12 當圖片說明太長時的額外處理方式(連結)
補充

做法有很多，只要別把太過冗長的說明文字通通放進 alt，並放於他處即可

編號 13 當圖片說明太長時的額外處理方式(同頁面)
原碼
<figure> 
    <img src="../images/link02.jpg" alt="柏油路"> 
    <figcaption> 
        <p>這是台北市某一條路的路面</p> 
        <p>透過照片來確認一下這是不是剛鋪好的柏油</p> 
    </figcaption> 
</figure>
範例 13 當圖片說明太長時的額外處理方式(同頁面)
補充

做法有很多，只要別把太過冗長的說明文字通通放進 alt，並放於他處即可

編號 14 當圖片說明太長時的額外處理方式(折疊)
原碼
<img src="../images/link02.jpg" alt="花蓮崇德海邊的風景" aria-details="det"> 
<details id="det"> 
    <summary>風景說明</summary> 
    <p>這是很多年前花蓮崇德的海邊，</p>
    <p>從火車站下車就可以走到海邊，</p>
    <p>繞過火車站的小路就是海邊，沒想到人造的車站離自然的海邊竟是如此的近。</p>
</details>
範例 14 當圖片說明太長時的額外處理方式(折疊)
補充
  1. 做法有很多，只要別把太過冗長的說明文字通通放進 alt，並放於他處即可
  2. details 標籤內說明文字亦可放入連結等屬性
編號 15 當圖片說明太長時的額外處理方式(長說明)
原碼
<img src="../images/link02.jpg" alt="崇德海邊的風景" longdesc="7-15-1.html">
範例 15 當圖片說明太長時的額外處理方式(長說明)
補充
  1. 做法有很多，只要別把太過冗長的說明文字通通放進 alt，並放於他處即可
  2. 實務上因為各瀏覽器與導讀軟體對於這個屬性的支援度不一，而且這是過時的語法，所以如果使用這個方案來處理有長描述的圖片會建議仍需搭配其他可以被支援的方案為佳
  3. 使用 NVDA + d 可讀取長描述，亦可直接按 enter 鍵。但 chrome 已棄用此語法(不支援)
編號 16 群組圖片只要第一張有完整說明即可
原碼
<img src="../images/flower01.jpg" alt="櫻花開花的照片共3張">
<img src="../images/flower02.jpg" alt="">
<img src="../images/flower03.jpg" alt="">
範例 16 群組圖片只要第一張有完整說明即可
補充
  1. 只要說明共有幾張圖片，圖片內容是什麼即可
  2. 當然，如果能夠每一張照片都仔細得說明，這是最好的，但實務上不容易
  3. 群組圖片是觀念與做法，並沒有規定要用什麼語法來將圖片群組起來
編號 17 讓導讀軟體忽略小圖示
原碼
<img src="../images/link06.jpg" alt="">
<a href="http://www.google.com.tw">google 首頁</a>
範例 17 讓導讀軟體忽略小圖示
補充
  1. 過往是建議在 alt 放星號，現在是建議直接留空，讓導讀軟體略過即可
  2. alt 留空與不加 alt 屬性是有差別的，機器檢測時，圖片一定要有 alt 屬性，而 chrome 若發現圖片有 alt 字樣就不會有之前提到的「未標明的圖片」提示
  3. 若 alt=" " 則 NVDA 還是會顯示圖片的屬性，但不會有任何替代文字

規範

  1. HM1110100E 圖片需要加上有意義、可代替圖片在文件上下文中的功能及內容的替代文字
  2. HM1110101E 僅在一組緊連圖片中的其中一個項目使用替代文字，描述該組圖片的所有項目
  3. HM1110102E 提供影像地圖區域的替代文字，並要能確實表達這些地圖區域的功能與目的
  4. HM1110103E 圖片無法以替代文字清晰表達時，利用長描述提供更詳盡的說明網頁網址，利用整個說明網頁的篇幅來詳盡描述，最後並要能連結回原本的圖片
  5. HM1110104E 提供字符圖案、表情符號、其他挪用文字外型作為表意功能之語言形式的替代文字，且其替代文字需有意義、可代替前述內容之目的與功能
  6. HM1110106E 作為「送出」按鈕之用的圖片需提供替代文字，且此替代文字需能充分表達此按鈕之意義與功能
  7. HM1110108E 提供物件的文字替代內容與非文字替代內容，且要能完整表達該物件的意義與功能
  8. HM1110112E 對於輔助科技應當要忽略的圖片，使用空字串作為替代文字，並且不可使用標題屬性
  9. HM1240402E 合併相同資源的毗鄰圖片與文字鏈結

實測

  1. 臺北市動物保護處 迎風狗公園 中央區塊所有圖片
  2. 臺北市動物保護處 組織架構圖
  3. 雲林縣崙背鄉殯葬宗教管理所_Logo 中央區塊所有圖片
  4. 新北客家文創產業館 中央區塊所有圖片
  5. 新北客家文創產業館 中央區塊所有圖片
  6. 新竹縣政府稅務局全球網 中央區塊所有圖片
  7. 衛生福利部臺中醫院 地圖的處理
  8. 麥當勞 菜單圖片
  9. 台北市中正區戶政事務所 組織架構圖
  10. 阿蕊仔食記 菜單與各圖片
  11. 義美 影像地圖的障礙範例
  12. 潮宇3C 各項圖片連結
  13. 裝備分享 神秘農場登頂包推薦照片設計，有多個南投合歡山合歡北峰為替代文字的照片
  14. eprice 有一個回應檔名的圖片連結

討論

  1. 圖片連結的問題是屬於圖片問題？還是連結問題？