無障礙網頁檢測培訓課程

第一章 連結

連結

說明

連結可以說是網頁當中最常見的元素，透過連結，我們可以連到各個地方去。

操作

  1. 使用方向鍵或 tab 鍵讓焦點在連結上面時，可使用空白鍵或 enter 鍵點擊該連結。
  2. 物件瀏覽則使用 NVDA + 小鍵盤 enter 鍵進行點擊。
  3. 利用 NVDA 的單鍵瀏覽：連結是 k 可直接跳至連結上。

態樣

  1. 需要有連結說明文字(link text)來說明該連結之作用，說明文字必須有意義且易理解。
  2. 需使用 title 屬性補充連結說明，例如「另開新視窗」之設計(target="_blank")需提醒使用者即將離開原網站。
  3. 讓導讀軟體可朗讀「連結」屬性，點顯器會顯示「lnk」縮寫。
  4. 需能使用鍵盤瀏覽與點擊。
  5. 禁止在連結上使用按鍵觸發功能 (onkeypress, onkeydown, onkeyup, onblur, onfocus), 如此會讓導讀軟體瀏覽時不小心觸發其他功能。

原碼範例

編號 1 原始語法
原碼
<a></a>
範例 1 原始語法
補充

NVDA 視為該標籤為不完整之連結，故完全忽略。

編號 2 原始 + 連結說明
原碼
<a> google 首頁 </a>
範例 2 原始 + 連結說明
補充

NVDA 將他當成純文字來顯示，因為沒有網址屬性 href。

編號 3 基本
原碼
<a href="http://www.google.com.tw"> google 首頁 </a>
範例 3 基本
補充

NVDA 正常顯示連結屬性與連結文字，並可順利點擊。

編號 4 利用 js 產生連結之網址
原碼
<a onClick="link()"> google 首頁 </a>
<script>
 function link()
 {
  location.href = "http://www.google.com.tw";
  //location = "http://www.google.com.tw";
  //window.location = "http://www.google.com.tw";  
  //window.location.assign("http://www.google.com.tw");    
  //window.location.replace("http://www.google.com.tw");      
 }
</script>
範例 4 利用 js 產生連結之網址
補充

使用 NVDA 搭配 tab 鍵瀏覽時將會跳過該連結，需加入 href="#" 屬性讓連結標籤擁有完整語法。

編號 5 基本 + title 屬性
原碼
<a href="http://www.google.com.tw" target="_blank" title="另開新視窗"> google 首頁 </a>
範例 5 基本 + title屬性
補充
  1. 若將滑鼠移至該連結，則連結下方會顯示 title 屬性內之文字。
  2. 當 NVDA 使用 NVDA + 小鍵盤數字 5、NVDA + tab 鍵或 tab 鍵皆無法朗讀 title 屬性內之文字時，請核取以下項目：
  3. NVDA 在 ie 瀏覽器下，使用 tab 鍵瀏覽時無法直接朗讀 title 屬性內之文字，只能利用 NVDA + 九宮格數字 5 或 nvda + tab 鍵朗讀物件或焦點得知。
  4. 亦可直接將「另開新視窗」之提示放於連結說明，但通常因版面考量，多半會放於 title 屬性內。
  5. 使用 NVDA 搭配方向鍵無法朗讀 title 屬性內之文字。
  6. 使用點顯器，必須將 NVDA 切換為焦點模式才能看到 title 屬性內之文字。
  7. ios 系統對於語系設定較敏感，若設定成非中文時就無法朗讀 title 屬性為中文之文字。
編號 6 將 title 屬性改成 aria-label 屬性
原碼
<a href="http://www.google.com.tw" aria-label="另開新視窗"> google 首頁 </a>
範例 6 將 title 屬性改成 aria-label 屬性
補充
  1. 若設計者連滑鼠移到連結都不想顯示「另開新視窗」之提示文字，可以這樣做，但不符合 NCC 無障礙規範(連結要加 title)。
  2. aria-label 屬性的優先權通常最高且有排他性，當 NVDA 發現該屬性將直接朗讀且忽略原有連結之說明文字。
  3. aria-label 的有效性很強，連使用方向鍵都有作用。
編號 7 將連結說明也加入 aria-label 屬性中
原碼
<a href="http://www.google.com.tw" aria-label="google 首頁 (另開新視窗)"> google 首頁 </a>
範例 7 將連結說明也加入 aria-label 屬性中
補充

