什麼是A11y？入手HTML語義化和無障礙使用，建立更友善的網絡應用！

我對 HTML 語義化嘅了解係用有意義嘅外層標籤去取代沒有意義的 div 標籤，過多無意義嘅元素會令專案更加難去維護，所以使用語義化的 HTML 會令開發者的人生更容易。開發者嘅體驗固然重要，但係其實語義化有更加重要嘅用處，就係幫助有障礙的用戶能夠友好咁使用應用服務。

雖然知道有呢個用處，但係一直都無去了解點樣運作同實作。所以就趁呢個機會好好咁體驗一下有障礙用戶的不便，希望通過深切體驗去令到我之後開發更加留意呢啲細節。

A11y 是 Accessibility 的縮寫，11 的由來是因為在 A 和 y 中間有11個字符。A11y 在網頁開發中指的是能夠使網站讓所有人使用的，即使是有障礙人士也可以輕易地使用。

體驗痛點

正所謂夏蟲不可語冰，沒有體驗過難以閱讀的問題是不可能理解不能正常閱讀的使用者的痛點。在學習提升無障礙易用性前，我就想著先模擬體驗一下作為一個沒有視力的用戶是如何使用網絡應用的。這裡會使用的是Windows上完全開源，由 NV Access 開發的熒幕閱讀軟件 NVDA。

順帶一提，我有試過Google的 ChromeVox，但是實在是不容易使用，在網上找到的快捷鍵都使用不了，所以就轉用了NVDA。過程也試用了 iOS 上的 VoiceOver，使用上也是挺直觀的。

視障用戶是如何使用電腦的

他們可以使用熒幕閱讀器去瀏覽電腦上的內容，例如網頁應用、電腦軟體等。閱讀器會通過頁面上的文字，轉換成聲音閱讀出來。而使用者需要使用鍵盤等的外接設備去控制電腦應用，過程中閱讀器會像一個路標一樣，一直閱讀出當前的內容以及位置，給反應去指引使用者。

用網站頁面為例，閱讀器一般的流程會跟著源代碼的順序去導航閱讀，所以即使開發者使用了樣式去改變網頁元素的位置也好，閱讀器也只會跟著源碼文件的順序去閱讀。不過閱讀器也有一些熱鍵去方便使用者；例如跳到上下一個標題、按鈕、表單等的元素。這樣使用者就能夠直接跳過不感興趣的內容，然後關注在想要瀏覽的內容上。

體驗後感想

先分享感想，下面再介紹如何使用 NVDA。開始使用屏幕閱讀器時，需要熟悉不同的熱鍵去瀏覽網頁。而且由於沒有了滑鼠，要彌補的功能也變得更多，想要更方便去使用就要學習更多的熱鍵。不過其實只要多使用就能快速上手，但是即便操作熟悉了各種熱鍵，在瀏覽網頁的過程中都經常會感到迷茫。例如沒有描述相關內容的連結、圖片；有功能的按鈕或連結使用了普通的元素來創造，導致閱讀器無法選擇。等等的因素都會令使用者非常的困惑，所以我們開發者要去學習如何去提升有障礙用戶使用上的體驗。

使用NVDA

首先可以去官網下載NVDA的屏幕閱讀應用，以下是幾個我覺得會提升易用性的設定：

Settings -> Mouse -> 剔除 Enable mouse tracking；這樣閱讀器就不會一直閱讀鼠標當前懸浮的對象資料。
Settings -> Vision -> 選用 Enable Highlighting；選取後就可以看到當前閱讀的內容會有一個個方框框著。
Settings -> Browser Mode -> 把欄位 Maximum number of characters on one line 數值調成250個字元；因為原來的最大值只有100個字元，導致很多時候閱讀的過程中會中斷，要一直按鍵才能繼續，改了之後就不怕了突然中斷了。

以上圖片是啟動設定二後的效果，預設沒有任何網站預設樣式以外的視覺提示，有了框框後就不容易迷路了。

常用快捷鍵

這裡會分享一些過程中我很常用的快捷鍵，習慣了這些快捷鍵後就容易上手使用熒幕閱讀器了。主要分了軟件本身的操作按鍵與在網站上可以使用的按鍵。

Control + Alt + N : 關閉後開啟 NVDA
NVDA + Q : 關掉 NVDA
↓ : 閱讀下一行
NVDA + ↓ : 重新閱讀目前一行
Control : 停止目前的閱讀
NVDA + N : 打開設定頁面

下面的則是在網站上可使用的快捷鍵，直接使用會跳到下一個目標元素，而一併使用 Shift 就會回到上一個目標元素，下面的快捷鍵都是可以連 Shift 使用的。

Tab : 下一個可互動元素（按鈕、連結、輸入框）
Space / Enter ：與目前元素互動（點擊）
H : 下一個標題（h1、h2...）
D : 下一個地標
F : 下一個表單
T : 下一個表格
B : 下一個按鍵
K : 下一個連結
G : 下一張圖片

支援的快捷鍵還有很多，但是這些是我覺得是比較常用的。詳細的可以看這篇文檔。

閱讀器上的網頁內容

這裡會把在閱讀器上能夠聽見的網頁內容與資訊，用文字記錄在這裡。我會嘗試不同的HTML屬性去看閱讀內容的的不同之處。（閱讀器是使用我電腦預設的英語）

常見的網頁元素

