Web 可訪問性：為什麼 W3C 標準經常被忽略

已發表: 2022-03-11

du jour 一詞是Web 可訪問性——在我看來，這是 Web 設計中最常被誤解和應用最差的方面之一。 常見的誤解是無障礙功能是專為殘疾人設計的。 事實上，每個人都從無障礙內容中受益，您的受眾將通過在不同平台或以不同方式訪問無障礙內容而增加，因為他們可以在較少限制的情況下使用您的內容。

不幸的是，許多 Web 開發人員不使他們的內容可訪問，也不遵循 Web 可訪問性指南； 因此，許多人在使用他們的設計和享受內容時遇到了不必要的困難。 在極端情況下，某些用戶群體根本無法有效地使用這樣的網站。

構建可訪問的內容應該是任何開發人員、設計師或內容創建者的第二天性，就像考慮坡道、樓梯和電梯對於建築師設計新建築而言一樣。

讓我們仔細看看幕後是什麼，以及為什麼這麼多開發人員似乎無緣無故地忽視了 Web 可訪問性標準。

1. “無障礙設計”是什麼意思？

無障礙內容是每個人都可以使用的內容。 我們不知道用戶如何訪問我們的內容的所有方面，因此我們需要提前考慮可訪問性的設計。

正如我之前強調的那樣，這與殘疾人無關，他們約佔世界人口的 15%。 在現實生活中，用戶通常最終不會以與開發過程中設想的完全相同的方式消費內容並與設備交互。 在許多司法管轄區，出於法律原因，也需要可訪問的內容。 閱讀“為您的組織開發 Web 可訪問性業務案例的法律和政策因素”，了解有關可訪問性合規性的更多信息。

在考慮用戶可訪問的內容時，請考慮以下場景：

  • 聽不清楚。 全世界有 3.6 億人患有聽力障礙。 音頻內容應該有轉錄，視頻應該有字幕。

  • 看不清楚。 據估計，全世界有 2.85 億人視力受損：3900 萬人失明，246 人視力低下。 視障用戶使用屏幕閱讀器（使用合成語音閱讀內容）、可刷新的盲文顯示器（屏幕內容出現在盲文顯示器上，用戶可以使用顯示器上的按鍵導航和與他們的設備交互）或高-對比模式。

  • 受到閱讀障礙的影響。 患有閱讀障礙的人在閱讀和理解內容時發現困難，尤其是，例如，合理的文本或全部大寫。

  • 遭受身體限制。 並非所有人都可以使用所有設備。 例如，內容導航必須不僅對鼠標用戶可用，而且對不能使用鼠標的用戶也可用。

  • 使用移動設備。 使您的內容適應小屏幕。 允許用戶縮放或增加字體大小。

2. 如何確保良好的 Web 可訪問性

人們使用非常不同的方式來瀏覽和消費內容。 有些用戶需要其他軟件工具的支持，以幫助他們更輕鬆地訪問內容。 這些工具被稱為輔助技術，範圍從屏幕閱讀器到觸摸屏和頭指針。

但是，您的應用程序和輔助技術需要相互通信。 對於輔助技術，並非所有用 HTML 編寫的內容都可以完全理解。 為了幫助將內容從“技術語言”“翻譯”成更易於人類閱讀的語言，已經創建了附加的可訪問性 API 標準。

這個基本的 Web 可訪問性圖表應該讓您更好地了解輔助技術的工作原理。

資料來源：W3C
資料來源：W3C

為了說明它是如何工作的，讓我們看一個簡單的代碼示例：

 <a href="#” class=”button”>Delete</a>

這個簡單的代碼，對於使用屏幕閱讀器的人來說，意義不大。 它甚至具有誤導性，並且僅作為帶有“刪除”文本的鏈接閱讀。 為了幫助用戶了解使用什麼樣的方法來執行動作，我們可以使用ARIA （Assistive Rich Internet Applications）屬性（在 https://www.w3.org/TR/wai-aria/ 中指定）來覆蓋原來的角色。 我們通過添加屬性role="button"來改變按鈕鏈接的含義。 這樣，屏幕閱讀器會將其作為按鈕而非鏈接閱讀。 哪個更合適。

簡而言之，屬性 ARIA：

  • 賦予或增強非語義或其他語義元素的語義，

  • 確保動態（實時）內容仍然可以訪問。

  • 提供角色來描述已定義小部件的類型（菜單、樹項、滑塊、進度表等）。

  • 提供描述網頁結構（標題、區域和表格）的角色。

  • 提供小部件的狀態（已選中、已彈出等）。

  • 提供描述拖放源和拖放目標的拖放屬性。

