可訪問前端組件的完整指南

目錄

您將在下面找到按字母順序排列的所有可訪問組件的列表。 跳過目錄，或者只是向下滾動以逐個瀏覽它們。

• :focus 樣式
• 自動完成
• 鈕扣
• 牌
• 旋轉木馬
• “關閉”按鈕
• 內容滑塊
• 複選框
• 顏色系統
• 調色板
• 漫畫
• 組件庫
• cookie 同意提示
• 當前頁面導航
• 黑暗模式
• 數據圖表
• 數據可視化
• 日期選擇器
• 禁用按鈕
• 分隔線
• 表單樣式
• 腳註
• 隱藏內容
• 圖標鏈接
• 輸入
• 鍵盤導航
• 鏈接
• 媒體捲軸
• 情態
• 導航菜單
• 密碼字段
• 偏好減少-*
• 單選按鈕
• 骷髏
• “跳過”鏈接
• SVG
• 標籤
• 表
• 測試
• 第三方組件可訪問性
• 撥動開關
• 工具
• 工具提示
• 視頻/音頻播放器

可訪問:focus樣式

每個瀏覽器都有默認的焦點樣式，但開箱即用，它們不是很容易訪問。 :focus的目標是為用戶提供有關他們在文檔中的確切位置的指導，並幫助他們瀏覽文檔。 為了實現這一點，我們需要避免過於微妙或根本不可見的焦點。 事實上，刪除輪廓是一個壞主意，因為它會刪除鍵盤用戶任何可見的焦點指示。 焦點越明顯越好。

有設計更好的方法:focus樣式。 在她的文章“焦點樣式提示”中，Nic Chan 強調了一些有用的技巧，這些技巧是關於如何通過更好的可見性以及一些填充、偏移和適當的輪廓來改進焦點樣式。 需要更多樂趣:focus樣式？ Lari Maza 也支持您。

我們還可以使用:focus-within來設置焦點元素的父元素的樣式，使用:focus-visible來在與鼠標/指針交互時不顯示焦點樣式（如果它會導致您的設計出現任何問題）。

重要的是要考慮圍繞:focus-visible的可訪問性問題：正如 Hidde de Vries 所指出的那樣，並非所有依賴焦點樣式的人都使用鍵盤，並且使焦點樣式僅鍵盤也帶走了鼠標用戶的可供性，因為焦點也表示某些東西是交互式的（感謝 Jason Webb 的提示！） 。

最後，值得注意的是，最近 Chrome、Edge 和其他基於 Chromium 的瀏覽器在用戶單擊或點擊按鈕時停止顯示焦點指示器（焦點環） （感謝 Kim Johannesen 的提示！） 。

可訪問的自動完成

每次您必須處理更大的數據集時，無論是地圖、數據可視化，還是只是結帳時的國家/地區選擇器，自動完成功能都可以大量增加客戶的輸入。 但就像它有助於輸入一樣，它也需要幫助向屏幕閱讀器用戶宣布選項和選擇。

英國政府數字服務背後的團隊 Gov.uk 擁有開源的可訪問自動完成（以及許多其他東西），這是一個遵循 WAI-ARIA 最佳實踐的 JavaScript 組件。 您可以選擇何時開始顯示建議，並允許將菜單顯示為絕對定位的疊加層，或者默認選擇第一個建議。 該團隊還提供了一個演示頁面，其中包含十幾個可訪問的自動完成示例和實現。

可訪問的按鈕和圖標鏈接

鏈接或按鈕在視覺上沒有文本但僅包含一個圖標（例如緊湊的導航欄或社交圖標）的情況並不少見。 但是你如何確保這些圖標鏈接是完全可訪問的？ 事實證明，這並不像人們想像的那麼簡單。

為了展示我們可以如何做得更好，Kitty Giraudel 專門針對該問題發表了一篇文章“Accessible Icon Links”。 他們使用由帶有標誌性 Twitter 鳥的 SVG 組成的圖標鏈接來說明這一點，並逐步展示如何使其可訪問：使用視覺隱藏的描述性文本，然後使用aria-hidden從可訪問性樹中刪除 SVG 標記aria-hidden ，最後，通過添加focusable屬性更正了svg元素可以集中在 Internet Explorer 上的事實。 在文章的最後，Kitty 還展示瞭如何將所有這些變成一個小的React 組件。

一個小細節將對許多用戶產生巨大影響。

在創建可訪問的圖標按鈕和包容性隱藏中，Sara Soueidan 和 Scott O'Hara 深入探討了圖標按鈕的所有精細複雜性和細節，探索了許多使其工作的技術。 Sara 和 Scott 探索了多種技術，建議使用適當的技術來訪問視覺隱藏的文本——這些文本將在視覺上隱藏但屏幕閱讀器可以訪問。 這可以使用.sr-only實用程序類，或hidden和aria-labelledby或單獨aria-label來完成。 當我可以直接在按鈕本身上提供標籤時，Sara 不建議使用 SVG 圖標本身來為按鈕提供標籤。

但總的來說，使用哪個元素進行用戶交互仍然存在相當多的困惑：我們什麼時候使用鏈接，什麼時候使用按鈕？ Marcy Sutton 寫了一篇關於現代應用程序中的鏈接與按鈕的詳細文章。 通過鏈接，訪問者導航到新資源，將它們從當前上下文中帶走。 但是一個按鈕會提示界面的變化。

Marcy 概述了單頁應用程序中鏈接和按鈕的用例，表明按鈕是打開模式窗口、觸發彈出窗口、切換界面或播放媒體內容的完美元素。 您還可以查看 Vadim Makeev 的文章“When Is A Button Not A Button?”。

可訪問的禁用按鈕

在客戶正確提供所有數據之前，冗長的 Web 表單禁用“繼續”按鈕已變得很常見。 這種行為表明表單有問題，如果不檢查輸入就無法完成。 如果每個輸入字段的內聯驗證運行良好，則此方法有效，並且在出現故障或錯誤時根本不起作用。

