無障礙前端組件實(shí)踐（上）：基礎(chǔ)交互組件與色彩無障礙

在前端開發(fā)中，"無障礙"常常被忽略，但它直接決定了產(chǎn)品能否被所有用戶順暢使用------無論是鍵盤用戶、屏幕閱讀器用戶，還是視障、低視力人群。本文整理了 Smashing Magazine 權(quán)威指南中"基礎(chǔ)交互組件"的無障礙實(shí)踐，從焦點(diǎn)樣式、按鈕到色彩系統(tǒng)，幫你避開常見坑，快速落地可用的無障礙方案。

無障礙 :focus 樣式：別讓鍵盤用戶"迷路"
無障礙自動(dòng)補(bǔ)全：不止于"省時(shí)間"，更要"可感知"
按鈕與圖標(biāo)鏈接：別再搞混 <a> 和 <button>
禁用按鈕：與其"灰掉"，不如"說清楚問題"
卡片組件：沒有標(biāo)準(zhǔn)標(biāo)簽？靠語義化救場(chǎng)
輪播圖：別讓鍵盤用戶"被迫看完所有項(xiàng)"
關(guān)閉按鈕：一個(gè)"×"遠(yuǎn)遠(yuǎn)不夠
復(fù)選框與單選按鈕：自定義樣式別丟了無障礙
色彩系統(tǒng)與調(diào)色板：對(duì)比度是底線，不是上限
基礎(chǔ)無障礙測(cè)試：用工具幫你"抓小錯(cuò)"
視覺障礙模擬：學(xué)會(huì)"換位思考"
無障礙 :focus 樣式：別讓鍵盤用戶"迷路"

每個(gè)瀏覽器都有默認(rèn)的 :focus 樣式，但默認(rèn)效果大多"看不見或看不清"------而 :focus 的核心作用，是給鍵盤用戶（比如無法使用鼠標(biāo)的人）提供"當(dāng)前位置"的路標(biāo)。

避坑指南

絕對(duì)別刪 outline ：很多開發(fā)者為了"美觀"用 outline: none 刪掉焦點(diǎn)樣式，這會(huì)讓鍵盤用戶徹底失去導(dǎo)航方向，相當(dāng)于斷了他們的"路"。
焦點(diǎn)樣式要"醒目"：對(duì)比度要高，比如用加粗邊框、明顯的顏色變化（如藍(lán)色→紅色），或者加個(gè)小動(dòng)畫（但別晃眼）。

優(yōu)化技巧

用 :focus-within 做聯(lián)動(dòng)高亮：比如輸入框聚焦時(shí)，讓整個(gè)表單卡片加個(gè)淺色背景，用戶能更清晰感知"當(dāng)前操作區(qū)域"。
focus-visible 按需隱藏焦點(diǎn) ：如果鼠標(biāo)點(diǎn)擊按鈕時(shí)顯示焦點(diǎn)會(huì)影響設(shè)計(jì)，用 :focus-visible 可以只在鍵盤操作時(shí)顯示焦點(diǎn)------但注意：不是所有依賴焦點(diǎn)的用戶都用鍵盤，別讓鼠標(biāo)用戶"不知道元素能點(diǎn)"（感謝 Hidde de Vries 的提醒）。

圖標(biāo)按鈕無障礙實(shí)現(xiàn)（以 Twitter 圖標(biāo)為例）

<a >
  <!-- 圖標(biāo)讓輔助技術(shù)忽略，避免重復(fù)讀 -->
  <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
    <!-- 圖標(biāo)路徑 -->
  </svg>
  <!-- 視覺隱藏文本，屏幕閱讀器能讀 -->
  <span class="sr-only">前往Twitter主頁</span>
</a>

<!-- 視覺隱藏類：看不見但能被輔助技術(shù)識(shí)別 -->
<style>
.sr-only {
  position: absolute;
  white-space: nowrap;
  width: 1px; height: 1px;
  overflow: hidden;
  border: 0; padding: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  margin: -1px;
}
</style>