什麼是網頁設計中的可訪問性？

每當您設計內容時，請考慮兩件事：內容的可感知性和可操作性。 讓我們檢查一些示例來說明網頁設計中的可訪問性。

假設您要設計一個自定義選擇下拉元素。 以下是設計元素時要考慮的事項：

  • 標記不同的狀態：啟用、禁用、只讀。

  • 當元素獲得焦點/懸停狀態時標記元素。

  • 在獲得焦點/懸停狀態時標記每個選項元素。

  • 確保僅將文本放大到 200% 級別時內容仍然可讀。

  • 確保文本與其背景之間有足夠的對比度。 它可以幫助中度低視力或在極端照明條件下（例如，暴露在直射陽光下或在低亮度顯示器上）的設備上閱讀內容。

另一個例子可能是選擇一種顏色來描述一個狀態。 以下是在設計用戶能夠選擇顏色的部分時要考慮的事項：

  • 有些人難以區分某些顏色。 所以綠色並不意味著對所有訪客都是綠色的。 要修復它，請為描述用途的每種顏色添加描述。

  • 當每個元素獲得焦點/懸停狀態時標記它。

  • 確保元素之間有足夠的空間，以便可以輕鬆激活每個元素，例如，在具有較小視口的設備上。

3. 可訪問性測試：從哪裡開始？

沒有一種方法可以檢查並確保 Web 內容完全可訪問。 需要使用多種技術來驗證和修復可訪問性問題。 您可以從定義問題、解決方案和優先級開始。

定義問題

在處理可訪問性問題時，請始終嘗試為每個問題創建一張帶有明確標題的票。 這應該可以簡化對問題的理解，並有助於確定優先級。

不好的例子：用戶不能在頁面上使用鍵盤。

很好的例子：無法在主菜單中使用鍵盤導航。

糟糕的例子導致了一個很難在短時間內結案的案例。 關於多個主題的討論也可能從評論部分開始，因為票的標題太籠統了。

很好的例子準確地指出了問題並且只關註一件事：主菜單中的鍵盤導航。

優先考慮 Web 可訪問性問題

優先級很重要，因為它們定義了必須首先解決哪些問題。 例如，WCAG 分為三個一致性級別：A、AA、AAA，這意味著您應該從最低級別 A 開始，但這並不意味著 AA 和 AAA 級別僅僅是“很高興擁有”。 所有級別都很重要，重要的是不要假設僅 A 級就足夠了。

但是，WCAG 級別（或任何其他指南）有時可能很難理解，為了簡化一點，您還可以考慮以下優先級定義：

  • 嚴重- 阻止用戶使用應用程序的問題。 沒有可用的解決方法。

  • 主要– 使應用程序的使用變得困難和/或迷失方向的問題，但不會妨礙用戶完成操作的能力。

  • 次要- 煩人但不妨礙使用的問題，或可以對應用程序進行的改進。

  • 信息- 不遵守最佳實踐。 改進的一般建議。

解決方案

沒有任何指南——我的意思是 WCAG、Section 508 或 ADA——將在技術代碼方面為您提供關於如何解決特定問題的直接解決方案。 他們只定義預期的行為。 但是，WCAG 還定義了有助於理解如何重現問題的測試程序，並且有一個自動化的 WCAG 監控社區組，這是一個 W3C 社區，專注於為 Web 可訪問性測試開發可靠的規則，包括自動化和半自動化。

WCAG 技術 G4 的示例（“允許內容暫停並從暫停的地方重新開始”）：

測試程序

在具有移動或滾動內容的頁面上，

  1. 使用網頁中或用戶代理提供的機制來暫停移動或滾動內容。

  2. 檢查移動或滾動是否已停止並且不會自行重新啟動。
  3. 使用提供的機制重新啟動移動內容。
  4. 檢查移動或滾動是否從停止點恢復。

預期成績

2號和4號是真的。

正如我們所見，沒有技術解決方案，而是定義了預期的行為。 Web 開發人員如何實現它取決於他們。

Web 可訪問性指南和 W3C 標準