在“Disabled Buttons Suck”中，Hampus Sethfors 強調了禁用按鈕的缺點。 有了它們，我們確實傳達出了問題所在，但我們並沒有真正解釋什麼是錯誤的，或者如何解決它。 因此，如果客戶忽略了一條錯誤消息——無論是台式機上的冗長形式，還是移動設備上的簡短形式，它們都會丟失。 在許多方面，保持按鈕處於活動狀態並傳達錯誤會更有效。

如果不可能，至少提供一個“我無法填寫表格，請幫助”按鈕的方法，以便客戶支持可以在遇到麻煩時回复客戶。 如果您需要更詳細的 Web 表單複習，“從 1 到零的表單設計”會讓您忙碌。

在她關於 CSS-Tricks 的文章中，Sandrina Pereira 探討了使用<button disabled>的常見方式不僅會阻止點擊而且會阻止焦點的問題。 雖然這似乎無害，但它會導致屏幕閱讀器用戶感到困惑。 她的建議：將disabled與aria-disabled交換會使體驗更加愉快，因為按鈕仍然可以通過焦點訪問，並且它也可以觸發工具提示 - 儘管標記為 disabled。

無障礙卡

卡片提供了很多優勢。 它們在移動設備上運行良好，提供較大的點擊區域，而且它們可以水平和垂直堆疊的事實使許多佈局決策更容易。 然而，沒有可訪問性標準，沒有<card>元素或 ARIA 設計模式。 相反，您可能遇到的潛在可訪問性障礙取決於卡片的用途和內容。 在他的包容性組件集合中，Heydon Pickering 研究了簡單卡片組件的一些排列以及如何在合理的 HTML 結構和符合人體工程學的交互之間保持平衡。

Adrian Roselli 還寫了一篇很棒的文章，該文章解決了卡片的一個方面，該方面很容易變成其主要的可訪問性陷阱：大點擊區域。 當用戶使用屏幕閱讀器導航它們時，它們可以製作極其冗長的控件； 對於語音用戶來說，選擇號召性用語可能會讓人感到困惑。 Adrian 演示瞭如何通過一點計劃來解決這個問題。

Nomensa 團隊對可訪問卡片組件的另一項深入研究：在他們的博客文章中，他們查看了卡片的常見問題並阻止鏈接，並分享了使您的卡片更易於訪問的寶貴技巧——通過重新排序內容以改進例如語義。

可訪問的輪播和內容滑塊

可訪問的輪播聽起來有點矛盾——雖然有很多腳本可以提供該功能，但其中只有少數是可訪問的。 當然，現在有可訪問的範圍滑塊，但輪播是一個稍微不同的組件。 正如 Alison Walden 在她關於“如果您必須使用旋轉木馬，請使其易於訪問”的文章中註意到的那樣，視力正常的人根本不會被迫使用旋轉木馬，但鍵盤用戶被迫在整個旋轉木馬中導航。 至少，鍵盤焦點上可能會出現一個隱藏的“跳過”鏈接。 此外，一旦用戶瀏覽了所有面板集，焦點應移至輪播之後的下一個交互元素。

Heydon Pickering 建議使用列表標記將幻燈片組合在一起，包括上一個和下一個按鈕、捕捉點，並使用從焦點中移除的不可見鏈接項目。 本文還提供了一個使用 IntersectionObserver 的代碼示例，因此您可能需要一個 polyfill。

可訪問的關閉按鈕

“關閉”按鈕無處不在——在模式、廣告、確認消息、cookie 提示和任何將出現在您的界面中的疊加層中。 不幸的是，該功能通常僅限於鼠標用戶，而將屏幕閱讀器用戶和鍵盤用戶排除在外。 我們可以修復它。

在“可訪問的關閉按鈕”中，Manuel Matuzovic 深入細節，重點介紹了 11 個無法訪問的關閉按鈕的示例和模式，以及 5 個運行良好的關閉按鈕示例。 解決該問題的最簡單方法是提供一個帶有可見文本和僅可視可訪問圖標的按鈕，並確保屏幕閱讀器的描述不受圖標描述的污染。 Manuel 還提供了 5 個關閉按鈕的代碼示例，您可以立即將其應用到您的工作中。

可訪問的複選框和單選按鈕

好問題：我們如何設置複選框和單選按鈕的樣式，以確保它們在大多數瀏覽器中看起來至少相似——同時確保它們也可以訪問？ 在她的文章中，Sara Soueidan 介紹了一些需要牢記的技巧，以達到預期的效果。

Sara 介紹了隱藏元素的不同技術，每種技術如何影響內容的可訪問性，以及如何在視覺上隱藏它們，因此它們可以被替換為更具風格的替代方案：SVG。

隱藏交互式元素時，我們需要確保選擇一種隱藏技術，使其保持屏幕閱讀器可訪問，將其放置在視覺上替換它的任何內容之上，以便通過觸摸導航的用戶可以在他們期望的位置找到它，然後讓它透明。 Sara 還提供了我們可以立即使用的現場演示，以及對文章的有用參考，以供進一步閱讀。

可訪問的顏色系統

獲得正確的色彩對比度是確保不僅有視力障礙的人可以輕鬆使用您的產品，而且其他人在光線不足的環境中或使用舊屏幕時也可以輕鬆使用您的產品的重要部分。 但是，如果您曾經嘗試過自己創建一個可訪問的顏色系統，您可能知道這可能是一個相當大的挑戰。

Stripe 的團隊最近決定應對挑戰並重新設計他們現有的色彩系統。 它應該提供開箱即用的好處：通過可訪問性指南，使用用戶可以輕鬆區分的清晰和充滿活力的色調，並具有一致的視覺重量，而不會出現一種顏色優先於另一種顏色的情況。 如果您想了解更多關於他們的方法的信息，他們關於可訪問顏色系統的博客文章將為您提供寶貴的見解。

可訪問的調色板

