Link

Demo 與 Accessibility Tree

想知道更多細節，可以讀APG 的 Link Pattern。

用 div 加 role=link 做出來的連結

Accessibility Tree

觀察對象：原生的文字連結。

元素目前不在無障礙樹中。

Accessibility Tree

觀察對象：只有圖像的連結。

元素目前不在無障礙樹中。

Accessibility Tree

觀察對象：用 div 做出來的連結。

元素目前不在無障礙樹中。

按鍵	行為
`Enter`	啟動連結並前往目標。原生 <a href> 免費取得；用 div 加 role=link 的那一種要自己補 keydown，而且得同時處理 Enter 與點擊。
`Tab`	移入與移出連結。有 href 的連結自動在 Tab 順序裡；沒有 href 的 <a> 不可聚焦，div 版則要自己補 tabindex=0。

屬性	值	用途
`role`	`link`	<a href> 的隱含角色就是 link，不需要明寫。沒有 href 的 <a> 隱含角色是 generic —— 那種情況下角色、焦點、鍵盤三件事都得自己補，不如改用 <button>。
`href`	`目標網址`	它不只是導覽，還一次決定了角色與可聚焦性。少了它，連結在無障礙樹裡不再是連結。
`aria-label`	`在 LinkedIn 上追蹤我們`	只有圖像的連結沒有文字可當名稱。名稱要說出目的地，不是描述圖案 —— 「LinkedIn 圖示」說不出按下去會去哪裡。
`aria-hidden`	`true`	圖示是純視覺，名稱已由 aria-label 提供。少了它，有些螢幕閱讀器會把圖示的檔名或路徑一起唸出來。