文章關於即將到來的 WCAG 變化的知識
已發表: 2022-10-072022 年 9 月，W3C 宣布下一版 WCAG 已達到候選推薦狀態。 除非在最後一小時進行任何更改，否則該標準的 2.2 版應盡快獲得批准。 這些變化相對較小，但任何負責網站建設或維護的人都應該知道會發生什麼。
如果您已經熟悉 WCAG，您可以跳過概述並直接跳到書呆子的細節，否則，請繼續閱讀。
什麼是 WCAG，它們為什麼重要？
Web 內容可訪問性指南 (WCAG) 包含一組標準，旨在幫助 Web 開發人員、設計人員和內容管理員確保他們的網站可供各種殘障人士訪問。 W3C 的 Web Accessibility Initiative 團隊負責該標準。 W3C 和 WAI 由行業領導者和主題專家組成的聯盟，致力於使 Web 更易於訪問。
WCAG 是根據四個可訪問性原則組織的。 這些原則規定網站必須是可感知的、可操作的、可理解的和健壯的。 這些原則中的每一個都有描述基本目標的指導方針。 每個指南中都有成功標準，這些標準描述了網站開發人員為符合 WCAG 應滿足的具體、可衡量的目標。
每個成功標準都有一個 A、AA 或 AAA 的一致性級別指標。 A 級標準更容易滿足，而 AAA 級標準最嚴格。
如果我的網站不符合 WCAG 2.2 AA 標準，我會被起訴嗎？
確定的答案是“也許”。
在美國，法律含糊不清，ADA 沒有明確針對網站。 雖然關於必須在物理空間中進行的住宿有非常具體的法律，但 ADA 說唯一可以直接應用於網站的是公司的“設施必須是可訪問的”。 即便如此，並非所有法院都同意網站是否算作公司的設施，也沒有明確的“可訪問”定義。 請注意，我們談論的是私人公司的網站和聯邦法律。 對於聯邦和一些州政府網站，有適用的法律。
因為“可訪問”沒有明確的定義，所以我們希望 WCAG 告訴我們在構建或維護網站時應該做什麼。 沒有美國法律專門推薦任何版本的 WCAG（或任何其他標準）用於公共網站。 但是，努力滿足任何版本的 WCAG 成功標準都是一個很好的目標。 它應該指向一個所有人都可以合理訪問的站點。
標準是如何制定的？
與普遍的看法相反，標準制定不是由少數參與者在像牙塔中進行的。 雖然大部分工作是由成員組織的員工完成的，但很大一部分工作來自受邀的專家和其他對該主題充滿熱情並願意投入時間的個人。 此外，許多標準團隊都有開放的公共論壇，鼓勵社區成員通過提問或提出新問題參與其中。
對於 WCAG，公眾可以通過打開新問題、拉取請求或僅參與 Github 上 WCAG 存儲庫中的現有討論來閱讀和評論標準。 當帶著想法來到小組時，搜索所有現有問題並拉取請求總是明智的，以確保您的想法尚未被提出。 如果您正在考慮通過拉取請求為 WCAG 做出貢獻，請務必花時間打開問題並首先討論您的想法。 您很有可能會為自己節省一些不必要的工作。
為標準做出貢獻可能會令人沮喪和困難，但它也非常有益。 在大多數情況下，參與者非常熱情和耐心。 如果您花時間研究自己的想法，盡職盡責，並且彬彬有禮並尊重他人，那麼您的貢獻將受到歡迎。 最壞的可能結果是，您對主題的熟悉程度將超出您的想像。
有什麼變化？
WCAG 2.2 中更改了一項現有的成功標準，並添加了九個全新的成功標準。 在這裡，我們將自己限制在 A 級和 AA 級，因為我們很少以 AAA 級為目標。 要查看所有新標準，請查看 W3C 的完整文章，
2.4.7 焦點可見（A）
此標準已從 AA 級更改為 A，這是 WCAG 符合性的最低標準。 它存在的部分原因是，在不遠的過去，建立網站的人移除焦點環是一種常見的做法。 畢竟，它們不是設計的一部分。 這意味著使用鍵盤瀏覽網頁的用戶無法看到他們在頁面上的位置。 將此標準移至單 A 是有道理的，因為如此大量的用戶依賴於鍵盤導航，即使是那些沒有任何形式障礙的用戶。
默認情況下，所有主要的網絡瀏覽器都會顯示焦點環。 這裡的關鍵要求是不要破壞內置功能。
W3C – 理解焦點可見
2.4.11 焦點外觀（AA）
這個新標准定義了一些關於聚焦環可見性的明確規則。 它們必須與周圍像素及其替換的像素具有 3:1 的對比度。 它們還必須包圍被聚焦的元素或子組件，或者沿著元素的最短邊緣與 4 像素粗線一樣大。
同樣，瀏覽器的默認焦點環通常會滿足這個標準。 由於用戶習慣於默認設置，因此您應該只在必要時覆蓋這些設置。 一個例子可能是默認對焦環和您品牌的原色之間的顏色對比不足。 瀏覽器通常默認使用藍色焦點環，因此如果您的品牌調色板中有藍色，則可能存在衝突。
W3C – 了解焦點外觀
2.4.12 焦點不被遮擋（最低）（AA）
該標準規定，用戶生成的內容不能完全掩蓋焦點。 這是為了防止分層內容，例如粘性導航（用戶滾動時停留在窗口頂部的菜單欄）覆蓋焦點指示器。
這裡最簡單的解決方法是根本沒有任何粘性元素。 然而，現代網站大量使用粘性導航和浮動 CTA，因此這可能不是一種選擇。 有一些期望，scroll-padding 和 scroll-margin CSS 屬性有一天會允許我們定義一個偏移量來適應粘性導航。 目前，這些屬性僅用於利用滾動捕捉的元素。
這給我們留下了 JavaScript。 通常，我們的目標是僅在必要時在瀏覽器中使用 JavaScript。 這個 StickyFix 函數將監視主元素內的可聚焦元素，如果它們在獲得焦點時被粘性導航遮擋，它們將被滾動到視圖中。
要使用此功能，只需將其包含在您網站的 JavaScript 文件中。
/** * A minimal function that will detect if a focusable element is obscured by sticky navigation * This only works for sticky elements at the top of the page, but could be extended * @author Donovan Buck <[email protected]> * @param {string} selector - A valid CSS selector string for the sticky element * @param {number} offset - An additional offset for the focused element * * @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors * @tutorial https://www.brandextract.com/Insights/Articles/Changes-to-the-Web-Content-Accessibility-Guidelines/ * @license MIT */ function stickyFix(selector, offset = 0) { // Find the height of our sticky element const sticky = document.querySelector(selector); let stickyRect = sticky.getBoundingClientRect(); let stickyHeight = stickyRect.bottom - stickyRect.top; // Select all the focusable elements within the main element const focusables = document.querySelectorAll('main button:not([disabled]), main [href], main input:not([disabled]), main select:not([disabled]), main textarea:not([disabled]), main [tabindex]:not([tabindex="-1"]):not([disabled]), main details:not([disabled]), main summary:not(:disabled)'
); // Add a listener to each focusable element focusables.forEach(focusable => { focusable.addEventListener('focus', (event) => { const targetRect = event.target.getBoundingClientRect(); if(targetRect.top < stickyHeight + offset) { window.scrollTo({ top: targetRect.top + window.scrollY - stickyHeight - offset }); } }); }); };然後您可以調用該函數：
// Wait for the document to load document.addEventListener("DOMContentLoaded", function() { stickyFix('.sticky', 24); });了解焦點不被遮擋（最低）
2.5.7 拖動動作（AA）
該標準規定，如果拖動動作是用戶界面的一部分，則必須提供一種替代方法，允許簡單的點擊操作。 這方面的一個示例可能是允許用戶將文件從他們的計算機拖放到瀏覽器中以進行上傳的表單。 您必須確保用戶也可以使用他們的文件上傳對話框來選擇應該上傳哪些文件。 在大多數網站 UI 中，通常不需要拖動動作，除了這一點。
了解拖動動作
2.5.8 目標大小（最小）（AA）
任何指針目標必須至少為 24 x 24 像素，除非該目標距每個相鄰目標至少 24 像素，或者目標位於句子或文本塊中。 在檢查此標準的設計時，請非常小心地檢查僅使用圖標和所有導航列表的社交共享鏈接。
了解目標大小（最小）
3.2.6 一致的幫助（A）
假設您的網站包含聯繫方式、自助選項或出現在多個頁面上的任何联系機制。 在這種情況下，這些元素應該以相對於您網站中其他頁面內容的相同順序出現。 這在很大程度上是良好、一致的設計的功能，並且這個標準應該不難滿足。
了解一致的幫助
3.3.7 無障礙認證（AA）
強迫用戶記住用戶名和密碼可能會給認知障礙者帶來過度的負擔。 因此，Web 開發人員不應創建不允許使用密碼管理器或複制和粘貼的登錄過程。 該標准允許替代身份驗證方法，只要它們不依賴於認知功能測試，例如記住密碼或解決難題。
了解可訪問的身份驗證
3.3.9 冗餘條目（A）
該標準規定，用戶先前在同一過程中輸入的任何信息都將自動填充或可供用戶選擇，而不必手動重新輸入信息。 顯然，這對任何人來說都應該是一種預期的便利。
了解冗餘條目
參考
- WCAG 2.2 草案中的新功能
- W3C 在 Github 上的 WCAG 存儲庫