找到完美的色調或色調不僅是品味問題，也是可及性的問題。 畢竟，如果缺乏色彩對比，在最壞的情況下，產品甚至可能對視力障礙者無法使用。 WCAG 2.0 AA級要求普通文本至少4.5:1的對比度。）和大文本3:1的對比度，WCAG 2.1要求圖形和UI組件（如表單輸入）至少3:1的對比度邊界）。 AAA 要求普通文本的對比度至少為 7:1，大文本的對比度至少為 4.5:1。 Gianluca Gini: Geenes 提供了一個非常詳細的對比度檢查器，可幫助您提前發現潛在的缺陷。

該工具可讓您修改色調範圍和飽和度，並將調色板應用於三個可選 UI 模型之一。 應用後，您可以觸發不同類型的視力障礙，以了解受影響的人如何看待顏色，最後，就您的調色板的最佳色調做出明智的決定。 要立即使用顏色，只需複制並粘貼它們的代碼或將它們導出到 Sketch。 您還可以在 DevTools 中模擬視覺缺陷。

了解視覺障礙

您以前可能聽說過紅眼病、紅眼病或青光眼。 但是像這樣的視力障礙的人是如何真正看到你的顏色組合的呢？ Corey Ginnivan 的工具Who Can Use為您模擬了它。

輸入背景和文本顏色，該工具會為您計算對比度以及 WCAG 分級。 為了使這些相當抽象的數字人性化， Who Can Use還顯示了不同視覺類型的列表，有多少人受到它們的影響，當然還有模擬每種類型的顏色組合。 一個很好的小幫手，可以更好地理解顏色的效果。

無障礙漫畫

當我們在網絡上使用稍微複雜的形狀和佈局時，有時將其保存為前景或背景圖像並為大小屏幕提供不同的圖像似乎要容易得多。 這適用於復雜的圖表和帶有對話氣泡的舊漫畫，但如果我們可以完全重新想像這種體驗呢？

Comica11y 是 Paul Spencer 的一項實驗，旨在實現包羅萬象的在線漫畫閱讀體驗。 如果我們可以為漫畫提供不同的閱讀模式，例如隱藏式字幕、在面板之間導航的適當焦點管理、高對比度模式、SVG 色盲過濾器、程序氣泡、可選擇和可翻譯的文本、LTR 和 RTL 支持，甚至字體大小可調？ 一個絕妙的舉措，展示了我們可以在多大程度上應對 UI 挑戰並使用 Web 來極大地增強體驗。

可訪問的組件庫

雖然我們創建的許多組件庫都試圖涵蓋所有常見的問題（手風琴、表格、旋轉木馬、下拉菜單，以及排版、顏色和框陰影），但 Adam Silver 的 No Style Design System 專注於主要圍繞可訪問性和網絡表單。

作為一個為他的表單設計模式一書中創建和使用的系統，Adam 的庫提供了一組可訪問的組件，用於從自動完成、複選框和密碼顯示到收音機、選擇框和步進器的所有內容。 它們中的大多數都具有簡潔、易於訪問的標記的最小 CSS 樣式。

如果您需要更高級的組件，Heydon Pickering 的包容性組件（我們在上面提到了一些示例）將為您提供支持：提供有關可訪問卡片、數據表、通知、滑塊、選項卡式界面、工具提示、菜單和切換的綜合教程。

可訪問的 Cookie 同意提示

覆蓋和彈出窗口總是有問題的。 但特別是對於屏幕閱讀器用戶來說，有時這些提示很難處理以設置任何設置，甚至確認網站上 cookie 的使用。 在她關於“屏幕閱讀器和 cookie 同意”的 15 分鐘演講中，Leonie Watson 詳細解釋了合規性彈出窗口在可訪問性方面的糟糕體驗。 在某些情況下，用戶在不知情的情況下滑過同意提示，在其他情況下，提示無法接受，導致根本無法使用該網站。

那麼我們怎樣才能讓它們變得更好呢？ 在 Cookie 橫幅和可訪問性中，Sheri Byrne-Haber 強調了 cookie 提示通常存在的常見問題：從它們在視覺上的顯示方式到焦點陷阱、標籤順序的外觀、接受的類型和同意披露的替代格式。 Quentin Bellanger 提供了一個 cookie 同意模式的基本代碼示例和一個教程。 還有免費的開源解決方案：Osano Cookie Consent 和 cookie-consent-box，但它們可能需要一些可訪問性工作。

可訪問的當前頁面導航狀態

顏色是傳達意義的有效方式，但對於視力低下或色覺缺陷的人來說，擁有第二個視覺指標總是一個好主意。 例如，一個圖標。 Callum Hart 依靠顏色/圖標組合來指示用戶當前所在的頁面。 在他的博客文章“可訪問的當前頁面導航狀態”中，他分享了有關此設計決策背後考慮因素的寶貴見解。

從內聯 HTML 中的 SVG 圖標和使用aria-hidden將其從輔助技術中隱藏到使用 ems 而不是像素以及為具有aria-current屬性的屏幕閱讀器用戶傳達額外的上下文，這篇文章提供了深入了解如何迎合真正可訪問的導航狀態。

網絡黑暗模式的完整指南

深色模式正迅速成為用戶偏好，Apple、Windows 和 Google 已將其實施到他們的操作系統中。 但是網絡上的暗模式呢？ Adhuham 編寫了一份關於暗模式的綜合指南，深入研究了在網絡上實施暗模式設計的不同選項和方法。

首先，該指南著眼於實現暗模式所需的技術注意事項，涵蓋切換主題的不同方法以及如何存儲用戶的偏好，以便在整個站點和後續訪問中一致地應用它們。 使用color-scheme元標記處理用戶代理樣式的提示有助於避免潛在的 FOIT 情況。

當然，設計方面的考慮也得到了解決，其中提供了寶貴的技巧，讓圖像、陰影、排版、圖標和顏色為暗模式做好準備。 同時：為確保我們不會無意中破壞模式中的高對比度，請查看 Windows 高對比度模式的樣式（感謝 Courtney Heitman 的提示！ ）。