雖然 NVDA 可以正確朗讀並操作，但此設計方式不符合 NCC 無障礙規範(連結要加title)。

編號 8 加太多類似屬性可能導致重複朗讀相同訊息的困擾或互相衝突而不發生作用
原碼
<a href="http://www.google.com.tw" title="另開新視窗" aria-label="google 首頁 (另開新視窗)"> google 首頁 </a>
範例 8 加太多類似屬性可能導致重複朗讀相同訊息的困擾或互相衝突而不發生作用
補充
  1. 該案例中，NVDA 會先朗讀 aria-label 再朗讀 title 造成資訊重複的反效果。
  2. 應了解每個屬性之特性，並實際以導讀軟體測試才能得到最佳設計方式。
編號 9 使用 role 屬性將按鈕改為連結
原碼
<button title="另開新視窗" role="link">原來為按鈕</button>
範例 9 使用 role 屬性將按鈕改為連結
補充
  1. NVDA 將以 role 角色為主，並且完全擁有該角色之特性。
  2. title 屬性在按鈕原本就有作用。
編號 10 沒有連結說明的連結
原碼
<a href="http://www.google.com.tw" title="另開新視窗" aria-label="google 首頁 (另開新視窗)"></a>
範例 10 沒有連結說明的連結
補充
  1. 沒有連結說明的純連結，將被 NVDA 視為不完整連結而忽略，此時不管加什麼補充屬性都沒作用，但 android + chrome 可正確朗讀。
  2. 但圖片連結，有圖片替代文字例外。
編號 11 定位點快速鍵之設計也是連結的一種
原碼
<a accesskey="C" href="#" title="中央區塊">:::</a>
範例 11 定位點快速鍵之設計也是連結的一種
補充
  1. NCC 於 2017 年底決議，不強制顯示三個冒號，且若網頁本身有清楚層級架構與定位方式，則不強制使用 accesskey 設計。
  2. 定位點雖為連結，但不可讓其連至任何網頁。
編號 12 錨點設計
原碼
<div id="go">我是 go</div>
<div><a href="#go"> 回到 go </a></div>
範例 12 錨點設計
補充
  1. 通常用於網頁下方「回頂端」或網頁上方「跳至主要內容」功能。
  2. 使用空白鍵或 enter 鍵點擊「回到 go」連結，會將焦點拉至「我是 go」，但並非每個標籤都能當錨點，例如 span 就無效。
編號 13 title 屬性內容與連結說明相同
原碼
<a href="http://www.google.com.tw" title="google 首頁"> google 首頁 </a>
範例 13 title 屬性內容與連結說明相同
補充
  1. 當 title 屬性內之文字與連結本身之說明文字完全相同時，NVDA 搭配 firefox 或 chrome 僅會朗讀一次訊息，舊版 chrome 則會重複朗讀，大家也可以測試看看手機的瀏覽器實做狀況。
  2. 理論上利用 title 屬性補充連結目的應與連結說明不同才是較佳之設計，本例旨在測試重複朗讀情形而已。

規範

  1. GN1240401E 針對脈絡中的鏈結，提供描述鏈結目的的鏈結文字
  2. HM1240402E 合併相同資源的毗鄰圖片與文字鏈結
  3. HM1240404E 針對脈絡中的鏈結，用標題屬性來補充鏈結文字
  4. GN3320501E 在使用者請求的情況下才開出新視窗，並在鏈結文字中指出此行為
  5. GN1210100E 提供由鍵盤觸發的事件處理程式
  6. GN1210101E 確認所有功能都能透過鍵盤介面來操作
  7. GN3210300E 僅提供由鍵盤觸發的事件處理程式

實測

  1. 氣象局 連結說明為「看更多」
  2. 華碩官方支援 更多連結設計
  3. 渣打個人網銀 沒有連結說明的連結
  4. NVDA台灣 手動展開與自動收合選單
  5. 內政部空中勤務總隊 選單只能用滑鼠展開
  6. 雲林縣斗南鎮公所 使用 tab 鍵或方向鍵會自動彈出次選單
  7. 自由時報 自由廣場會議中心連結未標明另開新視窗
  8. Get add-ons to enhance NVDA 連到其他網站需不需要另開新視窗
  9. 臺北榮民總醫院 連結的提示文字只有 a、a+、a- 而已
  10. momo購物網 結帳連結無法使用 tab 鍵到達