iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 17
0

這系列無障礙的鐵人賽文章,實踐的內容主要是根據 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.

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

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

codepen 在這裏,快來使用鍵盤操作看看吧,全部都擁有超連結的行為!


Reference


上一篇
實作無障礙網頁功能:真・button —— RWD 漢堡選單應用
下一篇
實作無障礙網頁功能:輪播圖 Carousel
系列文
實踐無障礙網頁設計(Web Accessibility)30

尚未有邦友留言

立即登入留言