可訪問的數據圖表

數據可視化是使信息脫穎而出的好方法。 但是，它們也有自己的可訪問性挑戰。 當 Sara Soueidan 與 SuperFriendly 合作為可汗學院的年度報告創建一個可訪問的微型站點時，她希望確保數據的呈現和實施方式盡可能易於訪問，無論訪問者如何瀏覽該站點。 她的解決方案：SVG。

在一個關於可訪問數據圖表的案例研究中，Sara 總結了當您想要使 SVG 圖表和可視化可訪問時需要考慮的一切——從選擇適當嵌入技術的最重要步驟開始。 它還介紹了為什麼您應該避免嘗試使用 ARIA 角色使 SVG 圖表可訪問，以及為什麼 Sara 沒有選擇<figure>來嵌入它們。 一個很棒的參考指南。 另外：特別是在圖表上，我們還可以使用更易於訪問的文本標籤，Sara 也在另一篇文章中介紹了它們。

可訪問的數據可視化

數據可視化通常包含用戶必須採取行動的重要信息。 雖然有時我們可以用短句代替大量數字，但可視化可以幫助更快地理解發展和大量信息。 但這意味著信息必須易於理解，尤其是顏色的選擇、信息的呈現方式、標籤、圖例以及圖案和形狀。 在他們關於數據可視化可訪問性的系列文章中，Sarah L. Fossheim 重點介紹了圍繞該主題的有用指南和資源，以及在設計可訪問數據可視化時要記住的示例、注意事項和注意事項。

Sarah 建議不要依賴顏色來解釋數據，一般要避免使用明亮和低對比度的顏色。 除了顏色之外，使用圖案和形狀很有用，清晰的語言、標籤和圖例有助於清楚地解釋數據可視化。 每篇文章都包含大量示例和資源以供進一步閱讀。 還值得一看：Sarah 對美國總統選舉數據可視化的評論（感謝 Stephanie Eckles 的提示！ ）。

可訪問的日期選擇器

那裡有幾十個日期選擇器庫，但是擁有可靠的主力工具總是很棒，它們可以跨瀏覽器工作，沒有嚴重的依賴關係，編寫得相當好，並且滿足所有主要的可訪問性要求。

Duet Date Picker 就是這樣。 它是一個可訪問的、符合 WCAG 2.1 的日期選擇器，可以跨任何 JavaScript 框架或根本沒有框架實現和使用。 它帶有內置功能，可讓您設置允許的最小和最大日期，壓縮和 Gzip 壓縮後的重量約為 10kb（包括所有樣式和圖標）。

如果您需要替代方案，請查看 React Dates，這是 Airbnb 發布的一個庫，針對國際化進行了優化，同時也易於訪問且適合移動設備使用。

設計水平分隔線

<hr>元素通常很無聊。 提供視覺中斷和劃分內容的簡單水平線。 但是您是否知道它們可以使用 CSS 和 SVG 進行樣式設置，從而為您的內容和設計提供良好的個人風格？

Sara Soueidan 正是這樣做的：她個人網站上的<hr>不會顯示為無聊的線條，相反，您會看到坐在電線上的鳥。 為了幫助您使您的<hr>更令人愉悅，Sara 總結了她如何借助一些 CSS 和 SVG 魔法來設置水平線的樣式。 她還研究了進一步改進它們的方法，以便它們適應各種環境，同時保持語義和可訪問性。 一個不錯的小細節。

可訪問的跨瀏覽器表單樣式

您是否曾經為隱藏和設置自定義復選框和單選按鈕而苦惱？ 自定義選擇樣式呢？ 或者也許是一個可訪問的下拉導航菜單？ 我們總是傾向於構建和重建相同的組件，所以讓我們一勞永逸地把它們做好。

Sarah Higley 的“<select> 你的毒藥”是對<select>元素樣式的所有挑戰和復雜性的全面的兩部分深入探討，具有可編輯和多選變體，它們的比較可​​用性（帶有數據！）和實用建議如何正確處理。

Stephanie Eckles 的舊 CSS 問題的現代 CSS 解決方案強調了許多有用的現代技術來解決大量挑戰，但她系列中的一些文章專門針對錶單：CSS 自定義復選框、樣式單選按鈕、選擇樣式、輸入和文本區域。

在她的博客上，Sara Soueidan 詳細解釋瞭如何以包容性的方式隱藏和設置複選框和單選按鈕的樣式。 獎勵：Adrian Roselli 的代碼示例提供了對設計不足的切換的更多見解。 立即使用的神奇資源和可訪問的樣式。

負責任地隱藏內容

您如何負責任地隱藏內容以使其不可見但仍可供屏幕閱讀器訪問？ Kitty Giraudel 總結了隱藏某些東西的不同方法，無論是使用 HTML 還是 CSS，以及何時使用。

正如 Kitty 建議的那樣，您可能希望避免在可視內容和暴露給可訪問性層的底層內容之間出現太多差異。 它們越同步越好。 Kitty 定義了三種不同的場景來幫助您評估何時使用哪種技術： 如果您需要在可視化和可訪問性樹中隱藏某些內容（例如，顯示/隱藏小部件、屏幕外導航或關閉的對話框），請使用display: none或hidden的 HTML 屬性。 如果您需要從可訪問性樹中隱藏某些內容但保持可見，請使用aria-hidden="true" （有效的情況是沒有意義的視覺內容，圖標）。 最後但並非最不重要的一點是，如果您想隱藏某些內容但保持可訪問性，請使用視覺隱藏的 CSS 聲明組（例如，用於提供更多上下文的補充內容，例如圖標按鈕或鏈接）。 很棒的概述。

可訪問的腳註和旁注

