文章

無障礙性設計

發布於 更新於
作者 Ned Hsu 9 分鐘閱讀

無障礙性設計

無障礙性設計（Accessibility Design，常簡稱為 a11y）是指設計和開發可以被盡可能多的用戶訪問和使用的網站或應用程序。這不僅包括殘障人士，也涵蓋了所有在不同情境下的用戶，例如使用慢速網絡、行動設備、或不同輸入方式（如語音控制、鍵盤導航）的用戶。

1. 無障礙性設計的重要性

  • 法律要求：許多國家和地區對網站和應用程序的無障礙性設計有法律要求，如美國的《殘疾人法案》（ADA）和歐盟的《網頁無障礙指導方針》（WCAG）。
  • 擴大受眾範圍：無障礙性設計能使更多人使用您的網站或應用程序，擴大潛在用戶範圍。
  • 提升用戶體驗：良好的無障礙性設計可提升所有用戶的體驗，使網站更加直觀和易用。
  • SEO 益處：無障礙設計的實踐（如使用語義化 HTML）有助於搜索引擎更好地理解和索引網站內容。

2. 無障礙性設計的核心原則

  • 可感知性（Perceivable）：確保所有用戶能夠感知到網站的內容和界面元素。這意味著文本、圖像、視頻、聲音等信息應該對所有人可見或可聽。
  • 可操作性（Operable）：網站或應用的功能應該是可操作的。這涉及到讓用戶可以通過鍵盤或其他輸入方式導航和使用所有功能。
  • 可理解性（Understandable）：網站的內容和界面應該是可理解的，這包括清晰的文字、簡單的語言和預測的互動方式。
  • 穩健性（Robust）：網站應該能夠在各種平台、瀏覽器和輔助技術上正常運行。

3. 無障礙性設計的實踐策略

(1) 使用語義化的 HTML

使用語義化的 HTML 標籤幫助輔助技術（如屏幕閱讀器）更好地解讀網站內容。例如：

  • 使用 <h1> 到 <h6> 標籤來定義標題結構。
  • 使用 <nav> 來標記導航部分，使用 <main> 來標記主要內容部分。
  • 使用 <button> 而不是 <div> 或 <span> 來創建按鈕。

範例

1
2
3
4
5
6
7

<nav aria-label="主導航">
  <ul>
    <li><a href="#home">首頁</a></li>
    <li><a href="#about">關於我們</a></li>
    <li><a href="#contact">聯絡我們</a></li>
  </ul>
</nav>

解釋

  • 使用了 <nav> 標籤和 aria-label 屬性來為輔助技術提供額外的描述。

(2) 提供替代文本（Alt Text）

為圖像和多媒體元素提供替代文本（alt 屬性），以便視障用戶能夠通過屏幕閱讀器了解這些內容。

1

<img src="logo.png" alt="公司標誌" />
  • 替代文本（alt）：簡要描述圖片的內容或功能。

(3) 可鍵盤操作性

確保網站的所有功能都能通過鍵盤操作，而不僅僅依賴鼠標操作。這對於無法使用鼠標的用戶來說至關重要。

  • 使用標準的 HTML 控件（如 <button>、<input> 等），這些控件自帶鍵盤操作支持。
  • 使用 tabindex 屬性來設置元素的鍵盤焦點順序。

範例

1

<button tabindex="0">提交</button>
  • tabindex 屬性：確保按鈕可以通過 Tab 鍵獲取焦點。

(4) 提高顏色對比度

確保文本與背景之間有足夠的顏色對比度，以便視力弱的用戶能夠清晰閱讀。

  • 遵循 WCAG 的顏色對比度指南：普通文本的對比度至少為 4.5:1，大文本至少為 3:1。

範例

1
2
3
4

body {
  color: #333; /* 使用深色文本 */
  background-color: #fff; /* 使用淺色背景 */
}

(5) 可縮放和響應式設計

確保網站內容能夠在不同大小的設備上自動調整，並允許用戶放大縮小。

  • 使用響應式設計技術（如媒體查詢）。
  • 不要禁用縮放功能，允許用戶通過瀏覽器放大頁面。

(6) 提供清晰的焦點指示

使用 :focus 樣式來強調當前焦點位置，確保鍵盤導航用戶知道他們目前的位置。

範例

1
2
3

a:focus {
  outline: 2px solid #007BFF;
}
  • outline 屬性：為焦點元素添加邊框指示。

(7) 提供可控的時間設置

為自動變化的內容（如輪播圖、動畫）提供可控性，允許用戶暫停、停止或調整播放速度。

範例

1

<button onclick="pauseCarousel()">暫停輪播圖</button>

(8) 使用 ARIA 屬性增強可訪問性

ARIA（Accessible Rich Internet Applications）是一套用於改善無障礙性的屬性。這些屬性可用於增強元素的描述、狀態和行為。

範例

1

<div role="alert" aria-live="assertive">您的訂單已成功提交！</div>
  • role 屬性：指定元素的角色，如 alert 表示警告。
  • aria-live 屬性：指示屏幕閱讀器應如何讀取內容變化，assertive 表示應立即讀取。

(9) 提供多種輸入方式

確保網站支持多種輸入方式（如觸控、鍵盤、語音），以便更多人能夠使用。

  • 使用事件監聽器（如 click 和 keypress）來處理用戶操作。

範例

1
2
3
4
5
6
7
8
9

document.getElementById("button").addEventListener("click", function() {
  // 處理點擊事件
});

document.getElementById("button").addEventListener("keypress", function(event) {
  if (event.key === "Enter") {
    // 處理鍵盤 Enter 鍵事件
  }
});

4. 無障礙性測試

無障礙性測試是確保網站對各種用戶和設備友好的重要步驟。

  • 手動測試：使用輔助技術（如屏幕閱讀器）、鍵盤導航、色盲模式等測試網站。
  • 自動化測試工具：使用無障礙性測試工具（如 Lighthouse、axe、WAVE）來自動檢查常見的無障礙性問題。
  • 用戶測試：邀請無障礙性需求的用戶來測試網站，並收集反饋。

5. 無障礙性設計的最佳實踐

  • 從一開始就考慮無障礙性：在設計和開發的早期階段就考慮無障礙性，而不是在最後進行修改。
  • 簡單明了的內容：使用簡單、易懂的語言，避免複雜的句子和術語。
  • 靈活的設計：設計適合不同情境的無障礙選項，例如，提供不同的輸入方式、文本替代、語音輸入等。
  • 保持更新：無障礙性指南和技術不斷發展，請保持學習並更新您的設計和開發實踐。

小結

無障礙性設計不僅符合法律要求，更是一種社會責任，能使網站或應用程序可訪問且易用。通過遵循無障礙性設計原則

和實踐策略，您可以創建一個適合更多人的、更有包容性的數位體驗。

Software, CSS
CSS
本文章以 CC BY 4.0 授權