遵循基本的 Web 標準應該是您的起點：

  • 最常見的是被稱為 WCAG 的 Web 內容可訪問性指南。 WCAG 2.0 是“一個穩定的、可參考的技術標準。 它有 12 條指導方針，按照 4 項原則組織：可感知、可操作、可理解和穩健。 對於每條指南，都有可測試的成功標準，分為三個級別：A、AA 和 AAA。”

  • WCAG 2.0 技術是針對 Web 內容作者的綜合指南。

  • W3C 媒體可訪問性用戶要求 - 本文檔介紹了殘障用戶對 Web 上的音頻和視頻的可訪問性要求。

  • 20 世紀通信和視頻無障礙法案 — CVAA 分為兩個廣泛的標題或部分。 標題 I 涉及通信訪問，以使使用寬帶的產品和服務對殘疾人完全可訪問。 無障礙法案第二章開闢了新天地，使殘疾人更容易在電視和互聯網上觀看視頻節目。

  • 第 508 節——適用於所有聯邦機構開發、採購、維護或使用電子和信息技術時的信息和通信技術 (ICT) 的可訪問性要求。

  • 美國殘疾人法案 (ADA) 標題 II 下的網站可訪問性 — 在那裡，您將了解 ADA 標題 II 的非歧視要求如何適用於州和地方政府網站。

Web 可訪問性測試：我如何知道我的內容是否可訪問？

以下是一些基本的檢查點，可以幫助您從第一步開始就更容易訪問您的 Web 內容：

  • 驗證您的 HTML。 確保 HTML 結構沒有錯誤，因為輔助技術在解釋頁面內容時可能會出現問題。

  • 單獨使用鍵盤進行測試。 確保僅使用鍵盤即可訪問所有可操作的元素。 此外，您還必須能夠使用鍵盤執行所有操作，例如提交表單。

  • 使用可訪問性測試工具和驗證器進行測試。 使用掃描和驗證潛在可訪問性錯誤的工具。

  • 動態內容。 通知屏幕閱讀器用戶動態變化，例如當搜索結果發生變化時。

  • 不要依賴顏色來描述含義。 使用顏色和描述，例如，[黃色框]警告。

  • 不要刪除焦點上的輪廓。 這是一個使用 CSS 屬性outline: 0; 不要這樣做，因為鍵盤用戶將失去頁面上的方向。 您可以考慮為非鍵盤用戶移除焦點輪廓，但始終為鍵盤用戶提供焦點輪廓。

  • 錯誤消息。 始終告訴用戶如何糾正錯誤。 不要只說數據無效。

  • 標籤順序。 確保基於選項卡的導航遵循圖形用戶界面中建立的約定。 至少，它應該遵循應用程序默認語言的閱讀方向。 以英語為例，閱讀順序是從上到下，從左到右； 在阿拉伯語中，它是從上到下，從右到左。

  • 飛漲。 確保將文本放大至 200% 時頁面內容仍然可讀。

  • 關閉圖像。 您仍然能夠以舒適的方式使用該頁面嗎？ 所有圖像都有替代文本嗎？

  • 屏幕閱讀器。 測試您是否可以使用至少一個屏幕閱讀器（例如 VoiceOver、Windows Narrator 或 NVDA）閱讀和瀏覽內容。

  • 高對比度模式。 在切換到高對比度模式時檢查內容是否仍然可讀。

  • 字體大小。 確保頁面上的字體大小不小於 10 像素。

4. Web 可訪問性的常見錯誤

最常見的錯誤是未能在開發之前確定可訪問性要求。 不幸的是，可訪問性越晚成為開發的一部分，實施解決方案就越困難。