從本質上講，腳註只不過是跳轉鏈接——指向源描述的鏈接，或者放置在文檔底部，或者在側邊欄中，或者出現內聯，有點手風琴。 然而，由於腳註是跳轉鏈接，我們需要確保屏幕閱讀器用戶理解鏈接何時引用腳註——我們可以使用aria-describedby屬性來做到這一點。 每個鏈接的計數器將通過 CSS 計數器實現。 使用:target ，我們會突出顯示讀者跳轉到的行，並提供一個反向鏈接，返回內容中的實際腳註位置。

Kitty Giraudel 詳細解釋瞭如何構建可訪問的腳註，您還可以檢查如何使用 React 構建可訪問的腳註並使用 react-a11y-footnotes 在 React with Eleventy 中構建它們（感謝 Kitty Giraudel 的提示！） 。

可訪問的輸入

2019 年，WebAIM 分析了前 100 萬個網站的可訪問性，得出了一個令人震驚的結論：無錯誤頁面的百分比估計低於 1%。 為了使我們的網站對依賴輔助技術的人具有包容性和可用性，我們需要正確掌握語義 HTML 的基礎知識。 憑藉從小處著手、分享和合作的信條，Oscar Braunert 關於包容性投入的文章是一個很好的起點。

本文從 WAI、ARIA 和 WCAG 的基礎知識開始，探討如何使輸入更易於訪問。 這些提示可以在不改變用戶界面的情況下實現，正如 Oscar 所說：“如果有疑問，就去做。 沒有人會注意到。 除了你的一些用戶。 他們會為此感謝你的。”

完美鏈接

鏈接是鏈接是鏈接，​​對吧？ 好吧，鏈接不僅僅是可點擊的文字或圖像。 在她的文章“完美鏈接”中，Rian Rietveld 研究瞭如何編寫、設計和編碼適用於每個設備上的每個人的鏈接。

Rian 涵蓋了鏈接是否應該在新窗口或新選項卡中打開、如何使鏈接文本易於理解、如何處理指向電子郵件地址、電話號碼或文件的鏈接以及將圖像嵌入到鏈接，何時下劃線以及如何處理懸停和焦點樣式，以及語義問題和內部鏈接。 360 度全方位審視這個話題。

可訪問的應用程序範圍的鍵盤導航

一個經過深思熟慮的鍵盤導航概念使每個人都受益：它使不能舒適地使用鼠標的人能夠使用，幫助屏幕閱讀器用戶與應用程序交互，並為高級用戶提供更多快捷方式以盡可能高效地工作。 通常，鍵盤支持僅限於特定的快捷鍵，但 Discord 的團隊決定在他們的應用程序上更進一步，並將鍵盤支持擴展到所有內容。

案例研究“Discord 如何實現應用程序範圍的鍵盤導航”分享了他們如何解決任務的寶貴見解——當然還有他們在此過程中面臨的挑戰。 一個結果特別困難：如何始終如一地指出頁面上的焦點在哪裡？ 由於現有的 Focus Rings 解決方案無法奏效，團隊不得不從頭開始構建自己的解決方案並將代碼開源。 如果您面臨類似的挑戰，那麼這個適合您。

可訪問的點擊/單擊菜單

設計懸停時打開的大型下拉菜單仍然是一個好主意嗎？ 可能不是。 懸停菜單有很多可用性和可訪問性問題，因為它們不一致、令人困惑，當然需要移動設備的替代解決方案。 事實上，Mark Root-Wiley 建議是時候放棄懸停菜單以支持明確且易於訪問的點擊菜單。

在他的文章中，Mark 詳細介紹瞭如何構建可訪問的點擊菜單，以及他研究中的有用指針和參考資料。 想法是開始將菜單構建為純 CSS 懸停菜單，使用li:hover > ul和li:focus-within > ul來顯示子菜單。 然後，我們使用 JavaScript 創建<button>元素，設置aria屬性，並添加事件處理程序。 最終結果可作為 CodePen 上的代碼示例和 GitHub 存儲庫獲得。 這也應該是您菜單的一個很好的起點。

可訪問的媒體滾動器組件

您將如何創建一個適用於電視、手機和台式機的響應式媒體滾動組件？ Adam Argyle 將帶您逐步完成整個過程。

滾動條組件旨在承載媒體或產品的縮略圖，它建立在具有可訪問標記的<ul>之上。 CSS 將不起眼的列表轉換為流暢的滾動體驗，展示圖像並將它們捕捉到網格。 為了增加一些技巧，JavaScript 促進了漫遊索引交互，幫助鍵盤用戶跳過遍歷大量項目，最後但並非最不重要的一點是，實驗性的prefers-reduced-data媒體查詢將媒體滾動器變成輕量級體驗，如果需要的話. 聰明的！

可訪問的模態

您可能在頁面上有一個簡單的模式或覆蓋，可能是為了確認客戶的輸入，或者在畫廊中顯示幾張照片，或者只是為了確認用戶的偏好。 在所有這些情況下，構建一個可訪問的模態將變成一場冒險，也被稱為焦點陷阱。

正如 Eric Bailey 詳細解釋的那樣，您需要確定被困內容的邊界，包括第一個和最後一個可聚焦項目，然後刪除不在其中的所有內容，將焦點移到被困內容中，偵聽逃脫的事件邊界，恢復之前的狀態並將焦點移回觸發被困內容的交互元素。

理想情況下，我們會使用像 HTML 中的dialog元素這樣簡單的東西，但不幸的是它存在大量可訪問性問題。 使用 Shadow DOM，管理焦點也不是一件容易的事。 我們可以使用inert屬性來移除，然後恢復交互元素被發現和聚焦的能力。 對於較舊的瀏覽器，我們可以使用來自 Google Chrome 和 WICG 的inert polyfill。