常見的元素會有網頁標題、標題、文字、連結、按鈕、表單、表格等。在一般情況下，閱讀器會先閱讀元素的內容，如果元素是標題、連結、按鈕、列表的話，則會接著閱讀元素的種類。

網頁標題 - `<title>`

網頁標題是瀏覽器分頁上看到的標題，當使用者一載入到網站時，閱讀器第一時間閱讀的就是網站的標題。然後就是網站頁面上的其他元素。（按順序）

<title>Learn more on Accessibility | A11y, on KaLok's Blog</title>
# 閱讀內容：learn more on accessibility a11y on kalok's blog

文字標題 - `<h1>` - `<h6>`

文字標題是一個非常重要的元素，標題元素應該是要讓用戶能夠大概了解接下來會出現的內容，這樣才不會讓用戶使用上有困擾。值得注意的是，閱讀器閱讀標題的順序是按照源文件標題元素的順序，而不是標題級別的順序。

<h1>How title are interpreted by screen reader</h1>
# 閱讀內容：how title are interpreted by screen reader, heading level one

<h2>Title is way more important</h2>
# 閱讀內容：title is way more important, heading level two

文字段 - `<p>`

對於文字段，因為閱讀器只會直接閱讀標籤裡的內容，不會閱讀內容以外的資訊，所以就不做演示了。

連結 - `<a>`

有時候因為要顧及網站美觀的問題，我們不會選擇把連結的資訊放在連結的內容裡，因為視乎網站的樣式，很長的連結可能會很醜。

<a href="https://google.com">Read More</a>
# 閱讀內容：link, read more
# 如果已使用過連結，閱讀內容：visited link, read more

從上面可以看到，純連結元素並沒有提供任何有用的資訊，即使是要通往的連結也不會閱讀出來。當連結前後的文字段沒有描述連結是通往哪裡時，用戶則會很困惑。所以我們要加一些輔助資訊給這個連結，添加以下屬性：

<a href="https://apple.com/..." aria-label="to Order MacBook Pro 14 now">Order</a>
# 閱讀內容：link, to order macbook pro 14 now
# 如果已使用過連結，閱讀內容：visited link, to order macbook pro 14 now

當使用了屬性 aria-label 後，閱讀器會無視連結的內容，然後會讀出屬性的內容。那這樣我們就可以在保留網站美觀的前提下，提升使用者的體驗，讓使用者知道連結的資訊，在去選擇要不要點擊連結。

按鈕 - `<button>`

按鈕的效果基本上跟連結是一樣的，在閱讀器上他們閱讀的內容是一樣的，除了元素種類的改變。

<button onClick="fn()" aria-label="Display user image">Display</button>
# 閱讀內容：button, display user image
# 如果已使用過連結，閱讀內容：visited button, display user image

列表 - `<ul>` / `<ol>`

在瀏覽器預設中，列表元素的語法是正確的的話，閱讀器就能夠正確的閱讀出列表的資訊與每一項的內容，以及當前的一項是所有項中的第幾項。（閱讀器不會一次性閱讀整個列表，會按順序閱讀每一項，需要用戶按 ↓ 鍵去繼續。）

<ol>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>

# 閱讀內容：list with 3 items, one html
# 下一項：two css
# 下一項：three javascript

對於沒有排序的列表則會有一點點不一樣，因為預設的列表項目會有一個開頭符號，閱讀器會根據開頭符號來去閱讀，所以如果我們改了項目的樣式，就會有不一樣的效果。

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

# 閱讀內容：list with 3 items, bullet html
# 下一項：bullet css
# 下一項：bullet javascript

<ul style="list-style: square;">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

# 閱讀內容：list with 3 items, black square html
# 下一項：black square css
# 下一項：black square javascript

總結

上面提到的只是當中一部分容易上手的內容，如果想要為使用者提供更好的體驗則需要花更多的精神和心眼，學習如何從使用者的角度出發。先體驗使用者是如何使用屏幕閱讀器的，這樣更能讓我們開發者寫出更友善的應用。接下來有時間的話，希望可以再寫一篇關於 Aria 的筆記，更加深入了解這些屬性的用法。

參考資料

Accessibility | MDN Web Docs - https://developer.mozilla.org/en-US/docs/Web/Accessibility
How visually impaired people navigate the web - https://uxdesign.cc/how-visually-impaired-people-navigate-the-web-7f9eab9d9c37
Screen Reader Basics: NVDA -- A11ycasts #09 - https://www.youtube.com/watch?v=Jao3s_CwdRU&list=PLNYkxOF6rcICWx0C9LVWWVqvHlYJyqw7g&index=9
Headings that reflect the page organization | W3C - https://www.w3.org/WAI/tutorials/page-structure/headings/#headings-that-reflect-the-page-organization
The Top 5 Website Accessibility Failures - https://www.lrswebsolutions.com/Blog/Posts/97/Website-Accessibility/The-Top-5-Website-Accessibility-Failures/blog-post/#image
Disability: let’s say the word - https://www.a11yproject.com/posts/lets-say-the-word-disability/
Intro to ARIA -- A11ycasts #13 - https://www.youtube.com/watch?v=g9Qff0b-lHk
Introduction to WAI-ARIA - https://www.youtube.com/watch?v=-ZO3QVgs-sk
Stops reading midway through sentence - https://github.com/nvaccess/nvda/issues/9482