關(guān)鍵判斷：用鏈接還是按鈕？

Marcy Sutton 在文章中給了個(gè)"傻瓜標(biāo)準(zhǔn)"（原文鏈接）：

鏈接（<a>）：點(diǎn)了之后"去一個(gè)地方"（比如跳首頁、下載文檔），會(huì)離開當(dāng)前上下文；
按鈕（<button>）：點(diǎn)了之后"做一件事"（比如開模態(tài)框、播放視頻、切換菜單），不離開當(dāng)前頁面。

Vadim Makeev 更直白："如果點(diǎn)擊后是'執(zhí)行操作'，就是按鈕；如果是'跳轉(zhuǎn)地址'，就是鏈接------沒別的情況。"

禁用按鈕：與其"灰掉"，不如"說清楚問題"

很多表單會(huì)把"下一步"按鈕設(shè)為禁用，直到用戶填對(duì)所有信息------但這是個(gè)"坑"：用戶知道"有問題"，卻不知道"問題在哪"，尤其長(zhǎng)表單里，很容易漏掉錯(cuò)誤提示。

更好的方案

讓按鈕保持激活，實(shí)時(shí)提示錯(cuò)誤：比如用戶手機(jī)號(hào)填錯(cuò)時(shí)，按鈕仍能點(diǎn)，但點(diǎn)擊后顯示"手機(jī)號(hào)格式不對(duì)，請(qǐng)檢查"，同時(shí)輸入框標(biāo)紅。
加個(gè)"兜底"按鈕：如果實(shí)在要禁用，至少放一個(gè)"無法完成表單，需要幫助"的鏈接，讓用戶能聯(lián)系客服------別讓用戶"卡關(guān)"。

細(xì)節(jié)補(bǔ)充

Sandrina Pereira 發(fā)現(xiàn)：用 <button disabled> 會(huì)讓按鈕"無法被聚焦"，屏幕閱讀器用戶根本不知道"這里有個(gè)按鈕"。改用 aria-disabled="true" 更好------按鈕能被聚焦，還能彈出提示框說明"需要填完必填項(xiàng)"。

卡片組件：沒有標(biāo)準(zhǔn)標(biāo)簽？靠語義化救場(chǎng)

卡片沒有專門的 <card> 標(biāo)簽，也沒有 ARIA 標(biāo)準(zhǔn)，無障礙全靠"內(nèi)容和用途"------比如"產(chǎn)品卡片"和"文章卡片"的無障礙重點(diǎn)完全不同。

避坑重點(diǎn)

別讓"大點(diǎn)擊區(qū)域"變累贅：很多卡片會(huì)讓"整個(gè)卡片可點(diǎn)擊"，但屏幕閱讀器會(huì)把卡片里所有文字都讀一遍（比如標(biāo)題、描述、按鈕），用戶會(huì)聽懵。解決方案：只讓"標(biāo)題"和"查看詳情"按鈕可點(diǎn)擊，其他區(qū)域不可交互。
調(diào)整內(nèi)容順序：Nomensa 團(tuán)隊(duì)建議：把"核心信息（標(biāo)題）"放最前面，"輔助信息（日期、作者）"放后面，屏幕閱讀器讀的時(shí)候更符合邏輯。

輪播圖：別讓鍵盤用戶"被迫看完所有項(xiàng)"

輪播圖的最大無障礙問題：視覺用戶能"跳過"，但鍵盤用戶必須"逐個(gè) tab 完所有輪播項(xiàng)"------比如 5 個(gè)輪播圖，用戶要 tab5 次才能到后面的內(nèi)容，體驗(yàn)極差。

必做優(yōu)化

