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

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

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

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

什么是 A11y ？

A11y 是 Accessibility 的縮寫(xiě)，即無(wú)障礙設(shè)計(jì)。雖然無(wú)障礙設(shè)計(jì)廣泛意義上被認(rèn)為是為殘障人士服務(wù)，但其實(shí)是為了所有人提供同等的體驗(yàn)。因?yàn)槲覀兠恳粋€(gè)人都可能會(huì)存在殘障時(shí)刻。比如說(shuō)：做了近視眼手術(shù)，暫時(shí)性無(wú)法使用眼睛??。再比如，當(dāng)強(qiáng)光照射時(shí)，看不清楚事物，這種就是情景性殘障。

障礙類(lèi)型圖（圖片來(lái)源：Microsoft Inclusive Design）

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

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

了解用戶需求

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

???? 視覺(jué)障礙

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

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

盲人用戶專(zhuān)用鍵盤(pán)（圖片來(lái)源：百度）

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

??♀? 聽(tīng)覺(jué)障礙

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

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

???? 肢體障礙

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

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

一個(gè)坐輪椅的男人正在用嘴棒打字（圖片來(lái)源：W3C）

?? 認(rèn)知障礙

有認(rèn)知障礙的用戶，難以專(zhuān)注于長(zhǎng)篇密集的文本，無(wú)法理解復(fù)雜的結(jié)構(gòu)。

密集的文本（圖片來(lái)源：W3C）

痛苦閱讀的用戶（圖片來(lái)源：W3C）

實(shí)施

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

?? 顏色

1、對(duì)比度

對(duì)比度是可訪問(wèn)性中一個(gè)非常重要的指標(biāo)。高對(duì)比度使視覺(jué)元素從背景中脫穎而出，更加引人注目。我們這里說(shuō)到的對(duì)比度主要是指文字元素的對(duì)比和組件層面的對(duì)比。

1.1 文字元素對(duì)比

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

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

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

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

1.3 例外情況

對(duì)于一些主要以閱讀為主的組件通過(guò)屏幕閱讀器就能讓殘障用戶得到很好的訪問(wèn)了，如：Message、Banner 等，因此可以不用嚴(yán)格按照 AA 標(biāo)準(zhǔn)。但為了確保可操作性，組件內(nèi)的可操作項(xiàng)還是需要滿足對(duì)比度要求。

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

為了更好的支持無(wú)障礙，我們上線了A11y 主題包。這里需要注意的是橙色這一色相的對(duì)比度在 WACG 2.0 的標(biāo)準(zhǔn)中，一直是一個(gè)老大難的問(wèn)題。因?yàn)槿魏魏谐^(guò) 50％ 黃色的顏色都會(huì)自然反射更多的光。大家在考慮無(wú)障礙場(chǎng)景時(shí)需要謹(jǐn)慎使用黃色、橙色、綠色和藍(lán)綠色這類(lèi)高風(fēng)險(xiǎn)顏色。

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

主題商店插圖

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

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

光暈效應(yīng)：光的傳播超出其適當(dāng)邊界，在明亮圖像的邊緣周?chē)纬伸F所引起的效果

黑灰對(duì)比

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

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

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

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

Form 報(bào)錯(cuò)信息

還有就是可以通過(guò)在圖表中添加紋理及標(biāo)簽來(lái)表達(dá)差異，當(dāng)然紋理對(duì)于常規(guī)的數(shù)據(jù)分析師來(lái)說(shuō)增加了干擾項(xiàng)，不符合數(shù)分規(guī)范，但就無(wú)障礙而言卻是合理的。

圖表中的紋理和標(biāo)簽

?? 鍵盤(pán)和焦點(diǎn)

鍵盤(pán)的可訪問(wèn)性是無(wú)障礙設(shè)計(jì)中最核心的一部分，有運(yùn)動(dòng)障礙的用戶、盲人用戶，以及一些有特殊操作習(xí)慣的用戶都依賴鍵盤(pán)來(lái)導(dǎo)航和訪問(wèn)網(wǎng)站。

1、鍵盤(pán)快捷鍵

這類(lèi)用戶可以通過(guò)一些鍵盤(pán)快捷鍵來(lái)實(shí)現(xiàn)瀏覽網(wǎng)站：

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

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

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

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

• Esc ： 退出各類(lèi)彈層；

2、焦點(diǎn)

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

Semi 組件的焦點(diǎn)需要遵循一下原則：

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

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