• Scott O'Hara 的 access-modal-window 是一個可靠的完全可訪問的腳本。
• Kitty Giraudel 將很快發布 a11y-dialog Next，這是一個輕量級 (1.6 KB) 腳本，用於捕獲和恢復焦點、切換aria–*屬性並在覆蓋單擊和 Escape 時關閉對話框。 重要的是不要將此版本與以前的版本(6.1.0) 混淆，因為它依賴於仍然缺乏實現支持的<dialog>並且具有揮之不去的可訪問性問題。
• 您可以查看 Parvus，這是一個簡單、可訪問、無依賴的開源圖像燈箱。 在一個典型的場景中，我們會有一個鏈接到更大版本的圖像的圖像。 使用 Parvus，將.lightbox類添加到環繞圖像的鏈接就足夠了，腳本會自動為您完成其他所有工作。

可訪問的密碼字段

“顯示密碼”和密碼提示使表單字段更有用。 它們幫助用戶弄清楚他們是否輸入了錯誤的密碼，以及在創建新密碼時可以接受哪種模式。 然而，事實證明，當涉及到這些事情時，通常缺乏可訪問性。

為了幫助您改善這種情況，Nicolas Steenhout 仔細研究了顯示/隱藏密碼的可訪問性以及如何確保密碼提示對每個人都有幫助。 從增強具有switch和aria-live和aria-pressed角色的顯示/隱藏按鈕到支持自動完成，Nicolas 總結了您需要了解的所有內容，以使 Web 在這方面更易於訪問。

使用prefers-reduced-*支持用戶首選項

並非每個用戶都是相同的，雖然有些用戶喜歡動畫，但其他用戶可能會遇到有關運動的醫療問題。 prefers-reduced-motion媒體查詢可讓您打開和關閉動畫，但還有更多解決方案可以根據用戶的偏好來管理動畫。 在他的博客文章中，Elijah Manor 介紹了不同的技術，例如 @media、matchMedia 和自定義 React 掛鉤來處理 CSS、SVG SMIL 和 JavaScript 動畫。

當涉及到讓每個人都可以訪問您的內容時，還有另一個值得了解的prefers-reduced-*媒體查詢——即使瀏覽器還不支持它（但您可以在 Polypane 和 Chromium 瀏覽器中模擬它）： prefers-reduced-data 。 它指示用戶何時希望使用盡可能少的數據——例如，如果他們的連接速度很慢，或者數據是否有限。

• Tatiana Mac 寫了一篇關於對動畫採取無動作優先方法的非常詳盡的文章，建議將所有動畫特定樣式放在動畫特定樣式表中，並且僅在訪問者未指示“減少動作”時才提供它。
• Kitty Giraudel 提供了有關在銀行 UI 示例和代碼示例中實現縮減運動模式的指南。
• Polypane 團隊總結了您需要了解的有關媒體查詢的信息，以使您的網站今天已經過時。

可訪問的骨架

骨架圖案往往缺乏向屏幕閱讀器展示自己的有意義的方式。 他們經常在加載小部件時使用aria-busy="true" ，但實際上只有少數屏幕閱讀器支持該屬性。 那麼如何做得更好呢？

正如 Adrian Roselli 建議的那樣，您可以使用 CSS 查找任何具有aria-busy="true"節點並將其設置為display: none以實現屏幕閱讀器和非屏幕閱讀器用戶的相同效果。 在他的文章“更易於訪問的骨架”中，他將逐步引導您完成該過程。 該演示適用於具有當前版本的 JAWS、NVDA、VoiceOver 和 TalkBack 的瀏覽器。

可訪問的“跳過”鏈接

特別是在具有大量導航的頁面上，在部分之間或頁面周圍移動可能會令人沮喪和煩人。 這就是“跳過”鏈接非常有用的地方。 不幸的是，看到“跳過”鏈接被實現但被display: none隱藏起來的情況並不少見，因此任何人（包括屏幕閱讀器用戶和鍵盤用戶）都無法使用。

在如何創建“跳過內容”鏈接中，Paul Ryan 提供了有關如何實現可訪問的跳過內容鏈接的分步教程。 基本上，我們使用 CSS 轉換將跳過鏈接推離屏幕，但在:focus上將其重新顯示在屏幕上。 在文章的評論中，Eric Bailey 還注意到，我們可以在包含大量交互項目或難以瀏覽的項目（例如目錄和iframe s）的內容部分之前提供跳過鏈接。

可訪問的 SVG

談論 SVG：我們今天可以用 SVG 做的事情遠遠超出了過去的基本形狀。 我們不僅可以描述 SVG 圖標，還可以為它們設置樣式和動畫。 如果真正的包容性超出了模式——在設計和開發可訪問的 SVG 時，我們還應該考慮哪些其他因素？

這正是Carie Fisher 在她關於 Accessible SVGs: Inclusiveness Beyond Patterns 的文章中回答的問題。 在文章中，Carie 仔細研究了 SVG 顏色和對比度、明暗模式、SVG 動畫、減少的運動以及大量圍繞可訪問性的工具。 您還可以在文章中找到演示和代碼示例，以及詳細的解釋和進一步閱讀的指南。

如果您想深入了解可訪問組件的複雜世界（不僅與 SVG 相關），我們剛剛發布了 Carie 關於可訪問代碼模式的文章。

可訪問的標籤

您的界面可能正在使用選項卡面板，但為了讓鍵盤用戶和屏幕閱讀器用戶可以訪問這些選項卡的內容，我們需要對視覺設計和 ARIA 語義進行非常仔細和深思熟慮的闡述。 在選項卡式界面中，Heydon Pickering 詳細介紹了試圖找出尊重鍵盤行為和焦點管理的正確解決方案。 他建議逐步將部分增強為選項卡面板（代碼示例） （感謝 Daniela Kubesch 的提示！）。

正如 Adam Silver 所指出的，不太精通的屏幕閱讀器用戶可能不知道使用箭頭鍵來切換選項卡。 有一個論點是讓所有選項卡都可以在正常選項卡序列中聚焦，而開發人員幾乎不需要干預來更改選項卡通過鍵盤工作的方式。

或者，TabPanelWidget 是一個響應式和可訪問的選項卡解決方案。 它依賴於普通的舊語義 HTML，並且當選項卡不能完全適合時變成手風琴（感謝ResizeObserver ，但對於尚不支持它的瀏覽器有一個 polyfill）。