加"跳過輪播"鏈接：默認(rèn)隱藏，鍵盤聚焦時(shí)顯示（比如"跳過輪播，前往正文"），用戶一點(diǎn)就能跳過所有輪播項(xiàng)。
焦點(diǎn)管理：用戶 tab 完當(dāng)前輪播面板后，焦點(diǎn)自動(dòng)移到"輪播后面的第一個(gè)元素"（比如正文標(biāo)題），不用再手動(dòng) tab。
用列表分組輪播項(xiàng) ：把輪播項(xiàng)放在 <ul> 里，屏幕閱讀器會(huì)提示"有 5 個(gè)列表項(xiàng)，當(dāng)前在第 1 個(gè)"，用戶能清楚知道"輪播有多少項(xiàng)"。

關(guān)閉按鈕：一個(gè)"×"遠(yuǎn)遠(yuǎn)不夠

模態(tài)框、彈窗、Cookie 提示里的"關(guān)閉"按鈕，只用一個(gè)"×"圖標(biāo)是不行的------屏幕閱讀器會(huì)讀"乘號(hào)"，用戶根本不知道這是"關(guān)閉"。

正確實(shí)現(xiàn)

<button type="button">
  <!-- 圖標(biāo)讓輔助技術(shù)忽略 -->
  <span aria-hidden="true">×</span>
  <!-- 視覺隱藏文本，屏幕閱讀器讀"關(guān)閉彈窗" -->
  <span class="sr-only">關(guān)閉彈窗</span>
</button>

Manuel Matuzovi?在文章中分析了 11 種"不合格的關(guān)閉按鈕"（比如用 <div> 做按鈕、沒有焦點(diǎn)樣式），還提供了 5 種可直接復(fù)用的代碼示例，建議收藏（原文鏈接）。

復(fù)選框與單選按鈕：自定義樣式別丟了無障礙

默認(rèn)的復(fù)選框/單選按鈕不好看，很多人會(huì)自定義樣式，但容易"隱藏過頭"------比如用 display: none 把原生控件刪掉，屏幕閱讀器就"看不見"了。

正確自定義步驟

別刪原生控件 ：用 opacity: 0 讓它透明，再用 position: absolute 定位到"自定義樣式的上方"，這樣觸摸用戶點(diǎn)擊時(shí)能準(zhǔn)確觸發(fā)。
用 SVG 做視覺替換：SVG 可縮放、樣式靈活，還能加選中/未選中的動(dòng)畫（比如打勾效果）。
保持焦點(diǎn)樣式 ：自定義后別忘記加 :focus 樣式，比如選中時(shí)加個(gè)藍(lán)色邊框。

2025 年更新：不用再搞復(fù)雜兼容

現(xiàn)在瀏覽器對(duì)自定義表單控件的支持很好，Scott O'Hara 指出：幾乎不用再寫 hack 代碼，直接用 CSS 就能改樣式，還能加動(dòng)畫（比如選中時(shí)的縮放效果）------關(guān)鍵是別破壞原生無障礙能力。

色彩系統(tǒng)與調(diào)色板：對(duì)比度是底線，不是上限

色彩無障礙的核心是"對(duì)比度"------如果文字和背景對(duì)比度不夠，低視力用戶會(huì)看不清，甚至看不見。

必須記住的 WCAG 標(biāo)準(zhǔn)

標(biāo)準(zhǔn)等級(jí)	普通文本（如正文）	大文本（如標(biāo)題，≥18pt）	圖形/UI 組件（如輸入框邊框）
WCAG 2.0 AA	≥4.5:1	≥3:1	-
WCAG 2.1 AA	≥4.5:1	≥3:1	≥3:1
WCAG AAA	≥7:1	≥4.5:1	-

推薦工具：Geenes（幫你模擬視覺障礙）

這個(gè)工具能讓你直觀看到"視障用戶眼中的顏色"------比如紅綠色盲用戶看"紅綠按鈕"會(huì)是什么樣，還能調(diào)整色調(diào)、飽和度，直接導(dǎo)出顏色代碼到 Sketch（工具鏈接）。另外，瀏覽器 DevTools 也能模擬視覺障礙（Chrome：More tools → Rendering → Emulate vision deficiencies）。

基礎(chǔ)無障礙測(cè)試：用工具幫你"抓小錯(cuò)"

