不支持 Accessibility 的前端開源 UI 組件庫，就是災(zāi)難。--來自某知乎用戶

Semi Design 開源以來受到了廣泛的關(guān)注以及業(yè)內(nèi)人士的積極評論，其中這一條評論引起了我們的關(guān)注。

根據(jù)第六次全國人口普查我國總?cè)丝跀?shù)，及第二次全國殘疾人抽樣調(diào)查我國殘疾人占全國總?cè)丝诘谋壤透黝悮埣踩苏細埣踩丝側(cè)藬?shù)的比例，推算2010年末我國殘疾人總?cè)藬?shù)8502萬人，其中視障用戶約為1263萬人。這個數(shù)據(jù)意味著如果沒有將無障礙設(shè)計視為設(shè)計系統(tǒng)的一部分，那么我們的設(shè)計系統(tǒng)可能將這一個大數(shù)量的群體排除在外。

作為設(shè)計師，我們有責任也有義務(wù)讓每一個人都能夠輕松的訪問我們所創(chuàng)造的產(chǎn)品。因此，Semi 成立了 A11y 專項，致力消除障礙并創(chuàng)造適合所有人的包容性產(chǎn)品體驗。

什么是 A11y ？

A11y 是 Accessibility 的縮寫，即無障礙設(shè)計。雖然無障礙設(shè)計廣泛意義上被認為是為殘障人士服務(wù)，但其實是為了所有人提供同等的體驗。因為我們每一個人都可能會存在殘障時刻。比如說：做了近視眼手術(shù)，暫時性無法使用眼睛??。再比如，當強光照射時，看不清楚事物，這種就是情景性殘障。

障礙類型圖（圖片來源：Microsoft Inclusive Design）

因此，無障礙設(shè)計最終的目的是為了讓所有無論背景、能力、情況的人都能享受網(wǎng)絡(luò)。這里補充一個冷知識：每年11月的第二個星期四是世界可用性日，世界各地都會舉辦活動，將不同的社區(qū)聚集在一起，慶祝各界人士是如何讓我們的世界變得對所有人都輕松的。

了解了什么是 A11y，那么接下來我們應(yīng)該怎么做呢？

了解用戶需求

要設(shè)計開發(fā)包容性產(chǎn)品，首先需要了解不同用戶的不同需求并考慮他們使用的輔助工具和方法。目前主要的障礙類型是視覺障礙、聽覺障礙、肢體障礙和認知障礙，下面我們就簡單介紹下各個障礙類型的使用產(chǎn)品的特點。

???? 視覺障礙

視覺障礙人群里又有三個分類：盲人、低視力人群以及色盲。其中色盲用戶和低視力人群在訪問網(wǎng)站時遇到的障礙類似。大家可以通過 Coblis —色盲模擬器來查看有色覺缺陷的人群眼中的世界。

盲人用戶依賴屏幕閱讀器訪問網(wǎng)站，通常他們會通過瀏覽特定元素（如標題、鏈接或表單元素）來導航頁面。同時需要注意的是，這類用戶一般不使用鼠標，通常使用特制的鍵盤來訪問網(wǎng)站。

低視力用戶根據(jù)其視力障礙的性質(zhì)不同有不同的需求。有些用戶在沒有放大情況下無法區(qū)分文本或其他內(nèi)容，尤其是小文本；有些用戶難以區(qū)分低色彩對比度的文本和圖像；有些用戶可能分不清色彩（色盲用戶遇到是同樣的問題）。這些用戶通常會使用屏幕放大器、對比度增強或顏色反轉(zhuǎn)軟件以及屏幕閱讀器等輔助工具來訪問網(wǎng)站。

??♀? 聽覺障礙

聽障用戶借助助聽器或者人工耳蝸等科技產(chǎn)品就能如常訪問網(wǎng)站。因此相對其他障礙類型的用戶，無障礙設(shè)計對于聽障用戶關(guān)照不大，但需要注意的是當我們使用視頻等媒體工具時，應(yīng)當為視頻添加字幕來改善聽障用戶的訪問體驗，并且字幕對一些非母語用戶也會有一定的幫助。

其次，我們也需要避免無必要的自動播放，同時讓用戶可以選擇關(guān)閉聲音來屏蔽干擾。

???? 肢體障礙

用戶摔壞了鼠標或者摔壞了胳膊的時候，還有一些患有慢性疾病的人，例如重復性壓力損傷 (RSI)，應(yīng)該限制或避免使用鼠標。