該腳本不僅是一種語義化且易於訪問的解決方案，而且還是一種響應迅速且用途廣泛的解決方案，可幫助您為 Web 創建 Tabpanel 和手風琴小部件。 它是鍵盤友好型的，可作為普通 JS 庫（或作為 Vue、React 和 Angular 的小部件）使用。

可訪問的表

有很多與表格相關的可訪問性問題，但最大的挑戰是將視覺表示轉化為線性系列，屏幕閱讀器可以有意義地大聲朗讀，而不會遺漏任何重要信息。 幸運的是，Adrian Roselli 一直在花費大量時間探索無障礙桌子的挑戰和解決方案。

在他關於可訪問表格的帖子中，Adrian 建議將表格包裝在一個<div>中，其中包含role="region" 、 aria-labelledby和tabindex="0"以確保僅使用鍵盤的用戶可以通過 tab 鍵進入容器，即table 在 table 中接收焦點和<caption>以確保正確地向屏幕閱讀器宣布它。 Adrian 還提供了響應式表格的代碼示例，以及具有可擴展行、可排序表格和固定表格標題的表格。

屏幕閱讀器如何瀏覽數據表

您是否嘗試過使用屏幕閱讀器瀏覽表格？ 如果沒有，您應該查看 Leonie Watson 關於屏幕閱讀器如何導航數據表的文章。 它分享了寶貴的見解，並展示了創建任何人都可以使用的無障礙表格的重要性。

在帖子中，Leonie 使用 NVDA 移動到表格、導航其內容並查找特定信息。 適當的 HTML 元素（或 ARIA 角色）告知她表格的特徵，並允許她訪問專門用於導航表格內容的鍵盤命令。

一個有趣的收穫：鍵盤焦點和屏幕閱讀器焦點不是一回事。 與您可能聽到的相反，您不需要使用鍵盤使表格的每個單元格都可聚焦以幫助導航。 如果單元格內的內容是非交互式的，您可能會讓鍵盤用戶比您預期的更努力地瀏覽表格。 您還可以與 Leonie 一起觀看關於屏幕閱讀器用戶如何訪問 Web 的 Smashing TV 視頻（73 分鐘）。

可訪問的撥動開關

每當我們的表單為我們的客戶提供二進制選擇時——開/關、暗/亮模式等——我們都可以使用撥動開關。 開關需要服務於幾個目的：它需要清楚地解釋當前的選擇（而且這一點並不經常說清楚！），它需要解釋有兩個選項，並且它需要足夠明顯，讓客戶能夠了解如何在它們之間切換。 當 Sara Soueidan 研究如何構建撥動開關時，她當然花了很多時間研究如何構建一個可訪問的撥動開關。

Sara 的解決方案使用兩個單選按鈕，每個按鈕都有自己的標籤，將輔助技術宣佈為幾個單獨的選項，可通過鍵盤訪問，並且沒有額外的 ARIA 或 JS 要求來運行。 結果是一個主題切換切換代碼示例，您還可以查看 Scott O'Hara 的代碼示例。

重要的是要注意 Sara 的單選按鈕切換開關是可訪問的，因為它有兩個標籤。 因此，如果一個撥動開關沒有兩個標籤，這將不是一種使用模式。 您可以在 Scott 的存儲庫中找到撥動開關的標記模式。 （感謝 Scott O'Hara 的提示！ ）。

Kitty Giraudel 還分享了一個簡單的 HTML 和 CSS 實現的可訪問切換的教程，您可以根據自己的方便進行調整。 可訪問切換的基礎是正確標記的複選框。 它通過圖標和顏色傳達其狀態，並且如果未啟用 CSS，則不會留下任何偽影。 切換帶有可以自定義的本機焦點樣式，禁用狀態，並且如果需要，它也支持從右到左的方向。

可訪問的工具提示和切換提示

與圖標按鈕密切相關的組件是工具提示。 字面意思是“工具提示”，它們是解釋控件或視覺對象目的的一小段信息，否則可能會被誤解。 每次我們想解釋為什麼我們需要在結賬時使用特定的個人信息時，我們可能會使用一個很好的舊工具提示。 那麼，我們如何讓它們正確呢？

Heydon Pickering 的 Inclusive Tooltips 和 Toggletips 對構建可訪問的工具提示所需的幾乎所有內容進行了非常全面的概述。 這意味著決定提示的內容是否應該作為標籤或描述提供，並相應地選擇 ARIA 屬性，而不是依賴於title屬性，並避免在工具提示中放置諸如關閉和確認按鈕或鏈接之類的交互式內容。

• 當然，Sara Soueidan 也深入探討了構建完全可訪問的幫助工具提示的精細複雜性，並得出結論認為 JavaScript 對於製作完全可訪問的交互式組件是必不可少的。
• Sarah Higley 還解釋了工具提示的複雜性，並發布了一個代碼示例，展示了可靠的運行模式。
• Scott O'Hara 有一個關於工具提示的 GitHub 存儲庫，
• Adrian Roselli 還提供了大量用於切換的代碼示例，包括禁用工具提示和 RTL 方向的演示。

無障礙視頻/音頻播放器

如今，在觀看短片或長片時，經常看到觀眾使用字幕並不少見。 我們可能在嘈雜的環境中觀看視頻，或者我們可以更好地理解書面語言，或者我們目前正忙於其他事情，需要快速查找內容而無需借助耳機。 除此之外，我們多久使用一次鍵盤的<space>提示暫停，或使用鍵箭頭來回移動？ 儘管如此，許多視頻播放器和自定義解決方案並未提供開箱即用的此功能。

可訪問的 HTML5 媒體播放器概述了可訪問的音頻和視頻播放器。 有很多很棒的開源選項，例如 AblePlayer 似乎是可靠的選項之一。 它包括一套完整的播放器控件，可通過鍵盤訪問，為屏幕閱讀器用戶正確標記，並可由語音識別用戶控制，具有高對比度，支持隱藏式字幕和字幕、章節、基於文本的音頻描述、交互式轉錄功能和自動文本突出顯示。 它支持 YouTube 和 Vimeo 視頻。 但是，這取決於 jQuery。

