使用 WCAG 2.1 測試 Drupal 網站的可訪問性

已發表: 2023-05-16

您是否知道美國四分之一的成年人有殘疾*？這是一個驚人的 6100 萬人，他們可能會受到無法訪問的網站的影響。

作為 Drupal 開發人員，您有能力通過確保您的站點符合 Web 內容可訪問性指南 (WCAG) 來有所作為。在此博客中，我們將探討在 Drupal 中測試 WCAG 2.1 可訪問性的主要功能和最佳實踐，以便您可以創建包容所有用戶的網站。

什麼是輔助功能 (A11y)

可訪問性是指讓盡可能多的人可以使用網站，特別是對於殘疾人。 A11y指的是什麼？ A11y 只是指“輔助功能”一詞，其中 11 表示“A”和“Y”之間的字符數

WCAG 及其起源

WCAG 代表 Web 內容可訪問性指南。它被認為是網站可訪問性的標準化基準。 WCAG 準則由萬維網聯盟 (W3C) 創建，是使您的網站可供所有人使用的最佳和最簡單方法。大多數政府和醫療保健組織都嚴格遵守 WCAG 準則，以確保網站遵守無障礙法（例如，第 508 條）。

WCAG的原則

如果您想採用 WCAG 合規性，則有四個主要的可訪問性原則。它們遵循“POUR”首字母縮寫詞，代表可感知、可操作、可理解和穩健。

可感知

簡而言之，內容應該可以被用戶感知。這意味著他們必須能夠識別呈現給他們的信息。它包括允許用戶清楚地聽到音頻內容並確保它與背景噪音區分開來。

可操作

這一切都是為了確保用戶可以舒適地瀏覽您的網站並且界面是用戶友好的。網站不得有任何無法訪問的部分或用戶可能無法完成的任何步驟。設計網頁內容時應避免快速移動和閃爍的內容。應該讓沒有鍵盤的人可以很容易地瀏覽網站，同時確保不能使用鼠標的用戶可以使用鍵盤訪問該網站。

可以理解

用戶必須能夠處理提供給他們的信息，並且能夠理解如何使用和瀏覽網站。這包括使文本清晰、可讀和可預測，以確保頁面以用戶友好和預期的方式顯示。

強壯的

這突出表明該技術可以隨著未來技術的發展而發展並構建您的網站。作為經驗法則，如果技術發生變化和發展，內容也應該保持可訪問性。它還需要被具有不同殘疾的廣泛用戶理解，並且仍然易於理解。例如，該站點使其與最新版本的屏幕閱讀器兼容。

為什麼要遵守 WCAG

以下是 WCAG 實施的一些優勢

一個易於訪問的網站可以為您的品牌建立良好的信譽並改善搜索引擎優化。您的網站將在搜索引擎結果中排名更高。
一個易於訪問的網站可以提高參與度、覆蓋面和保留率，因為您將有效地消除阻止廣泛人群訪問您的內容的障礙。
一旦 WCAG 作為任何網站的一部分實施，它就被視為標準。

WCAG 2.0/2.1 成功標準：實施最廣泛

站點上的每個輸入字段都有適當的標籤
裝飾性內容以一種可以被輔助技術忽略的方式實現。例如，屏幕閱讀器忽略的裝飾圖像
為所有預先錄製的音頻/視頻內容提供字幕
為音頻內容提供手語翻譯
有意義的內容序列，例如任何頁面上的標題都按順序放置
用戶能夠暫停或停止音頻或獨立於系統整體音量控制音頻音量以自動播放視頻。
文字與圖片的對比度為4.5:1，大尺寸文字與圖片為3:1。對比度不適用於裝飾性內容或標誌或品牌名稱
低或無背景音頻。預先錄製的音頻/視頻不包含任何背景噪音
內容的所有功能都可以通過鍵盤界面訪問。不會有關鍵字陷阱。
為用戶提供足夠的時間來閱讀和使用內容
如果內容是基於時間的，則允許用戶暫停或調整時間限制
對於任何快速移動的內容，例如自動輪播，用戶將看到暫停或停止它的選項
當經過身份驗證的用戶的會話過期時，用戶將能夠在重新身份驗證後繼續會話而不會丟失數據。
頁面標題、標題和標籤將描述網頁的主題
鍵盤焦點可見且突出顯示
可聚焦組件將按照表示意義和可操作性的順序獲得焦點。
網頁的每個部分都附有其部分標題
除了裝飾圖片，所有圖片都有有意義的替代文字
鍵盤和屏幕閱讀器可以訪問音頻、視頻、表單、下拉菜單、錨文本、URL 和替代文本
內容清晰度根據頁面的縮放級別進行調整。內容清晰可見，即使在最大縮放級別
帶有幫助上下文的頁眉和頁腳菜單應該在整個站點的所有頁面上都可用
這些網站正確實施了懸停和焦點狀態

屏幕閱讀器

許多有視覺障礙的人使用屏幕放大鏡和屏幕閱讀器。屏幕閱讀器是一種可以大聲朗讀屏幕上顯示的數字文本的軟件。一些屏幕閱讀器示例包括：