這些用戶訪問網(wǎng)站時，僅依賴鍵盤，用戶通過 Tab 鍵及其他按鍵在各個可交互元素之間移動。

?? 認知障礙

有認知障礙的用戶，難以專注于長篇密集的文本，無法理解復雜的結(jié)構(gòu)。

密集的文本（圖片來源：W3C）

痛苦閱讀的用戶（圖片來源：W3C）

實施

了解用戶的需求之后，接下來就是實踐部分了。我們閱讀了 WCAG 指南后，決定從以下幾個部分來完成 Semi Design 的 A11y 。

?? 顏色

1、對比度

對比度是可訪問性中一個非常重要的指標。高對比度使視覺元素從背景中脫穎而出，更加引人注目。我們這里說到的對比度主要是指文字元素的對比和組件層面的對比。

1.1 文字元素對比

根據(jù) WCAG 建議閾值：文本元素的文本和背景顏色之間的對比度至少應(yīng)達到 4.5:1（包含組件內(nèi)的文本），對于 18px 或更大的文本對比度可以降至 3:1，但對于禁用文本可以不受對比度要求的限制。

1.2 組件狀態(tài)和對比

所有可以操作的組件都需要有一個焦點狀態(tài)（focus）。組件的 active、hover、focus 狀態(tài)都需要滿足與相鄰顏色 3:1 的對比度要求。但不同狀態(tài)之間沒有對比度要求。

對于有描邊的組件，只需滿足描邊顏色與底色的 3:1 對比即可。填充色與描邊色之間不要求對比度。

1.3 例外情況

對于一些主要以閱讀為主的組件通過屏幕閱讀器就能讓殘障用戶得到很好的訪問了，如：Message、Banner 等，因此可以不用嚴格按照 AA 標準。但為了確?？刹僮餍?，組件內(nèi)的可操作項還是需要滿足對比度要求。

1.4 A11y 主題包及相關(guān)插件推薦

為了更好的支持無障礙，我們上線了A11y 主題包。這里需要注意的是橙色這一色相的對比度在 WACG 2.0 的標準中，一直是一個老大難的問題。因為任何含有超過 50％黃色的顏色都會自然反射更多的光。大家在考慮無障礙場景時需要謹慎使用黃色、橙色、綠色和藍綠色這類高風險顏色。

由于我們支持切換主題，為了確保切換主題時的顏色可以被兜底，本期上線的這個主題包并沒有去掉橙色色相。且該主題主要針對解決的是 A11y 中的顏色對比度問題。

主題商店插圖

深色模式時，也需要注意避免使用純黑色作為主要的背景顏色。這是因為當你將白色文字置于純黑色背景上時可能會產(chǎn)生光暈效應(yīng)，導致用戶閱讀壓力加大。在大文本或用戶患有散光時，這種壓力會尤為突出。

因此，雖然純黑色的對比高很高，但 Semi Dark 模式下的 bg-0 和 text-0，是深灰色背景下的淺灰文本，在保證對比度的前提下也消除了閱讀壓力。

光暈效應(yīng)：光的傳播超出其適當邊界，在明亮圖像的邊緣周圍形成霧所引起的效果

除了 A11y 主題包之外，也推薦視障用戶使用 Chrome 插件 -- 高對比度模式來訪問網(wǎng)站。這個插件提供了增加對比度、灰度、反轉(zhuǎn)顏色等多種模式，滿足各類視障用戶的需求。

2、不要使用顏色作為唯一的視覺提示

當你在傳達重要信息、反饋提示時，不要將顏色作為傳遞信息的唯一途徑。低視力用戶或者色盲用戶可能很難理解你想要表達的內(nèi)容。

嘗試使用添加圖標、文本、下劃線等，以確保所有人群都能收到相同的信息。典型例子就是 Form 的報錯文本提示。

Form 報錯信息

還有就是可以通過在圖表中添加紋理及標簽來表達差異，當然紋理對于常規(guī)的數(shù)據(jù)分析師來說增加了干擾項，不符合數(shù)分規(guī)范，但就無障礙而言卻是合理的。

?? 鍵盤和焦點

鍵盤的可訪問性是無障礙設(shè)計中最核心的一部分，有運動障礙的用戶、盲人用戶，以及一些有特殊操作習慣的用戶都依賴鍵盤來導航和訪問網(wǎng)站。

