Accessability 項目初試

時間 2019-11-07

標籤 accessability 項目初試简体版

原文原文鏈接

Accessability(A11Y)

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

Visual 考慮色弱視弱

避免使用顏色傳遞信息
確保文字大小用戶能夠調節，帶有信息的元素需加上aria標籤，這樣用戶能夠在屏幕讀取器的幫助下獲取信息瀏覽器

Hearing 考慮聽覺障礙

之帶用音頻傳遞信息的元素，須要加上文字信息
確保用戶在不使用音頻的狀況，也能獲取相同信息iphone

Mobility 考慮視力障礙無鼠標操做

用戶能夠在不使用鼠標，屏幕的狀況下，僅憑鍵盤也能完成在頁面上移動
僅鍵盤完成整個頁面的瀏覽操做
若是任何一個動做必須使用到鼠標，即爲不合理設計
全部的可編輯區域須要按序排列，確保tab鍵能夠所有鍵入
合理設計鍵盤快捷鍵幫助用戶快速移動ide

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)google

// 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>

確保校驗信息設計合理，好比有的驗證碼信息沒法被屏幕讀取器讀取spa

其餘經常使用的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>