• 導(dǎo)航可逆：用戶通過(guò) Tab 鍵切換到下一個(gè)焦點(diǎn)，就一定可以通過(guò) Shift + Tab 切換會(huì)上一個(gè)焦點(diǎn)；

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

3、示例

Semi 每一個(gè)組件都提供了詳細(xì)的鍵盤(pán)和焦點(diǎn)的說(shuō)明，大家可以去 Semi 站點(diǎn)詳細(xì)體驗(yàn)（目前部分組件尚在施工中??），下面是 Popconfirm 鍵盤(pán)交互的示例：

?? 語(yǔ)義化

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

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

• 讓用戶知道當(dāng)前元素是啥，當(dāng)前元素是干什么的；

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

• 當(dāng)前我處于列表的第幾項(xiàng)，總共有幾項(xiàng)等。

?? 媒體

1、圖片的替代文本

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

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

2、視頻和音頻

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

?? 動(dòng)畫(huà)

在設(shè)計(jì)動(dòng)畫(huà)或視頻時(shí)，應(yīng)當(dāng)避免閃爍的內(nèi)容。頁(yè)面上的任何內(nèi)容都不應(yīng)當(dāng)每秒在屏幕上閃爍超過(guò) 3 次，因?yàn)樗赡軙?huì)引發(fā)一些用戶的癲癇發(fā)作。除非閃爍的內(nèi)容足夠小且閃爍內(nèi)容的對(duì)比度低不包含過(guò)多的紅色。

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

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

?? 布局

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

• 信息是清晰、簡(jiǎn)潔且易于瀏覽的；

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

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

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

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

使用

上述介紹的是 Semi 在無(wú)障礙設(shè)計(jì)方面做的一些努力，那么設(shè)計(jì)師們?cè)谌粘Ｗ鲂枨蟮臅r(shí)候，可以為無(wú)障礙做哪些事情呢？

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

校驗(yàn)顏色非唯一信息

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

頁(yè)面焦點(diǎn)順序

如果想要整體的鍵盤(pán)交互使用順暢，頁(yè)面級(jí)別的焦點(diǎn)順序就很重要。你可以 figma 插件 A11y - Focus Orderer 來(lái)標(biāo)記焦點(diǎn)順序。標(biāo)記后，可以讓研發(fā)同學(xué)通過(guò) tabIndex 來(lái)實(shí)現(xiàn)你的訴求。

Semi 主站的焦點(diǎn)順序（施工中??）

受控組件的焦點(diǎn)處理

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

圖片和圖標(biāo)語(yǔ)義注釋

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

屏幕閱讀器使用

當(dāng)你在使用一些屏幕閱讀器的時(shí)候，是否覺(jué)得有些難上手。這里給大家簡(jiǎn)單概括下 Mac 電腦自帶的屏幕閱讀器 -- 旁白的使用小技巧。

打開(kāi)【系統(tǒng)偏好設(shè)置】，點(diǎn)擊【輔助功能】，選擇【旁白】，勾選上【啟用旁白】，你就可以體驗(yàn)這個(gè)功能了，你還可以在這里點(diǎn)擊【打開(kāi)旁白訓(xùn)練】初步學(xué)習(xí)如何使用。

點(diǎn)擊【旁白實(shí)用工具】還能自定義一些旁白偏好，如：播報(bào)的聲音等。

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

由于 WCAG 2.0 的局限項(xiàng)，比如上述說(shuō)的橙色色相這個(gè)問(wèn)題。后續(xù)我們將持續(xù)迭代優(yōu)化到 WCAG 3.0，并對(duì) DSM 編輯器及文檔中對(duì)比度標(biāo)準(zhǔn)做同步更新。

新顏色對(duì)比度標(biāo)準(zhǔn) APCA 將 2.0 的比率優(yōu)化成了數(shù)值，數(shù)值越大對(duì)比度越高。新標(biāo)準(zhǔn)考慮到了文字大小和重量、文本和背景顏色交換后的對(duì)比度變化，最重要的是解決了色調(diào)感知度的問(wèn)題，這樣老大難的橙色色相問(wèn)題就得到了解決。

最后我想說(shuō)，關(guān)于無(wú)障礙設(shè)計(jì)，我們還有很多東西需要學(xué)習(xí)。但是 Semi 團(tuán)隊(duì)會(huì)持續(xù)探索并努力實(shí)踐為可訪問(wèn)性而設(shè)計(jì)這件事情。同時(shí)也希望大家可以一起共創(chuàng)，讓無(wú)障礙設(shè)計(jì)為更多的用戶帶去更好的工作及生活體驗(yàn)，讓科技真正地惠及每一個(gè)人。