1、鍵盤快捷鍵

這類用戶可以通過一些鍵盤快捷鍵來實現(xiàn)瀏覽網(wǎng)站：

Tab 鍵切換焦點：Tab 鍵順序應(yīng)遵循可預測的順序?qū)哟谓Y(jié)構(gòu)，如：從上到下，從左到右。一些關(guān)鍵元素被獲取焦點時，應(yīng)當顯示該元素的提示信息；失去焦點后，提示消失；

箭頭：在相關(guān)的單選按鈕、菜單項或小部件項之間導航；

Enter：激活按鈕，提交表單等；

空格： 激活按鈕，選中開關(guān)等；

Esc ：退出各類彈層；

2、焦點

用鍵盤 Tab 鍵來瀏覽網(wǎng)頁上的可交互元素最重要的一個點就是元素的焦點狀態(tài)，因為焦點狀態(tài)能讓鍵盤用戶知道焦點當前在哪里。因此 Semi Design 為每一個可交互組件設(shè)計了 foucs 狀態(tài)。同時為了確保純鍵盤用戶可以同普通用戶一樣的瀏覽體驗。

Semi 組件的焦點需要遵循一下原則：

初始焦點：為了使用戶能夠有效地完成任務(wù)，請始終為任務(wù)設(shè)置初始焦點。焦點切換時，如果當前焦點控件被覆蓋，焦點需要自動切換到新頁面的第一個焦點區(qū)域。初始焦點設(shè)置時，需要注意：

初始焦點一般設(shè)置為任務(wù)中的第一個邏輯交互元素或第一個元素；
當這個任務(wù)包含了一個不可逆轉(zhuǎn)過程的最后一個步驟，比如：刪除數(shù)據(jù)等，那么這個初始焦點最好放在破壞性最小的可交互元素上，如：關(guān)閉按鈕；
若任務(wù)為閱讀任務(wù)或繼續(xù)處理任務(wù)時，建議將初始焦點設(shè)置在最可能常用的交互元素上，如：確定按鈕。

導航可逆：用戶通過 Tab 鍵切換到下一個焦點，就一定可以通過 Shift + Tab 切換會上一個焦點；

可返回：如果當前聚焦的元素消失，焦點狀態(tài)應(yīng)始終返回到之前的位置。例如，關(guān)閉模態(tài)可能意味著您的焦點在關(guān)閉按鈕上；當模態(tài)關(guān)閉時，您應(yīng)該將焦點返回到打開模態(tài)的按鈕。

3、示例

Semi 每一個組件都提供了詳細的鍵盤和焦點的說明，大家可以去 Semi 站點詳細體驗（目前部分組件尚在施工中??），下面是 Popconfirm 鍵盤交互的示例：

?? 語義化

雖然原生元素具有瀏覽器內(nèi)置的語義信息，比如：button 自帶 role 為 button。但對于自定義組件，Semi 為它們使用了 ARIA（Accessible Rich Internet Applications）來添加語義信息，幫助屏幕閱讀器用戶更好與組件進行交互。

ARIA 能夠?qū)崿F(xiàn)以下輔助功能：

讓用戶知道當前元素是啥，當前元素是干什么的；

當前元素是啥狀態(tài)，是否可以選擇，是否禁用，是否有彈出層等；

當前我處于列表的第幾項，總共有幾項等。

Semi 組件實現(xiàn)了全面語義化，再結(jié)合鍵盤交互，讓障礙人群能夠更加順暢絲滑的訪問網(wǎng)站。

?? 媒體

1、圖片的替代文本

低視力人群依靠屏幕閱讀來訪問網(wǎng)站。若不對圖片進行處理，屏幕閱讀器閱讀到圖片時，視障用戶只能聽到這里有一個圖片，但是不能知道這個圖片具體表達的信息。甚至可能聽到是這個圖片的文件名稱。

為了避免上述情況的發(fā)生，我們?yōu)閳D片元素提供了替代性的文本。如：Semi 頭像等圖片類型的組件使用了 alt 屬性來解釋圖片的內(nèi)容。

2、視頻和音頻

為音頻或視頻內(nèi)容提供字幕，屏幕閱讀器就可以朗讀出這些文本信息，這樣聽障用戶就可以很好的訪問到這些信息了。

?? 動畫