JAWS (Windows) 和 Dolphin Screen Reader (Windows) 等付費產品。
NVDA (Windows)、ChromeVox (Chrome) 和 Orca (Linux) 等免費軟件。
內置 OS（操作系統）的軟件，如 VoiceOver（macOS、iPadOS、iOS）、Narrator（Windows）、ChromeVox（在 Chrome OS 上）和 TalkBack（Android）。

三個級別的可訪問性

WCAG 2.1 有 3 個級別的成功標準

A 級：滿足 WCAG 2.0 中定義的所有 30 個基本成功標準。至少，所有網站都應達到此級別的合規性。
AA 級：滿足所有 A 級成功標準，並滿足額外的 28 個可訪問性成功標準。這個級別實現了更廣泛的可訪問性範圍，並且通常是大多數開發團隊要實現的目標。
AAA 級：網站應滿足所有三個級別的成功標準，包括 28 個額外的成功標準。此級別通常保留給特殊站點，例如政府組織。

大多數與 WCAG 兼容的站點都廣泛屬於可訪問性成功標準 A 級或 AA 級。

測試 Drupal 網站的可訪問性

以下是對 Drupal 網站執行可訪問性測試所遵循的步驟

運行 Google Chrome Lighthouse 審核並修復突出顯示的可訪問性問題
運行 Wave 工具審核
手動驗證鍵盤高亮焦點和頁面的 Tab 鍵順序
使用所需的屏幕閱讀器軟件驗證頁面。例如，畫外音
驗證所有分辨率（例如寬桌面、筆記本電腦、選項卡和移動設備）上的站點可訪問性
使用 W3C 的標記和 CSS 驗證工具驗證站點代碼
使用 Kontrast 等 Chrome 擴展工具或 Color Contrast Analyzer 等應用程序驗證網站的顏色對比度以確保其符合標準 (4:5:1)

Drupal 如何幫助達到可訪問性標準

Web 開發必須包括可訪問性，以確保網站功能正常並且可供殘障人士訪問。 Drupal 以其對可訪問性的堅定奉獻而聞名。查看 Drupal 如何提升可訪問性以及它提供哪些工具和功能來幫助網站變得更加用戶友好。

1. 構建 Drupal 的可訪問性

Drupal 開發團隊的目標一直是構建一個可供盡可能多的用戶使用的平台。在開發核心 Drupal 平台時，遵循 Web 內容可訪問性指南 (WCAG) 2.1 AA 級要求。這表明各種殘疾，例如影響視覺、聽覺、身體、語言、認知和神經系統的殘疾，都可以訪問 Drupal 網站。

2. 默認輔助功能

得益於響應式設計，Drupal 的默認主題能夠適應各種屏幕尺寸和設備，適用於那些使用移動設備或輔助技術的人。
Drupal 創建語義 HTML 標記，幫助屏幕閱讀器和其他輔助技術工具理解網站的結構。
Drupal 包含一個用於向照片添加替代文本的字段，這有助於盲人理解網站內容。
Drupal 支持鍵盤導航，這對於無法使用鼠標的用戶來說至關重要。
易於使用和使用輔助技術導航的表單由 Drupal 生成且易於訪問。

3. Drupal 提供可訪問性插件和模塊

為了提高網站的可訪問性，Drupal 提供了多種可部署的可訪問性模塊和插件。幾個受歡迎的輔助功能模塊和插件如下：

Editoria11y Accessibility Checker：該模塊檢查網站的可訪問性問題並提出解決方案建議。
CKEditor Accessibility Plugin：此插件改進了廣泛使用的 Drupal 文本編輯器 CKEditor 的可訪問性。
多合一輔助功能小部件：此模塊包括一個輔助功能小部件，使用戶能夠更改網站的文本大小、對比度和其他與輔助功能相關的設置。
A11Y：表單助手：該模塊有助於使所有 Drupal 網絡表單符合可訪問性標準
Block ARIA Landmark Roles：該模塊將附加元素添加到塊配置表單中，允許用戶將 ARIA 地標角色和/或 ARIA 標籤分配給塊。

4. 社區對可訪問性的強大支持

致力於可訪問性的開發人員和設計人員構成了 Drupal 社區的很大一部分。 Drupal Accessibility Group 由社區領導，旨在讓殘障人士更容易使用 Drupal。該小組為開發符合 ADA 標準的 Drupal 網站提供指導、工具和最佳實踐。

參考：

https://www.cdc.gov/ncbddd/disabilityandhealth/infographic-disability-impacts-all.html

最後的想法

Drupal 是一種有效的開源內容管理系統，它提供各種功能、工具和插件來提高網站的可訪問性。由於致力於可訪問性及其以可訪問性為中心的社區的力量，Drupal 是一個出色的平台，可用於構建可供殘障人士使用和訪問的網站。
我希望本文能為您提供有關使用 WCAG 2.1 進行可訪問性測試所需的見解。想要從頭開始構建可訪問的 Drupal 網站，還是想讓您當前的網站更易於訪問？我們很樂意實現這一目標！讓我們談談吧！