平衡設計和可用性的輔助功能基礎

網路可訪問性 (a11y) 是一項品質標準，旨在改善每個人的體驗，不僅針對特定殘疾人，還針對鍵盤使用者以及暫時受傷或單手操作的使用者。

我們整理了組件設計的要點，以便任何人都可以直觀地操作它。

模態對話框設計的三個基本要求

模態框是最常發生可訪問性違規的部分。您必須確保滿足以下三個要求。

1. 焦點陷阱：開啟時，Tab 鍵移動僅限於模態，防止焦點洩漏到其後面的元素。
2. Escape鍵操作：按ESC鍵立即關閉，關閉後將焦點回到「開啟模態方塊的原始按鈕」。
3. 適當的 WAI-ARIA 屬性：
   • 授予role =“dialog”和aria-modal =“true”
   • 明確指向標題的“aria-labelledby”

常被忽略的三大反模式

• 反模式 1：將點擊事件附加到 <div> 或 <span>
  • 問題：無法使用鍵盤（Enter/Space）進行操作，且不顯示為螢幕閱讀器的按鈕。
  • 解決方案：使用原生 <button> 標籤和 CSS 樣式。
• 反模式 2：使用佔位符作為標籤
  • 問題：當您開始打字時它就會消失，從而損害可見性和認知負荷。
  • 已解決：準備一個始終顯示的<label>，並使用htmlFor將其與輸入的id關聯起來。
• 反模式3：對比不足
  • 問題：對比度小於4.5:1時難以閱讀，例如淺灰色文字。
  • 已解決：修復了符合 WCAG 2.1 AA 標準的調色板。

使用 Headless UI 函式庫減少工時

自己從頭開始實現可訪問性非常耗時。現代標準是使用“高度可訪問的無樣式 UI 原語”，例如 Radix UI 和 React Aria，並僅應用 Tailwind CSS 等樣式。