下面列出了開發人員在實現可訪問性時最常犯的一些錯誤：

  • 僅使用鍵槃無法瀏覽內容。

  • 濫用 CSS 大綱屬性。 大多數情況下， outline: 0; 使用，這意味著每個可操作元素周圍的輪廓不再可見。 不要使用outline: 0; 或outline: 0 !important; . 用戶在瀏覽內容時將失去查看當前焦點元素的能力，除非有任何其他替代方法，例如使用border CSS 屬性。

  • 從當前元素失去焦點，例如，由於 DOM 操作或使用blur()方法。 這通常發生在單頁應用程序中。

  • 屏幕閱讀器用戶不會收到任何更改的通知，例如，已使用 XMLHttpRequest API 下載內容並且已呈現 UI 上的新更改，但尚未通知用戶。 這通常發生在單頁應用程序中。

  • 無法訪問的日期選擇器。 在許多情況下，使用了不可訪問的日期選擇器。 用戶無法使用鍵盤瀏覽日曆選項。

  • 使用聲稱可以自動修復可訪問性問題的擴展。 小心使用它們並檢查結果。 濫用它們會產生比解決方案更多的問題。

  • 給元素添加索引號大於 0 的tabindex屬性。使用索引大於 0的tabindex的目的主要是為了“更正”導航路徑。 但是，請考慮更改 HTML 結構以獲得自然的導航路徑。 使用tabindex操作它可能會導致維護問題和不可預測的導航路徑。

  • 錯誤的標題層次結構。 不幸的是，它仍然很常見，但是沒有正確構建標題層次結構，例如<h1> 、 <h5>和<h2> 。 屏幕閱讀器用戶使用標題來瀏覽各個部分，不正確的結構令人困惑，因為很難理解上下文。

  • 缺少高對比度支持。 有些人在高對比度模式下使用他們的軟件。 確保您的內容仍然是可感知的。

  • 使用無法訪問的 CAPTCHA 解決方案。 不幸的是，我知道的所有驗證碼要么無法訪問，要么很難使用。

  • 太多和/或不可暫停的動畫。 自動播放視頻、廣告或圖像輪播非常分散注意力。

  • 大塊的文本。 壓縮在一個非常大的單個塊中的文本，沒有空格、逗號或點。 非常難讀。 拆分成更小的塊、更多的段落和子標題有助於更好地組織文本內容。

  • 縮放問題。 確保內容在放大到 200% 時仍然可讀和可導航。

  • 依靠顏色。 很多時候，一個元素的狀態只用顏色標記，例如，警告狀態只用黃色子彈標記； 對於色盲的人來說，這種顏色的感知方式不同。

  • 小的可點擊/可點擊目標。 可點擊/可點擊的區域通常太小。 讓它更大可以讓用戶更容易地激活它們。

但是如何提高 Web 可訪問性？

定義問題是一回事。 修復它是另一回事，而且通常不像看起來那麼容易。 這是因為可訪問性 API 實現並不一致，有時我們需要找到解決方法，甚至接受這樣一個事實，即當我們試圖解決問題時，某些東西根本不起作用。

在工具方面，沒有一個工具可以檢查所有可能的組合，但作為一個好的開始，這些工具應該會有所幫助：

  • W3C 標記驗證服務——只是為了確保 HTML 內容沒有錯誤。 如果 HTML 結構有錯誤，則輸出是不可預測的並且無法正確處理，尤其是通過不同的輔助技術。

  • https://www.w3.org/WAI/ER/tools/ — 幫助您確定 Web 內容是否符合可訪問性指南的程序或在線服務列表。

  • 我的工具ASLint https://www.aslint.org/ 可以幫助您找到可訪問性問題。

始終牢記，沒有可訪問性工具可以替代手動測試，因為並非所有場景都可以完全或完全自動化，例如，檢查具有position: fixed; .

關注阻礙應用程序使用的問題，例如，用戶無法使用鍵盤瀏覽菜單。

為什麼使內容可訪問很重要

每個人都希望盡可能廣泛地傳播他們的內容。 可訪問性在許多層面上都有助於該領域，從吸引更多的受眾到改善所有用戶的用戶體驗。 此外，可訪問性不僅僅適用於您傳統上可能認為的殘疾人。 無論是正在經歷衰老並伴隨著身體變化的個體，或是晴天慢跑需要手機自動調節對比度的人，還是雙手捧滿購物袋想要通過語音發送短信的家長，都觸手可及技術是所有用戶可能不時使用的技術。

作為額外的好處，積極的影響是完全符合 WCAG 2.0 標準的可訪問內容更容易被搜索引擎抓取和理解，並且可以對網站的排名產生重大影響。 因此，可訪問的設計可以為網站帶來額外的流量。

最後，這裡有一些你需要考慮的統計數據：

  • 全世界有超過10 億人患有某種類型的殘疾。

  • 人口老齡化。 從 2015 年到 2030 年，世界上 60 歲或以上的老年人人數預計將增長 56%，從 9.01 億增加到 14 億多。

  • 通用設計是關鍵。 通用設計是指用於生產服務、產品和環境的廣泛的想法和實踐，這些服務、產品和環境本質上可以被所有能力的人訪問和使用。

  • 殘疾類型：有五種廣泛的殘疾類別，包括視覺、行動能力、言語、認知和聽力。

我們都需要高質量的服務。 讓我們也交付它們。