很多無障礙問題是"小細(xì)節(jié)"------比如漏了圖片 alt 標(biāo)簽、標(biāo)題結(jié)構(gòu)不語義化，但這些小錯(cuò)很容易溜進(jìn)生產(chǎn)環(huán)境。

推薦工具：AccessLint（GitHub 自動(dòng)化測(cè)試）

它能集成到 GitHub workflow 里：你提交 PR 時(shí)，AccessLint 會(huì)自動(dòng)檢查代碼，比如發(fā)現(xiàn) <img> 沒加 alt 標(biāo)簽，會(huì)直接在 PR 里評(píng)論提示------相當(dāng)于"上線前的無障礙安檢"（工具鏈接）。

視覺障礙模擬：學(xué)會(huì)"換位思考"

你可能知道"紅綠色盲"，但不知道他們看你的設(shè)計(jì)時(shí)是什么感受------Who Can Use 這個(gè)工具能幫你模擬（工具鏈接）。

只需輸入背景色和文本色，它會(huì)顯示：

對(duì)比度和 WCAG 評(píng)級(jí)；
不同視覺障礙（如青光眼、黃斑變性）的受影響人群比例；
你的顏色組合在他們眼中的"實(shí)拍圖"------比如你選了淺灰色文本配白色背景，工具會(huì)告訴你"低視力用戶完全看不見"。

小結(jié)

基礎(chǔ)組件是無障礙的"地基"------按鈕、鏈接、色彩這些看似簡(jiǎn)單的元素，一旦忽略無障礙，會(huì)直接把部分用戶擋在產(chǎn)品門外。下篇我們會(huì)聚焦"復(fù)雜組件"（如模態(tài)框、標(biāo)簽頁、表格）和"全流程工具鏈"（如測(cè)試、第三方組件評(píng)估），幫你搞定更難的無障礙落地場(chǎng)景。

翻譯及編譯引用注明

原文基礎(chǔ)信息
1. 原文標(biāo)題：A Complete Guide To Accessible Front-End Components
2. 發(fā)布平臺(tái)：Smashing Magazine（Web 設(shè)計(jì)與開發(fā)領(lǐng)域權(quán)威媒體）
3. 原文鏈接：https://www.smashingmagazine.com/2021/03/complete-guide-accessible-front-end-components/
4. 核心貢獻(xiàn)者：Hidde de Vries、Sara Soueidan、Scott O'Hara 等無障礙領(lǐng)域?qū)＜遥琒mashing Magazine 編輯團(tuán)隊(duì)整合發(fā)布。

擴(kuò)展鏈接

SpreadJS為使用屏幕閱讀器等輔助技術(shù)的殘障用戶提供了足夠的無障礙支持。

posted @ 2025-09-18 13:40 葡萄城技術(shù)團(tuán)隊(duì) 閱讀(201) 評(píng)論(0) 收藏舉報(bào)

刷新頁面返回頂部

無障礙前端組件實(shí)踐（上）：基礎(chǔ)交互組件與色彩無障礙

無障礙前端組件實(shí)踐（上）：基礎(chǔ)交互組件與色彩無障礙

目錄

避坑指南

優(yōu)化技巧

最新瀏覽器變化

推薦兩個(gè)靠譜組件

圖標(biāo)按鈕無障礙實(shí)現(xiàn)（以 Twitter 圖標(biāo)為例）

關(guān)鍵判斷：用鏈接還是按鈕？

更好的方案

細(xì)節(jié)補(bǔ)充

避坑重點(diǎn)

必做優(yōu)化

正確實(shí)現(xiàn)

正確自定義步驟

2025 年更新：不用再搞復(fù)雜兼容

必須記住的 WCAG 標(biāo)準(zhǔn)

推薦工具：Geenes（幫你模擬視覺障礙）

推薦工具：AccessLint（GitHub 自動(dòng)化測(cè)試）

小結(jié)

翻譯及編譯引用注明

擴(kuò)展鏈接

公告