或者，您也可以查看 Vime.js：完全開源、輕量級、完全可定制且沒有第三方依賴項。 PayPal 的 Plyr 和 Accessible HTML5 Video Player 等其他不錯的選擇也類似。 後者對純鍵盤用戶和屏幕閱讀器用戶完全可以訪問，用 vanilla JavaScript 編寫，另外作為React 組件提供，如果 JavaScript 不可用，則回退到瀏覽器的本機控件（感謝提示， @jamsandwich ！ ）。

惹惱屏幕閱讀器用戶的網站功能

缺少 alt 標題、自動播放的視頻、未標記的按鈕、標題使用不當、無法訪問的 Web 表單——對於有視力的用戶來說似乎是一個小問題，但這些問題可能會影響盲人是否能夠獨立使用網站和視障人士。 Holly Tuke 從她自己的經驗中知道這一點。

為了提高對常見可訪問性問題的認識，Holly 總結了她作為屏幕閱讀器用戶每天面臨的五個煩人的網站功能，當然還有如何解決這些問題。 Chris Ashton 還發表了一篇文章，解釋了屏幕閱讀器用戶遇到的常見問題，這些問題在僅關注語義和鍵盤可訪問性的對話中經常被忽略。 產生巨大影響的小細節（感謝 Alex Chudesnov 的提示！ ）。

但首先，可訪問性支持

輔助技術與瀏覽器和代碼交互的方式有很多種。 由於仍然無法完全自動化屏幕閱讀器和語音控制軟件，因此我們不得不進行手動測試。 這就是 a11ysupport.io 發揮作用的地方。

這個社區驅動的網站最初由 Michael Fairchild 創建，旨在幫助開發人員了解支持的可訪問性。 這是一個活躍的項目，總是歡迎貢獻，所以開始測試吧。 此外，始終值得檢查 WAI-ARIA 創作實踐，它描述了通用組件和模式所必需的基本語義、角色和 ARIA （感謝 Stephanie Eckles 的提示！） 。

可訪問性資源和清單

可訪問性非常重要，但不幸的是，它經常被忽視。 社區驅動的 A11Y 項目試圖讓數字訪問變得更容易，為設計師和開發人員提供構建美觀、可訪問和包容性體驗所需的專業知識。

從無障礙設計背後的基本原則到進行無障礙審核，再到培育社區，A11Y 項目對這個話題進行了 360 度全方位的審視。 您會找到一些文章，例如快速提示、閱讀書籍提示、要關注的時事通訊，以及方便的工具、致力於可訪問性的小組等等。

輔助工具庫

在交付項目之前，您是否有過忘記某事的瘙癢感？ 好吧，眾所周知，清單是在最終攤牌之前保持對需要完成和處理的事情的概述的關鍵。 在可訪問性方面，有越來越多的工具和資源可以幫助您密切關注事物：A11y 資源。

這個列表由 Hannah Milan 策劃，最初是為了跟踪 200 多個手工策劃的可訪問性插件、工具、文章、案例研究、設計模式、設計資源、可訪問性標準，甚至清單。 當然，如果您發現缺少任何東西，您可以隨時提交工具。

第三方組件可訪問性

自定義選擇、自動完成或日期選擇器等可重用組件是強大的幫手。 然而，許多聲稱可以訪問的第三方組件，一旦你深入挖掘，結果只能部分訪問。 正如 Hidde de Vries 所指出的，即使是實現 ARIA 創作實踐指南 1:1 的組件也可能很關鍵，因為該指南並未對屏幕閱讀器的可訪問性或用戶體驗做出任何聲明。 那麼如何找到那些真正可訪問的組件呢？

Hidde 發布了一個問題清單，您可以提出一些問題來更加確定組件的可訪問性：他們是如何測試的？ 他們和誰一起測試？ 他們對自己方法的利弊持開放態度嗎？ 誰創建了組件？ 他還分享了一些來自社區的寶貴技巧，可幫助您評估聲稱可訪問的組件是否會兌現其承諾。

包起來

無障礙社區中令人難以置信的人肯定有數十和數百條重要指南，例如史蒂夫福克納（Steve Faulkner）有大量關於語義和可訪問性的文章，而萊昂尼沃森（Leonie Watson）有大量關於一般可訪問性的文章。 不可能列出每個人，但我們真誠地感謝每一個貢獻。

我們可能錯過了一些重要且有價值的技術和資源！ 因此，請發表評論並參考他們——我們很樂意更新這篇文章並使其保持最新，以便我們所有人能夠回到它並更快地構建可靠、可訪問的組件。

我們真誠地希望這些工具和技術能夠在您的日常工作中發揮作用——最重要的是幫助您避免一些耗時的日常任務。

保持可訪問性！

謝謝！ ️

非常感謝@jamsandwich、Courtney Heitman、Stephanie Eckles、Adam Silver、Daniela Kubesch、Tanisha Sabherwal、Manuel Matuzovic、Vadim Makeev、Kitty Giraudel、Ian James、Juha Lehtonen、Heydon Pickering、Shivani Gupta、Jason Webb、Alex Kallinikos、Scott O'Hara、Sara Soueidan、Sasha Chudesnov、Adam Liptrot、Holger Bartel、Kim Johannesen 以及所有為本文的貢獻而在可訪問性方面充滿熱情的人。 社區事務。

更多關於可訪問性

• CSS 審計工具
• CSS 生成器
• 解開可訪問模式的複雜世界
• 針對運動靈敏度進行減少運動設計
• 我用屏幕閱讀器上網了一天
• Chrome DevTools 中的可訪問性
• 今天你可以用 CSS 做的事情
• 另外，訂閱我們的時事通訊不要錯過下一個。