跳至主要内容

讓服務無障礙

您必須確保開發的服務對所有需要的人是方便取用的。作為開發者，要設計並建立介面，避免為身心障礙者及輔助科技使用者設下障礙

以易於取得方法打造的服務有助於確保該服務能夠因應未來的變動，無論是技術的變動或使用者的無障礙性需求改變。

這也讓您的服務能夠：

利用 GOV.UK 設計系統​

儘可能利用 GOV.UK 的設計系統來建置您的服務。此設計系統提供了與其他 GOV.UK 服務一致且無障礙的風格、元件及模式。

利用 GOV.UK 設計系統的元件來打造您的服務，可以幫助服務變得更加無障礙且可依使用者環境自動調整。這是因為 GOV.UK 設計系統經常針對常用的輔助科技和瀏覽器組合進行測試，並且符合 WCAG 2.2 的 AA 等級。

若服務需求中的內容未涵蓋於 GOV.UK 設計系統，應確保您新增到服務中的任何元素都是無障礙的。您也可以為 GOV.UK 設計系統提議新的元件或模式。

即便使用了 GOV.UK 設計系統，在 HTML、Cascading Style Sheets (CSS) 和 JavaScript 程式碼中，仍可能不小心造成障礙。

使用漸進增強策略，確保若上述 HTML 層級之上的 CSS 或 JavaScript 出現問題或被使用者關閉時，您的服務仍然可用。

建構無障礙服務​

不依循無障礙最佳做法的程式碼可能會不利部分群體使用您的服務。可能的情況包括：

  • 依靠鍵盤的使用者無法存取或控制使用者介面或特定元素
  • 使用者無法調整介面的外觀
  • 螢幕報讀軟體不按照正確順序朗讀或根本不朗讀內容
  • 螢幕報讀軟體的使用者無法在心中勾勒頁面模型或無法導航至相關內容
  • 螢幕報讀軟體使用者無法得知僅限視覺的內容已更新
  • 語音辨識軟體的使用者無法與使用者前端畫面互動，例如無法啟動連結、按鈕或表單欄位

在把設計或原型轉換成線上程式前，您應該檢查設計中是否有任何無障礙的問題，包括：

  • 易混淆的操作畫面配置
  • 畫面顏色對比不足
  • 非直觀的互動元素（係指在使用者界面設計中，那些不容易被注意到或理解的互動元件，通常需要進一步的使用說明或指示才能被使用者發現和操作）

也可能有與內容相關的問題，例如：

請與內容設計師或技術寫作人員合作，修正這些問題。

部分使用者可能需要延長時間限制，例如在系統自動登出前的時間限制。請確保使用者在需要時能延長這些時間限制。

編寫無障礙 HTML​

您應當遵循語意化 HTML 的原則。運用正確的 HTML 元素及屬性標註內容，意味著正確的資訊將被提供給輔助科技。這也代表輔助科技的使用者可以依預期與內容或介面互動。

在 HTML 中使用正確的元素能協助輔助科技使用者瀏覽網頁，包含讓他們能跳至相關區塊。例如，請確定使用 header、main 和 footer 元素來勾勒頁面架構。

利用適當的 HTML 元素可以讓輔助科技更易於理解及操作介面。例如，按鈕應該總是使用 button，而不是 div。

請永遠確保頁面內容是按照邏輯順序排列，並且不依靠 CSS 或 JavaScript 在頁面載入後重新安排內容。如此一來，螢幕報讀軟體可以按照正確的順序閱讀內容。

在內容中使用標題元素。標題元素會告知螢幕報讀軟體頁面內容的組織方式，並給予使用者內容的概觀。避免跳躍使用標題元素，例如從 h1 直接跳到 h3，因為這可能使螢幕報讀軟體混淆。

撰寫 HTML 時，其他常見的無障礙錯誤可能包括：

  • 不為表單欄位提供 label，或未正確將 label 與表單欄位關聯
  • 沒有使用正確的清單類型 (list type)
  • 用 table 來構建頁面布局 - 您應該只使用 table 來呈現表格數據

撰寫無障礙 CSS​

在編寫 CSS 時要小心，因為很容易不經意地造成無障礙阻礙。

您應該確保：

  • 不要使用 display:none 來隱藏螢幕報讀軟體需要宣讀的內容
  • 確保文字和背景顏色對比度達到可接受的等級
  • 替所有互動性或可聚焦的元素添加一個 focus 狀態
  • 避免設計觸控區域過小的介面元素

有些使用者會依據他們的需求自訂網頁外觀。為了支援這些使用者，您應確保：

  • 當使用者放大字型時，所有內容仍然易讀
  • 使用者能夠更改頁面上的顏色，而不會讓重要元素消失不見

如果可以，您應該避免用CSS來重新排列頁面上的內容，因為這樣可能會對使用鍵盤和螢幕報讀軟體的使用者造成困擾。

編寫無障礙 JavaScript​

當內容動態變更時，您必須通知使用者。比如說，螢幕報讀軟體無法識別即時更新的搜尋結果。您可以利用 ARIA live regions 在內容動態變更時發出通知。

WAI-ARIA 很容易被不正確地使用，導致身心障礙者無法使用你的服務。你必須依循 WAI-ARIA 的正確規範與建議策略。

在使用 WAI-ARIA 時，請確保：

  • 利用 JavaScript 新增針對互動的 WAI-ARIA 屬性，例如 aria-controls，避免讓非 JavaScript 使用者感到困擾
  • 隨著頁面上 JavaScript 的變動，更新 WAI-ARIA 屬性，例如在使用者展開元素後設定 aria-expanded 為 true

檢測服務的無障礙性​

您應該根據 WCAG 2.2 進行手動檢查，並使用最常用的輔助科技與瀏覽器組合進行測試。

您的手動測試應該包括一些常見的無障礙問題，例如檢測：

  • 服務是否可以用鍵盤操作
  • 使用者是否能調整介面，如在瀏覽器中放大字型或更改顏色

當編寫正式的程式時，您必須定期進行無障礙測試。一旦服務進入公開Beta版，每當您新增一個功能時，都要進行無障礙測試。

雖然可以使用自動無障礙測試工具來測試您的服務，但無障礙工具無法捕捉到所有錯誤，因此仍然必須執行手動測試。

使用無障礙標準​

無障礙驗收準則是您可以應用於服務元件的特定規則，以幫助進行無障礙測試。無障礙標準可以幫助您決定需要測試的內容。

例如，一個連結不需要關聯標籤 (associated label)，但它需要清楚的文字來描述連結去往何處。這樣的驗收準則可以在您添加或更新功能時，幫助維護服務的無障礙性。

尋求幫助​

聯絡無障礙社群以：

  • 討論如何建構無障礙服務並符合無障礙要求
  • 跨政府分享想法
  • 尋求從事類似服務或面臨類似挑戰的團隊之支援

原始資料連結