Accessability(A11Y)

最近在給一個專案做移入開發環境之前的收尾工作，其中一項就是無障礙設計測試。公司內部有專業的無障礙設計把控人員，但是基本的常識還是零零總總需要學一些，看了一些資料總結了基礎的一些需要知識點。

Visual 考慮色弱視弱

避免使用顏色傳遞資訊
確保文字大小使用者可以調節，帶有資訊的元素需加上aria標籤，這樣使用者可以在螢幕讀取器的幫助下獲取資訊

Hearing 考慮聽覺障礙

之帶用音訊傳遞資訊的元素，需要加上文字資訊
確保使用者在不使用音訊的情況，也能獲取相同資訊

Mobility 考慮視力障礙無滑鼠操作

使用者可以在不使用滑鼠，螢幕的情況下，僅憑鍵盤也能完成在頁面上移動
僅鍵盤完成整個頁面的瀏覽操作
如果任何一個動作必須使用到滑鼠，即為不合理設計
所有的可編輯區域需要按序排列，確保tab鍵可以全部鍵入
合理設計鍵盤快捷鍵幫助使用者快速移動

Congnition 考慮各種協助工具接入

應用需能在使用螢幕讀取器等協助工具下正常運作
避免使用螢幕閃爍等設計
避免使用基於時間的設計（因為有的協助工具需要花更長的時間讀取螢幕資訊）

如何判斷應用是否accessible？

Visual

高對比度模式下，也能方便地讀取資訊
非文字資訊有文字資訊為輔
使用螢幕讀取器時，能正常瀏覽獲取資訊
黑白顯示下，也能正常讀取資訊

• <a>標籤
  a) 是否使用下劃線（方便色盲色弱人士區分）
  b) <a>標籤提示資訊是否合理

（例如，有的標籤使用’點選這裡’，在一屏有多個’點選這裡’的情況下，使用者無法判斷各標籤分別跳轉到哪裡）

• 在僅使用鍵盤操作的情況下，也能正常使用應用
  例如 input,checkbox 等是否能被選中
• 所有的功能都能通過鍵盤進行互動
• 如果有 blur 的需求，需新增鍵盤操作進行實現
• 不要使用 tab-index > 0
  -1: script 使用 focus
  0: 允許使用者 focus
• 如果有元素使用了ellipses, 需要提供鍵盤操作能讀取 ellipses的資訊
• focus 操作需要明確focus到了哪個元素
• 需支援其他字型
  有的協助工具會改變字型幫助使用者閱讀，確保在字型更改的情況下也能正常使用應用

Hearing:

• 去掉所有聲音，也能正常使用

Mobility

• 去掉滑鼠，觸屏等工具，僅憑鍵盤也能正常使用

Cognition

• 帶有基於時間的元素，是否能被暫停，放緩？

Angular A11Y設計

button

按鈕儘量使用 button 標籤，避免用 img, div, span 等標籤做按鈕 (button標籤自帶可點選，tab, focus等功能，且在螢幕讀取器使用時讀取按鈕內容)
如果需要使用非 button 的標籤做按鈕，加入 role =”button” 屬性

Forms

表單使用 form 標籤 （自帶enter鍵鍵入表單的功能）
input 使用aria-label與placeholder （螢幕讀取器讀取aria-label）
input 與label一起使用 (螢幕讀取器可以根據label直接計算出Input name)

// best practice 1
<input id="check" type-"checkbox" checked>
<label for="check">input name</label>

//best practive 2
<label>
<input type="checkbox" checked> input name
</label>

其他常用的aria屬性
aria-describedby
aria-label
aria-labelledby
aria-disabled
aria-hidden

tab排序標籤
tabindex

<a href="https://www.w3schools.com/" tabindex="2">W3Schools</a>
<a href="http://www.google.com/" tabindex="1">Google</a>
<a href="http://www.microsoft.com/" tabindex="3">Microsoft</a>