實作無障礙網頁功能：超連結還能怎樣無障礙呢？

第 11 屆 iThome 鐵人賽

DAY 17

Modern Web

實踐無障礙網頁設計（Web Accessibility）系列第 17 篇

11th鐵人賽好想工作室無障礙 accessibility a11y

Askie Lin

團隊好想工作室 v3.0

2019-10-02 20:57:52

4635 瀏覽

分享至

這系列無障礙的鐵人賽文章，實踐的內容主要是根據 W3C：WAI-ARIA 的實踐，從設計模式及組件（Design Patterns and Widgets）裡面挑選最想嘗試的，如果有朋友想瞭解全部 Widget 該怎麼實作及其規範，歡迎自行爬規範內容，也許我們可以討論一下；若以下文章內容理解有任何錯誤，請多指教～

連結 Link（打開文件）

3.13 Link
A link widget provides an interactive reference to a resource. The target resource can be either external or local, i.e., either outside or within the current page or application.

今天挑選的設計模式是「超連結」。

超連結 <a>，就是網頁的必備元素與日常啊！

你覺得你熟悉超連結了嗎？

在開始看相關資訊前，我以為超連結就只是個再簡單不過的標籤：

<a href="/more">閱讀更多</a>

啊！對，它就是一個標籤沒錯，我在講幹話，可是它還有什麼作為開發者需要知道的重要資訊呢？

複習一下

a 是 anchor 錨點的意思，使用 <a> 的目的是「通往其他頁面、檔案、Email 地址、或其他 URL」。
必須有「開始標籤 <a> 」與「結束標籤 </a>」。
必須有 href 屬性，值就是你的目的地，來源的 URL 路徑，可以是同一個頁面中的某個位置，要這樣寫 href="#某元素id"。而且 <a> 標籤在有 href 屬性時，CSS 在 :hover 時才會有 cursor: pointer 的效果唷！
在標籤中放入超連結的內容，可以是文字或是圖片。

額外補充的：

title 屬性通常會放置描述性的訊息，在使用者用滑鼠移到元素上時，才會有 Tooltip Text 的效果呈現，這在使用上有點雞肋，因為它提供的訊息內容如果夠重要，就該被所有人都能獲取，可是它不受螢幕閱讀器及手機的支援，也就是說對於使用者來說很冗餘，不建議與 <a> 搭配使用，平常也不建議使用。詳請請參考 HTML 5.1 - title 屬性。
不能巢狀，不要這樣做： <a><a> ... </a></a>。

什麼時候改用 `<button>`？

不需要「通往其他頁面、檔案、Email 地址、或其他 URL」時，透過 onclick 觸發一些功能或是同一個畫面上的改動，比如說：開啟選單（Menu）或是頁籤切換（Tab）。

超連結：跟開發沒直接關係，卻有直接影響的地方？

這將影響到有沒有人開心使用產品。

1. 點選範圍或觸控範圍

（圖片來源：Smashing Magazine）

成功準則 2.5.5: Target Size
Equivalent targets: If there is more than one target on a screen that performs the same action, only one of the targets need to meet the target size of 44 by 44 CSS pixels.

超連結點選的觸控區如果做得太小，無論是使用電腦或是手機瀏覽時，都不容易點擊到目標，有些元素太靠近也容易誤觸，因為我們的指尖範圍通常會比超連結大很多，使用者需要非常仔細才能完成任務，若以生活情境來比喻，就像是「穿針引線」需要花費較集中的精力。

Apple 的 Human Interface Guidelines 建議介面上所有可產生互動的元素，觸控區域 44pt x 44pt。
Google Developers 則是建議超連結觸控範圍至少要 48px x 48px。

2. 撰寫有用的超連結內容

如果你的超連結內容是文字，請寫具有指示性的文字。

引用 A11Y Project 的範例：

[範例一] 不要只叫我「點」，跟我說一下預期點下去能看到什麼內容。

<!-- bad -->
To see our documentation <a href="/README.md">click here</a>.

<!-- better -->
We have made our <a href="/README.md">documentation</a> available.

[範例二] 不要只叫我「讀」，同上，不然如果點進去跟預期不符，不是很煩躁嗎？（我就是這麼煩躁沒錯，哈哈哈最煩的使用者，所以很能體會。）

<!-- bad -->
<a href="/full-article">Read more</a>.

<!-- better -->
<a href="/full-article">Read more - Accessible Landmarks</a>

3. 超連結，就是要用 `<a>` 標籤

ARIA 是拿來做語義的補充，在我們已經有可以使用的標籤 <a>，它已經有 link 的語義，直接使用即可，否則是一個 Bad Practice。

<!-- 不要這樣使用，很多舊螢幕閱讀器不支援 role="link" -->
<span class="link" onclick="..." role="link">
  Askie
</span>

鍵盤的可訪問性

Enter
- 移動到目標連結頁面或是目標定位點。
Shift + F10
- （選擇性）在超連結上開啟右鍵選單。

Roles、States、Properties

超連結可以容納文字或圖像，超連結本身必須具有 link 的角色。

實踐開始囉！

今天想引用 WAI-ARIA Practice 1.1 的範例，發現範例不是實作的好做法，可是讓人知道原來如果不用 <a>，儘管還是可以有超連結的功能，卻還是有需多要注意的地方。

希望能做到：

[x] 支援螢幕閱讀器
[x] 可使用鍵盤操作
[x] 呈現多種超連結呈現方式

真 `<a>` 標籤，建議實作作法

<a class="article-link" aria-label="Go to Askie's Blog" href="https://askiebaby.github.io/">
  <!-- 當內容放在偽元素時 -->
</a>

<a> 使用 aria-label 加上名稱，作為超連結的內容。

真 `<a>` 標籤，實作可行作法二

<a class="article-link" href="https://askiebaby.github.io/">
  <img src="logo.svg" alt="" />
  <span class="visually-hidden">Go to Askie's Blog</span>
</a>

以下是官方範例。

官方範例：直接以「 `<span>` 」作為超連結（實作不建議）

<span tabindex="0"
      role="link"
      onclick="goToLink(event, 'https://askiebaby.github.io/')"
      onkeydown="goToLink(event, 'https://askiebaby.github.io/')">
  前往 Askie 的部落格
</span>

tabindex=0 讓鍵盤可獲取焦點。
role="link" 為標籤增添連結語義。
透過 JavaScript 做超連結導向。

官方範例：直接以「圖片 `<img>`」作為超連結（實作不建議）

<img tabindex="0"
     role="link"
     onclick="goToLink(event, 'https://askiebaby.github.io/')"
     onkeydown="goToLink(event, 'https://askiebaby.github.io/')"
     src="https://askiebaby.github.io/assets/askiebaby.svg"
     alt="前往 Askie 的部落格">

tabindex=0 讓鍵盤可獲取焦點。
role="link" 為標籤增添連結語義。
透過 JavaScript 做超連結導向。
<img> 使用 alt 替代文字來描述行為，作為螢幕閱讀器的內容。

官方範例：當超連結內容是「偽元素」（實作不建議）

<span tabindex="0"
      role="link"
      class="link3"
      onclick="goToLink(event, 'https://askiebaby.github.io/')"
      onkeydown="goToLink(event, 'https://askiebaby.github.io/')"
      aria-label="前往 Askie 的部落格"></span>