在設(shè)計動畫或視頻時，應(yīng)當避免閃爍的內(nèi)容。頁面上的任何內(nèi)容都不應(yīng)當每秒在屏幕上閃爍超過 3 次，因為它可能會引發(fā)一些用戶的癲癇發(fā)作。除非閃爍的內(nèi)容足夠小且閃爍內(nèi)容的對比度低不包含過多的紅色。

不知道大家有沒有聽說這樣一個案例，1997年日本動漫《神奇寶貝》第38集《電腦戰(zhàn)士多邊獸》里皮卡丘用電擊摧毀導彈，導彈爆炸后出現(xiàn)異常鮮艷并且頻繁閃爍的紅藍交替畫面導致將近700個兒童癲癇發(fā)作。

作為內(nèi)容設(shè)計者，我們有責任和義務(wù)確保我們生產(chǎn)的內(nèi)容的安全性。

?? 布局

合理的簡潔的布局方式讓用戶可以輕松地探索和發(fā)現(xiàn)內(nèi)容。設(shè)計師們在設(shè)計界面時，應(yīng)當確保

信息是清晰、簡潔且易于瀏覽的；

考慮視覺層次結(jié)構(gòu)，將內(nèi)容分成簡短的相關(guān)部分，并避免長段落；

整體布局造成的瀏覽順序是線性且一致的；

在 200% 的放大器下仍然具有可閱讀性。

這對依賴屏幕閱讀器的用戶、屏幕放大器用戶以及有認知障礙的用戶非常有幫助，且不會丟失信息或功能。

使用

上述介紹的是 Semi 在無障礙設(shè)計方面做的一些努力，那么設(shè)計師們在日常做需求的時候，可以為無障礙做哪些事情呢？

設(shè)計師們和工程師們可以依照上述的實踐方向?qū)Ρ纫幌伦约旱漠a(chǎn)品是否符合這些無障礙的標準，這里給大家介紹幾個小技巧和注意事項。

校驗顏色非唯一信息

當你想要校驗自己的設(shè)計是否滿足“顏色不是唯一的視覺提示”這個標準時，可以使用 chrome 插件 -- 高對比度模式，將模式選擇為【反轉(zhuǎn)灰色】，將界面轉(zhuǎn)為去色界面，測試在沒有顏色的情況下是否還能準確的獲取全部信息。

頁面焦點順序

如果想要整體的鍵盤交互使用順暢，頁面級別的焦點順序就很重要。你可以 figma 插件 A11y - Focus Orderer 來標記焦點順序。標記后，可以讓研發(fā)同學通過 tabIndex 來實現(xiàn)你的訴求。

受控組件的焦點處理

當你使用了 Semi 組件的一些受控組件時，比如 Popover ，由于受控組件 Semi 無法確認觸發(fā)器的觸發(fā)方式，用戶通過 esc 關(guān)閉 Popover后，焦點將會丟失。這里需要開發(fā)者手動處理一下，將焦點切換到下一個可交互元素上。

圖片和圖標語義注釋

當你的設(shè)計稿中包含圖片或 icon 時，使用 alt 標注替代文本。當然如果你的設(shè)計的按鈕中包含了圖標和標簽，那么則不需要添加 alt 屬性，不然屏幕閱讀器就會播報兩遍一樣的信息，反而影響用戶體驗。

屏幕閱讀器使用

當你在使用一些屏幕閱讀器的時候，是否覺得有些難上手。這里給大家簡單概括下 Mac 電腦自帶的屏幕閱讀器 -- 旁白的使用小技巧。

打開【系統(tǒng)偏好設(shè)置】，點擊【輔助功能】，選擇【旁白】，勾選上【啟用旁白】，你就可以體驗這個功能了，你還可以在這里點擊【打開旁白訓練】初步學習如何使用。

點擊【旁白實用工具】還能自定義一些旁白偏好，如：播報的聲音等。

這里也給大家歸納一些快捷鍵，方便大家快捷使用：

操作	快捷鍵
打開/關(guān)閉旁白	Command + F5
閱讀標題，讓旁白在網(wǎng)頁各個標題文本中跳轉(zhuǎn)	Control + Option + Command + H
導航網(wǎng)頁（如：聚焦標題后，想要閱讀到標題下的文本時）	Control + Option + 右箭頭
調(diào)整旁白閱讀速率	Control + Option + Command + 下箭頭/上箭頭
讓旁白開始于當前網(wǎng)頁	Control + Option + Shift + 下箭頭
通覽網(wǎng)頁的所有導航項，打開 rotor	Control + Option + U