前言

包容性設計這個術語並不是一個新概念。這是自2005年以來一直存在的一個短語。它被定義爲“儘可能多的人可以訪問和使用的主流產品/服務的設計，而不需要特殊的適應或專門的設計“。

當我們重新思考我們的開發方法時，我們不僅僅是訪問信息的基礎級別。包容性發展意味着爲儘可能多的人創造有價值的東西，而不僅僅是可以獲得的東西。它將可訪問性放在首位。

海登·皮克林（Heydon Pickering）用他的“ 包容性設計模式 ”（Inclusive Design Patterns）中的這句話總結了它：

通過選擇我們認爲普通用戶可以閱讀的字體，我們會有意識地疏遠我們的一部分用戶。相反，通過選擇適合那些努力閱讀的人的字體，我們得出了一個適合每個人的選擇。這是一種高效，有效的包容性設計。

可以簡單的認爲：組件包容性設計 = 可訪問性第一 + 組件驅動開發

包容性設計是一種設計過程，還有很多的設計過程，沒有對錯，按需選擇。

還有，現實點。“100%可訪問性”是一個無法實現的理想-你總是會遇到某種邊緣情況，導致某個用戶發現某些內容難以使用-但你應該盡你所能去做。如果您計劃包含一個使用WebGL製作的時髦的3D餅圖，您可能希望包括一個數據表，作爲數據的可訪問的替代表示。或者，您可能只需要包含表並去掉3D餅圖-每個人都可以訪問該表，編寫代碼更快，CPU密集型更少，維護也更容易。
另一方面，如果你正在一個展示有趣的3D藝術的畫廊網站上工作，那麼期望每一件藝術品都能被視障人士完全訪問是不合理的，因爲它是一種完全的視覺媒介。

面向用戶設計

( 上圖爲用戶金字塔模型 & 包容性設計立方體模型 )

設計過程名詞解釋：

通用/共用性設計 (universal design)

用戶金字塔模型自下而上，以關注主流健全用戶爲前提，力求提升設計對於特殊用戶羣體的適用。

無障礙設計 (barrier-free design)

用戶金字塔模型自上而下，以滿足極端用戶（金字塔頂端）的需求爲首要任務，再拓展至主流用戶羣體。

包容性設計 (inclusive design)

力圖充分認識用戶羣體多樣性，在設計的過程和結果中減少對用戶產生無意識的排除。

WEB中的無障礙訪問

視覺無障礙設計

確保文字、可交互控件和背景的對比度，滿足最低標準。
別隻用顏色傳達信息，讓文字字號可調。
確保界面上所有的控件都可藉助輔助技術使用，如屏幕閱讀器，放大鏡和盲文顯示器。這就意味着必須讓 accessibility APIs 可以通過程序確定每個控件的角色、狀態、價值、標題。

聽覺無障礙設計
「聽覺障礙」包括：聽不清/聽不到到界面發出的聲音。

讓文本內容容易被理解，適當使用「文字替代」
確保界面上的所有空間，在沒有聲音時，仍可正常使用。

行動無障礙設計

確保所有界面控件交互都可只通過鍵盤完成或者只使用鼠標；
確保界面控件被輔助技術正確標記；這些用戶可能會使用諸如語音控制軟件和物理切換控制等技術，這些技術一般使用與屏幕閱讀器等其他輔助技術相同的API。

認知無障礙設計
「認知障礙」意味着用戶可能需要輔助技術來幫助他們閱讀文本，因此文本替代方案的存在非常必要。

避免重複或閃爍的顯示方式，因爲這可能會爲認知障礙用戶造成使用不便；
給用戶留出充足的時間操作。

WEB中的可訪問性

原生控件具有輔助交互，儘可能美化他們而不是造輪子(新元素上添加ARIA)
沒有aria比錯誤的aria更好
- aria role表明交互承諾，不提供鍵盤行爲或樣式
- aria 可以隱藏裝飾元素也可以增強/覆蓋語義
深入瞭解ARIA
- ARIA 規範介紹了 role 屬性以及可與這些角色聯用的關聯 ARIA 屬性的可接受值。
- ARIA 製作實踐文檔探究了使用可用 ARIA 角色和屬性的最佳做法。

可訪問性反模式與誤區

暗黑模式

濫用導致的暗黑模式（DARK PATTERN）包括:

僞裝或插入內容的廣告等模式
使用誤導或技巧問題誘騙用戶做某事
迫使用戶披露個人信息（例如連接到社交網絡）以執行基本任務
阻止用戶繼續使用覆蓋屏幕的東西

迷之信噪比

在網頁設計中，信號是內容，噪音是內容周圍的鉻或額外項目。在設計時，目標是儘可能提高信噪比（信號很多，噪音很小）。

過時的UX模式

UX模式過多，若不適合用戶或業務，應停止使用。以下列表並不全面，但應作爲指南來確定是否應更新正在使用的模式：
輪播圖；大背景圖像；懸停狀態以獲取附加信息；無線嵌套菜單；懸停的回到頂部底部；摺疊面板和標籤；後退按鈕；頁面預加載器；社交分享和登錄；內容分頁；自動播放多媒體；非用戶觸發操作；無線分頁；缺少導航路徑；無法接受的合併功能；

可訪問性的誤區

1. 我的用戶中只有一小部分需要無障礙訪問。

然而有些例外：

老年人 - 可能需要在視頻或更大的字體大小上添加字幕才能閱讀文本
母語或母語不是英語的用戶 - 可能需要更多時間閱讀自動旋轉幻燈片上的文本
具有認知限制的用戶 - 可能需要易於訪問的字體或項目符號內容以幫助您集中注意力
視力有限或視力不佳的用戶 - 可能需要放大內容才能閱讀和理解內容
具有情境障礙的用戶 - 可能需要更好的色彩對比度，因此屏幕上的眩光不會干擾他們閱讀內容
有臨時殘疾的用戶 - 可能需要僅使用鍵盤訪問所有內容，因爲他們無法使用鼠標

2. 使我們的網站或應用程序可訪問需要花費太多時間/精力/金錢

與其等到最後測試可訪問性導致重寫，不如一開始就構建它

3. 可訪問性是開發人員的一次性任務

但是還有很多其他人應該負責數字可訪問性：客戶/股東；營銷/銷售；WEB架構師/設計師/ UI和用戶體驗專家；數字策略師/編輯/內容創建者；用戶；

4. 可訪問的網站和應用程序簡單或醜陋

有很多漂亮且易於訪問的網站，包括（但不限於）：

5. 我使用了一些自動化測試工具，因此我的網站或應用程序現在是可訪問的

無論您選擇使用哪種自動化工具，還有其他測試因素需要考慮。一些自動化測試相關問題包括：

我測試哪些瀏覽器或操作系統？
我應該測試哪些設備 - 臺式機，平板電腦，手機？
我使用的自動化工具有多可靠？
如果不同的工具給我不同的結果怎麼辦？
如何確定工具報告的可訪問性錯誤的優先級？
該工具錯過了什麼錯誤？

與手動測試結合使用時，自動化測試工具最有效。手動測試可包括：

查看網站或應用程序結構/體系結構（例如，查看標題順序）
鍵盤兼容性測試（例如邏輯讀取/ Tab鍵順序）
媒體評論（例如視頻的音頻和/或文字說明）
輔助技術設備測試（例如屏幕閱讀器及其他）
真正的用戶測試！

關於我國網站信息無障礙的社會需求

我國殘障人士數衆多，分佈廣。根據第二次全國殘疾人抽樣調查結果，目前我國有各類殘障人士共8296萬人，佔全國總人口的6.34%；
我國人口老齡化問題日趨嚴重，老齡人口比例日趨上升。我過已經步入老齡化社會，目前在我過60歲以上老年人口已經達到1.78億，而且我過人口老齡化的速度還在加快比例還在進一步擴大。國務院印發的《中國老齡事業發展”十二五“規劃》中指出，到2030年我過老年人口規模將會在目前的基礎上翻一番。

關於可訪問性組織與規範

a11TO 是一個可訪問性組織

網絡內容無障礙指南（WEB Content Accessibility Guidelines，WCAG）爲開發無障礙網站提供了指南。

How to Read W3C Specs 告訴我們如何閱讀w3c規範

Researching a Property in the CSS Specifications 以grid-auto-rows 爲例，教你獲取有關規範中詳述信息所需的基本細節。

WAI-ARIA Practices 是ARIA一系列可訪問組件的官方最佳實踐

下面的 WCAG 檢查表提供了一些概覽：
Wuchang 提供的 WCAG 檢查表（WCAG checklist from Wuhcag）
WebAIM 提供的 WCAG 檢查表（WCAG checklist from WebAIM）
A11Y Project 提供的檢查表（Checklist from The A11Y Project）

WEB包容性設計要素

信息結構與內容

慎用截斷
- 截斷的內容通常不會寫入摘要或重用
- 截斷的內容通常不包含觸發詞
- 永遠不要截斷頭條新聞
- 始終提供長拷貝的摘要
- 需要時提供替代副本
構建內容系統
- 內容並不總是一刀切，允許不同大小和樣式的內容屬性(小，中，大圖像)
  - 可讀性和SEO友好的頭條
  - 不要爲特定上下文（如iPhone，Android，平板電腦或臺式機）構建內容
內容應易於導航
- 不要不必要地對長篇內容進行分頁
- 可以輕鬆導航到長篇內容中的部分
- 始終爲用戶提供足夠的上下文來制定自己的導航決策
  - 具有位置服務的用戶可能不僅僅想要基於位置的信息
  - 提供大量的觸發詞
保持導航整潔
- 超過5個主要導航類別難以掃描
- 僅在絕對必要時才提供輔助導航
- 儘量避免超過三級導航
- 如果導航變得混亂，請停止並返工以使架構更易於理解
- 想一想頭條是否可以用作鏈接，或者是否應該使用替代副本
內容應該可用
- 不要限制內容，尤其是基於設備
- 如果無法使一種格式可用，則提供其他內容格式，例如通過設備功能或業務需求
- 不要將內容存儲爲HTML，而是將其作爲可以多種方式呈現的原始屬性。對於與長拷貝相關的表格數據和圖像尤其如此
- 以最適合手頭顯示的方式提供所有內容
開發注意事項
- 使用帶有分區語義的標籤 MDN 的 HTML 元素參照（MDN HTML elements reference）
- 響應式、特徵檢測的漸進式增強、優雅降級
- 內容在桌面和移動設備上以正確，有意義的閱讀順序呈現
- 內容迴流而不使用水平和垂直滾動

使文字可讀

爲視頻提供了字幕；Alt標籤用於描述圖像，或者當輔助技術忽略裝飾圖像時設置爲空（即alt =“”）；除徽標外，文本不會放在圖像中。

文本行之間的間距（稱爲行間距，行高或行距）至少是字體大小的1.5倍；段落之間的間距至少是字體大小的2倍；字母之間的間距（稱爲字母間距或跟蹤）至少是字體大小的0.12倍；允許調整文本大小的功能（使用相對單位表示字體大小，例如em或rem） - 最高可達200％ - 使用屏幕控制或通過WEB瀏覽器的縮放功能；清楚地定義段落和字母間距。

選擇大多數用戶以前遇到的常用字體。如果你選擇一個普通的字體系列或一個具有獨特字符的系列，那麼“serif vs. sans-serif”並不是什麼大問題。避免使用不是唯一的專業顯示字體或字體系列（例如可以互相鏡像的字母或數字）。

您的字體的最小大小應爲14px（理想情況下更多），編碼時應使用相對值。
注意顏色和對比度！使用工具檢查文本和背景之間的比例，並警惕灰色。避免閃爍或移動文本。
不要只依賴字體的外觀（顏色，形狀，字體變化，位置等）來傳達意義（例如“點擊紅色按鈕”）。
不要讓內容的總寬度超過80個英文字符（對於語標爲40個英文字符）。避免在內容中創建空格的段落對齊（例如對齊）。

適當使用顏色

正文副本與周圍區域的對比度至少爲4.5：1，更嚴格的7：1
標題和大文字與周圍區域的對比度至少爲3：1
使用顏色傳達的信息也可以在文本中找到

WCAG —— 理解色彩對比度要求
 有關色彩對比度的一切以及爲何你應該重新考慮它
 A11yProject —— 什麼是色彩對比度
 使用 Colorable 來計算出一個完全無障礙的調色板
 WebAIM —— 色彩對比度檢驗工具
 The Paciello Group —— 色彩對比度分析工具

夜間模式

夜間模式指的是在操作系統中可以設置高對比度模式，對應瀏覽器@media (prefers-color-scheme: dark)下的樣式會生效。

反色不是夜間模式，但大部分網站是淺色背景深色字，對應瀏覽器的@media (inverted-colors: inverted)。

反色可能會導致顏色意思改變（紅-綠變成青-粉）、圖片或主題色調改變（藍變橙）（How “invert brightness” can improve accessibility and help us use our devices - Matthew Atkinson）

瀏覽器隱身窗口不是夜間模式，只是深色窗體。

利用css自定義屬性+媒體查詢配置（How to get dark mode working with CSS - Frank Lämmer）

避免負面的身體反應（癲癇發作）

網站上沒有任何內容每秒閃爍超過三次

WEB語義可訪問性（ARIA）

使用ARIA語義標識分區

ARIA role標識提供了一種識別網頁組織和結構的強大方法。通過對頁面的各部分進行分類和標記，它們使得通過佈局可視地傳達的結構信息能夠以編程方式表示。屏幕閱讀器利用標誌性角色爲頁面的重要部分提供鍵盤導航。標識區域也可以用作“跳過鏈接”的目標，並通過瀏覽器擴展用於增強的鍵盤導航和屏幕閱讀器支持。

故意用presentation角色隱藏語義

presentation的三個常見用途是：

隱藏裝飾圖像；它相當於給圖像空的alt文本。
在表語義不傳達有意義的關係的情況下，抑制用於佈局的表的表語義。
消除複合窗口小部件結構中的插入孤立元素的語義，如上面的示例中所示的選項卡列表，菜單或樹。

關於子元素自動隱藏語義的角色

要求所有子元素都具有訪問性的角色是：
button，checkbox，img，math，menuitemcheckbox，menuitemradio，option，progressbar，radio，scrollbar，separator，slider，switch，tab

多狀態設計

The Nine States of Design - Vince Speelman 提到9種狀態，他們是：

Nothing：初次加載，未激活
Loading：加載中
None：無數據
One：單條數據
Some：多條數據
Too many：大量數據
Incorrect：錯誤狀態
Correct：正確狀態
Done：完成狀態

鍵盤訪問

ARIA角色，狀態和屬性模擬了流行桌面GUI（包括Microsoft Windows，macOS和GNOME）的GUI組件之間共享的可訪問性行爲和功能。同樣，ARIA設計模式借鑑了這些平臺的用戶期望和鍵盤約定，始終如一地結合了常見的約定，旨在促進WEB上鍵盤界面的輕鬆學習和高效操作。

要使網頁易於訪問，所有交互式元素必須可通過鍵盤操作。此外，ARIA設計模式中描述的通用GUI鍵盤接口約定的一致應用很重要，特別是對於輔助技術用戶。例如，考慮操作樹的屏幕閱讀器用戶。正如熟悉的視覺樣式幫助用戶發現如何使用鼠標擴展樹枝一樣，ARIA屬性爲樹提供了桌面應用程序中樹的聲音和感覺。因此，屏幕閱讀器用戶通常會期望按右箭頭鍵會展開摺疊節點。因爲屏幕閱讀器知道元素是樹，所以它還能夠指示新手用戶如何操作它。類似地，語音識別軟件可以實現用於擴展和摺疊分支的命令，因爲它將元素識別爲樹並且可以執行適當的鍵盤命令。

所有平臺上常見的主要鍵盤導航約定是，tab和shift+tab鍵將焦點從一個UI組件移動到另一個UI組件，而其他鍵（主要是箭頭鍵）將焦點移動到包含多個可聚焦元素的組件內。tab按鍵時焦點所遵循的路徑稱爲標籤序列或標籤環。

開發要點

焦點的可見性，持久性，可預測性
焦點和選中狀態視覺需不同
自動獲取焦點的情況
tab鍵導航順序
使用動態tabindex管理組件內的焦點
使用aria-activedescendant管理組件內的焦點
禁用元素的可聚焦性（listbox,menu,tabs,tree中的子項）
避免與系統級功能快捷鍵衝突

測試驅動開發

測試

axe-chrome擴展免費擴展，提供頁面可訪問性測試

AT-browser-tests -github html測試用例，包括html5可訪問性和JAWS

ESLint 中的 eslint-plugin-jsx-a11y 插件爲你的 JSX 中的無障礙問題提供了 AST 的語法檢測反饋。

在Android和iOS上的屏幕閱讀器測試摘要 - MDN

檢查工具

網絡無障礙性評估工具（WEB Accessibility Evaluation Tool）是一個無障礙輔助的瀏覽器插件。
無障礙輔助功能樹
Inspect.exe (免費的桌面應用程序爲windows作爲windows SDK)的一部分
在chrome通過在地址欄輸入 chrome://accessibility/查看可訪問性樹。
工具概述 - http://webaim.org/articles/tools
通用工具 - http://pa11y.org
可視化工具包 - http://khan.github.io/tota11y
色盲模擬器 - http://www.color-blindness.co...
顏色安全 - http://colorsafe.co
VoiceOver - http://webaim.org/articles/vo...
Wave - http://wave.webaim.org
在 Firefox 中使用無障礙輔助功能檢測器
在 Chrome 中激活無障礙輔助功能檢測器
在 OS X Safari 中使用無障礙輔助功能檢測器

屏幕朗讀器
付費產品：JAWS (Windows) 和 Window Eyes (Windows).
免費產品： NVDA (Windows)， ChromeVox (Chrome, Windows and Mac OS X)，和 Orca (Linux).
操作系統內置： VoiceOver (Mac OS X and iOS)， Narrator (Microsoft Windows)， ChromeVox (on Chrome OS)，和 TalkBack (Android).
火狐中的 NVDA
NonVisual Desktop Access，簡稱 NVDA，是一個被廣泛使用的 Windows 開源屏幕朗讀器。

想要了解怎麼樣最好的使用 NVDA，請參考下面的指南：

WebAIM —— 使用 NVD A來評估網絡的可無障礙訪問性
 Deque —— NVDA 鍵盤快捷鍵
Safari 中的 VoiceOver
VoiceOver 是蘋果設備的自帶屏幕朗讀器。

想要了解如何激活以及使用 VoiceOver，請參考下面的指南：

WebAIM —— 使用 VoiceOver 來評估網絡的可無障礙訪問性
 Deque —— OS X 中的 VoiceOver 鍵盤快捷鍵
 Deque —— iOS 中的 VoiceOver 快捷鍵
Internet Explorer 中的 JAWS
Job Access With Speech又稱 JAWS，是一個常用的 Windows 屏幕朗讀器。

想要了解如何最好的使用 VoiceOver，請參考下面的指南：

WebAIM —— 使用 JAWS 來評估網絡的可無障礙訪問性
 Deque —— JAWS 鍵盤快捷鍵

Google Chrome 中的 ChromeVox
ChromeVox是 Chromebook 的內置屏幕朗讀器，同時也是 Google Chrome 中的一個插件。

想要了解如何最好的使用 ChromeVox，請參考下面的指南：

Google Chromebook 幫助 —— 使用內置屏幕朗讀器
 ChromeVox 經典鍵盤快捷鍵參考

可訪問性與SEO

佈局

以清晰一致的方式構建導航和頁面佈局，並有多種查找內容的方式（例如搜索，站點地圖，目錄）。搜索引擎機器人就像組織良好的網站架構，這使得他們能夠以更有意義的方式索引您的內容。如果您的網站難以瀏覽或使用，則可能會影響您的用戶分析統計信息，包括 - 網站上的時間，瀏覽的網頁和跳出率。反過來，這可能會損害您的SEO排名。至少，它會激怒你的用戶。

標籤

在適當的時候，使用訪問HTML 5網頁元素，如<article>，<section>，<header>，<footer>。這些元素對搜索引擎機器人和輔助技術設備更具描述性，然後是簡單<div>或<p>元素。

標題標籤應該是有序的,避免跳過標題標籤。這意味着a <h1>後跟 <h2>， <h2>後跟 <h2>或<h3>依此類推。最佳做法是<h1>每頁只有一個。將<h1>標籤視爲“ 第二頁標題標籤 ”，將相關性信號發送給搜索引擎機器人。

確保沒有斷開的鏈接。使用內部標記類型鏈接，但不要過度。提供描述性鏈接文本。避免使用像click here和的短語read more。跳過向鏈接添加描述性標題屬性（將鼠標懸停在鏈接上時顯示的文本）。添加鏈接標題不一定是錯誤的，但對SEO或網站可訪問性來說可能無濟於事。

圖像與多媒體

在命名圖像時儘可能保持一致和準確。避免使用非字母字符（例如7，％，＆，$）並在單詞之間使用短劃線，而不是在圖像名稱或替代文本中使用下劃線。將替代文字保留在125個字符以內。如果您需要更多字符，請使用標題文本或進一步描述頁面主文本區域中的圖像。編寫可理解的替代文本，關鍵字填充對任何人都沒有好處 - 使用屏幕閱讀器的人會煩惱，搜索引擎機器人會懲罰你。

少即是多。儘可能限制在設計中使用複雜的多媒體組件。提供訪問媒體的其他方法。例如，有視頻的副本和/或標題；爲僅音頻文件創建副本；將盲文格式的文件添加到您的媒體。有許多不同類型的替代格式可供使用。

內容篇幅

不要使用粗體和斜體標記來突出顯示單詞，而是使用強烈和強調。在視覺上它們看起來彼此相似，但屏幕閱讀器（在正確的模式下）將強調包圍<strong>和<em>標籤的單詞，而它們將完全忽略或僅略微改變<b>和<i>標籤。

不要複製您的內容。搜索引擎機器人會注意到並懲罰你。您的用戶會感到困惑。

項目符號和編號列表有助於爲讀者分解您的內容，使其更加用戶友好。一些研究表明，搜索引擎機器人更喜歡使用列表和數字序號標記的內容而不是純文本。

WAI-ARIA

概念

用戶代理（例如，瀏覽器），可訪問性API和輔助技術之間的關係

ACCESSIBILITY APIS

Windows: Microsoft Active Accessibility (MSAA), 被另一個API調用擴展稱爲 IAccessible2 (IA2)
Windows: UI Automation (UIA), 微軟MSAA的繼任者。 Windows上的瀏覽器可以選擇支持MSAA通過IA2，UIA或兩者。
MacOS: NSAccessibility (AXAPI)
Linux/Gnome: Accessibility Toolkit (ATK) and Assistive Technology Service Provider Interface (AT-SPI). 這個例子稍有不同，實際上有兩個獨立的API：一個是瀏覽器和其他應用程序將信息傳遞給（ATK），另一個是AT從（AT-SPI）調用的。

屏幕閱讀器朗讀某個按鈕的工作流程

屏幕閱讀器從API請求關於相對於當前對象的下一個可訪問對象的信息。
API（作爲中介）將此請求傳遞給瀏覽器。
在某些時候，瀏覽器引用DOM和樣式信息，並發現相關元素是一個非隱藏按鈕：<button>Do a thing</ button>。
瀏覽器將此HTML按鈕映射到API期望的格式，例如具有各種屬性的可訪問對象：名稱：Do a thing，角色：Button。
API將此信息從瀏覽器返回到屏幕閱讀器。
然後，屏幕閱讀器可以將該對象呈現給用戶，或許可以說明“Button, Do a thing”。

用戶通過屏幕朗讀器"點擊"按鈕流程

用戶提供特定的屏幕閱讀器命令，例如擊鍵或手勢。
屏幕閱讀器調用API中的方法來調用按鈕。
API將此交互轉發給瀏覽器。
瀏覽器如何響應傳入的交互取決於上下文，但在這種情況下，瀏覽器可以通過WEB API將其作爲“單擊”事件引發。
瀏覽器不應指示點擊來自輔助技術，因爲這樣做會侵犯用戶的隱私權。
WEB開發人員已爲點擊註冊了一個JavaScript事件監聽器;
現在執行它們的回調函數，就像用戶用鼠標單擊一樣。

瞭解Accessibility API主要從Role(角色),State(狀態),Properties(屬性)三個方面入手。

所有aria屬性和角色的繼承樹狀圖 -W3C

角色模型

角色分類如下：

抽象角色 (Abstract Roles) 用於本體。作者不得在內容中使用抽象角色。
- command 一種窗體小部件，用於執行操作但不接收輸入數據。(子類角色：button,link,menuitem)
- composite 可能包含導航元素的小部件。(子類角色：grid,select,spinbutton,tablist)(支持的狀態或屬性：aria-activedescendant )
- input 允許用戶輸入的通用類型的小部件。(子類角色：checkbox,option,radio,slider,spinbutton,textbox)
- landmark 可感知的section包含與特定的，作者指定的目的相關的內容，並且足夠重要以至於用戶可能希望能夠容易地導航到該部分並且將其列在頁面的摘要中。這樣的頁面摘要可以由用戶代理或輔助技術動態生成。(子類：所有landemark role)
- range 表示可由用戶設置的值範圍的輸入。(子類角色：progressbar,scrollbar,slider,spinbutton)(支持的狀態或屬性: aria-valuemax；aria-valuemin；aria-valuenow；aria-valuetext )
- roletype 此分類是所有其他角色繼承的基本角色。
- section 文檔或應用程序中的可渲染結構包含單元。(子類角色：alert,cell,definition,figure,group,img,landmark,list,lsititem,log,maquee,note,status,table,tabpanel,term,tooltip)(支持的狀態或屬性：aria-expanded)
- sectionhead 標記或概括其相關部分主題的結構。（子類角色：columnheader,heading,rowheader,tab)（支持的狀態或屬性：aria-expanded）
- select 表單窗口小部件，允許用戶從一組選項中進行選擇。(子類角色：combobox,listbox,menum,radiogroup,tree)(支持的狀態或屬性：aria-orientation)
- structure 文檔結構元素(子類角色：application,document,presentation,rowgroup,section,sectionhead,separator)
- widget 圖形用戶界面（GUI）的交互式組件。(子類角色：command,composite,gridcell,input,range,row,separator,tab)
- window 瀏覽器或應用程序窗口。(子類角色：dialog)(支持的狀態或屬性：aria-expanded,aria-modal)
小部件角色 (Widget Roles)
以下角色充當獨立用戶界面窗口小部件或作爲較大的複合窗口小部件的一部分
- button 按鈕 單擊或按下時允許用戶觸發操作的輸入。(子元素顯性表達)(支持的狀態或屬性：aria-expanded aria-pressed )
- checkbox 複選框 具有三個可能值的可檢查輸入：true，false或mixed。（默認aria-checked=false）(必需的狀態或屬性：aria-checked )(支持的狀態或屬性：aria-readonly )
- gridcell 網格單元 一個grid或treegrid，內部包含一個cell(子類角色: columnheader rowheader )(必需的父元素角色：row)( 支持的狀態或屬性：aria-readonly;aria-required;aria-selected)
- link 對內部或外部資源的交互式引用，在激活時，會導致用戶代理導航到該資源。(支持的狀態或屬性： aria-expanded)
- menuitem 菜單項 被menu或menubar包裹住的選項(必需的父元素角色：group，menu,menubar)(支持的狀態或屬性：aria-posinset； aria-setsize )
- menuitemcheckbox 複選的菜單項 帶有選中態的menuitem，值可以是：true，false或mixed。（子類角色：menuitemradio）（必需的父元素角色：menubar,menu）(默認 aria-checked=false)
- menuitemradio 單選的菜單項 帶有單選功能的menuitem,一次只能選中一個(必需的父元素角色：group，menu,menubar)(默認 aria-checked=false)
- option 選項 select列表中的可選項(必需的父元素角色：listbox)(必需的狀態或屬性：aria-selected)(支持的狀態或屬性：aria-checked；aria-posinset；aria-setsize)(默認 aria-selected=false)
- progressbar 進度條 顯示需要很長時間的任務的進度狀態的元素。
- radio 單選 單選輸入，一次只能選中其中一個元素。(必需的狀態或屬性：aria-checked)(支持的狀態或屬性：aria-posinset;aria-setsize)(默認 aria-checked=false)
- scrollbar 無論內容是否在觀看區域內完全顯示，控制觀看區域內的內容滾動的圖形對象。(必需的狀態或屬性：aria-controls；aria-orientation；aria-valuemax；aria-valuemin；aria-valuenow)(默認aria-orientation =vertical,aria-valuemin=0,aria-valuemax=100,aria-valuenow=aria-valuemin和aria-valuemax的中間值)
- searchbox 一種用於指定搜索條件的文本框。
- separator(當獲取焦點時) 分隔 分隔符，用於分隔和區分內容或菜單項組的各個部分。（必需的狀態或屬性:aria-valuemax；aria-valuemin；aria-valuenow）(支持的狀態或屬性：aria-orientation，aria-valuetext)(默認aria-orientation=horizontal,aria-valuemin=0,aria-valuemax=100,aria-valuenow=50)
- slider 滑動條 用戶輸入，其中用戶從給定範圍內選擇值。（必需的狀態或屬性:aria-valuemax；aria-valuemin；aria-valuenow）(支持的狀態或屬性：aria-orientation，aria-readonly)(默認aria-orientation =horizontal,aria-valuemin=0,aria-valuemax=100,aria-valuenow=aria-valuemin和aria-valuemax的中間值)
- spinbutton 微調 一種範圍選擇方式，期望用戶從多點觸控中進行選擇。（必需的狀態或屬性:aria-valuemax；aria-valuemin；aria-valuenow）(支持的狀態或屬性：aria-requied,aria-readonly)(默認aria-now=0)
- switch 開關 一種表示開/關值的複選框，與已選中/未選中的值相對。(必需的狀態或屬性：aria-checked)(默認aria-checked=false)
- tab 標籤 提供用於選擇要呈現給用戶的選項卡內容的機制。(支持的狀態或屬性：aria-posinset,aria-selected,aria-setsize)(默認 aria-selected=false)
- tabpanel 標籤面板 用於與tab關聯的資源的容器，其中每個tab都包含在tablist中。
- textbox 一種允許自由格式文本作爲其值的輸入。(支持的狀態或屬性：aria-activedescendant；aria-autocomplete；aria-multiline；aria-placeholder；aria-readonly；aria-required)
- treeitem 樹結構選項 tree的選項。這是樹中的一個元素，如果它包含一個子級別的樹項元素組，則可以展開或摺疊。(必需的父元素角色：group,tree)

以下角色充當複合用戶界面小部件。這些角色通常充當管理其他包含的小部件的容器。

combobox 下拉列表框 包含單行textbox和另一個元素的複合，例如 listbox或者grid，可以動態彈出以幫助用戶設置值textbox。
grid 網格 包含一個或多個行的集合的複合，其中一個或多個單元格通過使用二維導航方法（例如方向箭頭鍵）可以對網格中的某些或所有單元格進行聚焦。(子類：treegrid)(必需的子元素：row;rowgroup->row)(支持的狀態或屬性：aria-level;aria-multiselectable;aria-readonly;)
listbox 列表框 允許用戶從選項列表中選擇一個或多個項目。(必需的子元素:option)(支持的狀態或屬性： aria-multiselectable;aria-readonly;aria-required)(默認aria-orientation=vertical)
menu 垂直菜單欄 一種窗口小部件，爲用戶提供選項列表。(子類：menubar)(必需的子元素：group->menuitemradio;menuitem;menucheckbox;menuradio)(默認 aria-orientation=vertical)
menubar 水平菜單欄 這種菜單通常是水平呈現(必需的子元素：group->menuitemradio;menuitem;menucheckbox;menuradio)(默認 aria-orientation=horizontal)
radiogroup 一組radio（必需的子元素：radio）(支持的狀態或屬性：aria-readonly;aria-required)
tablist 標籤列表 選項卡元素列表，它是對tabpanel的引用。(支持的狀態或屬性：aria-level,aria-mutiselectable,aria-orientation)
tree 樹形 一種列表，可能包含可摺疊和展開的子級嵌套組。(子類角色：treegrid)(必需的子元素：group->treeitem;item)(支持的狀態或屬性：aria-multiselectable；aria-required)
treegrid 樹形網格 一種grid，其行可以以與tree相同的方式展開和摺疊。(必需的子元素：row,rowgroup->row)

文檔結構角色 (Document Structure Roles) 描述了組織頁面內容的結構。文檔結構通常不是交互式的。
- application 應用 包含一個或多個需要用戶輸入的可聚焦元素的結構，例如鍵盤或手勢事件，其不遵循由窗口小部件角色支持的標準交互模式。(支持的狀態或屬性：aria-activedescendant )
- article 文章 頁面的一部分，由構成文檔，頁面或網站的獨立部分的合成組成。(支持的狀態或屬性：aria-posinset aria-setsize )
- cell 單元格 表格容器中的單元格。（支持的狀態或屬性： aria-colindex；aria-colspan；aria-rowindex；aria-rowspan）
- columnheader 列表頭 包含列標題信息的單元格。(必需的角色 row)(支持的狀態或屬性：aria-sort)
- definition 定義 術語或概念的定義。
- directory 目錄列表 對組成員的引用列表，例如靜態目錄。
- document 文檔 包含輔助技術用戶可能希望在閱讀模式下瀏覽的內容的元素。(支持的狀態或屬性：aria-expanded )
- feed 滾動列表 可滾動list的articles。位置的滾動可能導致articles添加到列表的任一端或從列表的任一端移除。
- figure 形狀 可感知section的內容，通常包含圖形文檔，圖像，代碼片段或示例文本。figure 的部分可能是可導航的。
- group 組合並 一組用戶界面對象，不打算通過輔助技術包含在頁面摘要或目錄中。(子類: row,select,toolbar) (支持的狀態或屬性：aria-activedescendant )
- heading 標題 頁面一部分的標題。(必需的角色或屬性：aria-level )（默認 aria-level=2）
- img 圖像 用於形成圖像的元素集合的容器。
- list 列表 含有listitem的section元素(必需的子元素：group->listitem;item)
- listitem 列表項 列表或目錄中的單個項目。(子類角色：treeitem)(必需的父元素角色：group;list)(支持的狀態或屬性： aria-level;aria-posinset;aria-setsize)
- math 數學公式 表示數學表達式的內容
- none 無 其角色語義不會映射到輔助功能API的元素。與presentation相同
- note 輔助 內容作爲主要內容的輔助或輔助的部分。
- presentation 稱述 其角色語義不會映射到輔助功能API的元素。與none相同
- row 行 表格容器中的一行單元格。（必需的父元素角色：grid,rowgroup,table,treegrid）(必需的子元素:cell,columnheader,gridcell,rowheader)(支持的狀態或屬性：aria-colindex；aria-level；aria-rowindex；aria-selected)
- rowgroup 一組行元素 包含表格容器中的一個或多個行元素的結構。（必需的父元素角色：grid,table,treegrid）(必需的子元素:row)
- rowheader 行表頭 包含網格中行的標題信息的單元格。（必需的父元素角色：row)(支持的狀態或屬性：aria-sort )
- separator(沒有獲取焦點時) 分隔 分隔符，用於分隔和區分內容或菜單項組的各個部分。
- table 包含按行和列排列的數據的部分。(必需的子元素：row,rowgroup->row)(支持的狀態或屬性：aria-colcount,aria-rowcount)
- term 定義 帶有相應定義的單詞或短語。
- toolbar 工具欄 以緊湊視覺形式表示的常用功能按鈕或控件的集合。(支持的狀態或屬性：aria-orientation)(默認：aria-orientation:horizontal)
- tooltip 提示文本 顯示元素描述的上下文彈出窗口。
區域標識角色 (Landmark Roles)
以下角色是用作導航標識的頁面區域。所有這些角色都繼承自地標基本類型，並且都是繼承自landmark的。這些角色包含在此處，以使它們成爲WAI-ARIA角色分類的明確組成部分。
- banner 橫幅 主要包含面向站點的內容，而不是特定於頁面的內容。
- complementary 補充 旨在與DOM層次結構中類似級別的主要內容互補，但在與主要內容分離時仍然有意義。
- contentinfo 頁尾聲明信息 包含有關父文檔的信息的大型可感知區域。
- form 表單 一個landmark包含項目，對象，作爲一個整體，結合創建表單集合區域。
- main 主體 文檔的主要內容。
- navigation 導航 具有導航功能的元素（通常是連接）的集合，用來導航到相關文檔。
- region 區域 一個可感知的部分，其中包含與特定的，作者指定的目的相關的內容，並且足夠重要以至於用戶可能希望能夠輕鬆地導航到該部分並將其列在頁面摘要中。這樣的頁面摘要可以由用戶代理或輔助技術動態生成。
- search 搜索 包含一組項目和對象，這些項目和對象作爲一個整體組合在一起以創建搜索工具
實時區域角色 (Live Region Roles)
以下角色是實時區域，可以通過實時區域屬性進行修改。
- alert 警告 一種具有重要且通常是時間敏感信息的實時區域。(默認 aria-live=assertive;aria-atomic=true)
- log 日誌記錄 其中以有意義的順序添加新信息並且舊信息可能消失。(默認aria-live=polite)
- marquee 滾動文字 一種非必要信息頻繁變化的實時區域。(默認aria-live=off )
- status 狀態欄 其內容是用戶的諮詢信息，但不足以證明警報的合理性，通常但不一定表示爲狀態欄。(子類角色：progerssbar,timer)(默認 aria-live=polite,aria-atomic=true)
- timer 計數 一種包含數字計數器的活動區域，該數字計數器指示從起始點開始的經過時間量，或者剩餘到結束點的時間。
窗口角色 (Window Roles)
以下角色充當瀏覽器或應用程序中的窗口。
- alertdialog 警告彈出框 一種包含警報消息的對話框，其中初始焦點聚焦在對話框內的元素。
- dialog 對話框 對話框是WEB應用程序主窗口的後代窗口。對於HTML頁面，主應用程序窗口是整個WEB文檔，即body元素。（子類角色: alertdialog）

區域標識角色 (Landmark Roles) 實踐

幾個HTML5分區元素自動創建ARIA標識區域。因此，爲了向輔助技術用戶提供頁面的邏輯視圖，瞭解使用HTML5分區元素的效果非常重要。

HTML5分區元素的默認role標識

aside:complementary
footer:contentinfo在body元素的上下文中
header:banner在body元素的上下文中
main:main
nav:navigation
section:region當它具有使用aria-labelledby或的可訪問名稱時aria-label

標識設計的一般原則
在其中一個標誌性區域中包括頁面上的所有可感知內容併爲每個標誌性區域賦予語義上有意義的作用是確保輔助技術用戶不會忽視與其需求相關的信息的最有效方式之一。

第1步：確定邏輯結構

將頁面分成可感知的內容區域，設計者通常使用對齊和間距在視覺上指示。
可以根據需要將區域進一步定義爲邏輯子區域。
子區域的示例是門戶應用程序中的portlet。

第2步：爲每個區域分配 role標識

根據區域中的內容類型分配 role標識。
banner，main，complementary和contentinfo標識應該是頂級的標識。
可以嵌套 role標識以識別所呈現信息的父/子關係。

第3步：標記區域

如果在頁面上多次使用特定的 role標識，請爲該標識的每個實例提供唯一標籤。有一種罕見的情況是，爲標識的多個實例提供相同的標籤可能是有益的：每個實例的內容和目的是相同的。例如，一個大的搜索結果表有兩組相同的分頁控件 - 一個在上面，一個在表下面，所以每個集都在一個標記爲搜索結果的導航區域中。在這種情況下，向區分這兩個實例的標籤添加額外信息可能會比有用更令人分心。
如果標識僅在頁面上使用一次，則可能不需要標籤。請參閱下面的Landmark Roles部分。
如果區域以標題元素開頭（例如h1-h6），則可以使用該aria-labelledby屬性將其用作區域的標籤。
如果某個區域需要標籤但沒有標題元素，請使用該aria-label屬性提供標籤。
不要將標記角色用作標籤的一部分。例如，具有標籤“站點導航”的導航標識將由屏幕閱讀器宣佈爲“站點導航導航”。標籤應該只是“網站”。

banner

一個banner標誌性標識，在每一頁的網站內開始面向網站內容。面向網站的內容通常包括諸如網站贊助商的徽標或身份以及特定於站點的搜索工具之類的內容。橫幅通常出現在頁面頂部，通常橫跨整個寬度。

每個頁面可能有一個banner標識。
該banner標識意義的應該是一個頂級標識。
當頁面包含嵌套document和/或application角色（例如，通常通過使用iframe和frame元素）時，每個document或application角色可以具有一個banner界標。
如果頁面包含多個banner標識，則每個標識都應具有唯一標籤。
HTML5 header元素banner在其上下文是body元素時定義了一個標識。
當HTML5 header元素是banner以下任何元素的後代時，它不被視爲具有標識意義（請參閱HTML輔助功能映射 )：
- article
- aside
- main
- nav
- section

如果header未使用HTML5 元素技術，role="banner"則應使用屬性來定義banner標識。

banner標識示例

complementary

complementary標識是文檔，設計成與在DOM層次結構中的類似水平的主要內容互補的支撐部分，但是從主內容分離時仍然有意義。

complementary 標識應該是頂級標識（例如，不包含在任何其他標識內）。
如果補充內容與主要內容無關，則應分配更一般的角色（例如region）。
如果頁面包含多個complementary標識，則每個標識都應具有唯一標籤）。

使用HTML5 aside元素定義complementary標識。

如果aside未使用HTML5 元素技術，請使用role="complementary"屬性來定義complementary標識。

complementary標識示例

contentinfo

一個contentinfo標識是一個方法來識別一個網站中的每個頁面的底部常見的信息，通常稱爲頁面的“腳註”，包括諸如版權和鏈接隱私和可訪問性聲明的信息。

每個頁面可能有一個contentinfo標識。
該contentinfo標識意義的應該是一個頂級標識。
當頁面包含嵌套document和/或application角色（例如，通常通過使用iframe和frame元素）時，每個document或application角色可以具有一個contentinfo界標。
如果頁面包含多個contentinfo標識，則每個標識都應具有唯一標籤。
HTML5 footer元素contentinfo在其上下文是body元素時定義了一個標識。
當HTML5 footer元素是contentinfo以下任何元素的後代時，它不被視爲具有標識意義：
- article
- aside
- main
- nav
- section

如果footer未使用HTML5 元素技術，role="contentinfo"則應使用屬性來定義contentinfo標識。

contentinfo標識示例

form

form標誌性標識包含的項目和對象，作爲一個整體，結合起來，創造一種形式的集合，當沒有其他命名的標識是適當的區域（如主或搜索）。

當表單用於搜索功能時，使用search標識而不是form標識。
一個form具有標識意義應該有一個標籤，以幫助用戶瞭解表單的目的。
form標識的標籤應對所有用戶可見（例如h1-h6元素）。
如果頁面包含多個form標識，則每個標識都應具有唯一標籤。
只要有可能，formHTML文檔中的標識中包含的控件應使用本機主機語義：
- button
- input
- select
- textarea

HTML5 form元素form在具有可訪問名稱（例如aria-labelledby，aria-label或title）時定義標識。

使用它role="form"來識別頁面的區域；不要用它來識別每個表單字段。

form標識示例

main

main界標標識網頁的主要內容。

每個頁面都應該有一個main標識。
該main標識意義的應該是一個頂級標識。
當頁面包含嵌套document和/或application角色（例如，通常通過使用iframe和frame元素）時，每個document或application角色可以具有一個main界標。
如果頁面包含多個main標識，則每個標識都應具有唯一標籤。

使用HTML5 main元素定義main標識。

如果main未使用HTML5 元素技術，請使用role="main"屬性來定義main標識。

main標識示例

navigation

Navigation 標識提供了一種識別旨在用於網站或頁面內容導航的鏈接組（例如列表）的方法。

如果頁面包含多個navigation標識，則每個標識都應具有唯一標籤。
如果navigation標識具有與navigation頁面上的另一個標識相同的鏈接集，則對每個navigation標識使用相同的標籤。

使用HTML5 nav元素定義navigation標識。

如果nav未使用HTML5 元素技術，請使用role="navigation"屬性來定義navigation標識。

navigation標識示例

region

region標識是用戶能夠瀏覽到部分是足夠重要的頁面包含內容的感知的部分。

一個region具有標識意義必須有標籤。
如果頁面包含多個region標識，則每個標識都應具有唯一標籤。
該region標識可用於識別名爲標識未適當描述的內容。

HTML5 section元素region在具有可訪問名稱（例如aria-labelledby，aria-label或title）時定義標識。

如果section未使用HTML5 元素技術，請使用role="region"屬性來定義region標識。

region標識示例

search

search標誌性包含項目和對象，作爲一個整體，結合創建搜索功能的集合。

當表單用於搜索功能時，使用search標識而不是form標識。
如果頁面包含多個search標識，則每個標識都應具有唯一標籤。

沒有定義search標識的HTML5元素。

該role="search"屬性定義了一個search標識。

search標識示例

狀態和屬性

通用屬性：

aria-atomic <true|false> 指示輔助技術是否將基於aria-relevant屬性定義的更改通知呈現更改區域的全部或部分。
aria-current(狀態) <id> 表示容器或相關元中的當前項的元素。
aria-keyshortcuts <String> 表示已實現的鍵盤快捷鍵，用於激活或爲焦點提供焦點。
aria-label <String> 定義一個字符串值標記當前元素。
aria-relevant <additions|removals|text|all> additions表示新增節點的時候做出反應；removals表示刪除節點時重要操作；text表示文本改變是值得重視的；all等同於同時使用上面三個屬性值。
aria-roledescription <String> 爲元素的角色定義可讀的，本地化的描述。

小部件屬性：

aria-autocomplete<inline|list|both|none> 表示用戶的文本框的自動提示是否提供。如果是none,則支持autocomplete的元素其autocomplete需設置爲off；如果是inline|list|both則需設爲on
aria-checked(狀態) <true|false|mixed> true表示元素被選擇；false表示元素未被選擇；mixed表示元素同時有選擇和爲選擇狀態。
aria-disabled(狀態) <true|false> true表示當前是非激活狀態；false表示清除非激活狀態。
aria-expanded(狀態) <undefined|true|false> 該屬性對應HTML5的open屬性。表示展開狀態。默認爲undefined, 表示當前展開狀態未知。true表示元素是展開的；false表示元素不是展開的。
aria-haspopup <true|false> true表示點擊的時候會出現菜單或是浮動元素； false表示沒有pop-up效果。
aria-hidden(狀態) <true|false> true表示元素隱藏(不可見)，false表示元素可見。
aria-invalid(狀態) <true|false> 表示元素值是否錯誤的。默認爲false, 表示是OK的，如果爲true, 則表示值驗證不通過。
aria-label <String> 標記當前元素。
aria-level <Number> 表示等級。
aria-modal <true|false> 指示元素在顯示時是否爲模態。
aria-multiline <true|false> 指示文本框是接受多行輸入還是僅接受一行。
aria-multiselectable <true|false> 表示是否可多選。默認爲false, 表示一次只能選擇一個項。true表示一次可以選擇多個項。例如手風琴展開收起效果，我們可以使用aria-multiselectable來告知輔助設備，一次可以展開多個項還是隻有一個展開。
aria-orientation <undefined|horizontal|vertical> 指示元素的方向,默認爲undfined
aria-placeholder <String> 定義一個簡短的提示（一個單詞或短語），用於在控件沒有值時幫助用戶輸入數據。提示可以是樣本值或預期格式的簡要描述。
aria-pressed(狀態) <undefined|true|false|mixed> 默認爲undfined, 表示按下狀態未知；true表示元素往下（按鈕按下）；false表示元素擡起；mixed表示元素同時有按下和沒有按下的狀態。
aria-readonly <true|false> 表示是否只讀。默認爲false, 表示元素值可以被修改；true表示元素指不能被改變。
aria-required <true|false> 多半用在表單控件中。對應HTML5中required屬性。默認爲false, 表示元素值可以爲空；true表示元素值是必需的。
aria-selected(狀態) <undefined|true|false> 默認爲undefined，表示元素選擇狀態未知。true表示元素已選擇；false表示未被選中。
aria-sort <ascending|descending|none|other> 表示表格或格柵中的項是以升序排列還是降序排列。
aria-valuemax <Number> 允許的最大值。
aria-valuemin <Number> 允許的最小值。
aria-valuenow <Number> 表示當前值。
aria-valuetext <String> 定義等同於aria-valuenow人可讀的文本。

激活區域屬性：

aria-atomic<true|false> 表示區域內容是否完整播報。值可以爲true和false。當爲true時，表示輔助設備需要把基於 aria-relevant 屬性定義的區域內容都通報給使用者；如果爲false則表示只需要通報修改的部分。
aria-busy<true|false|error> 表當前區域的忙碌狀態。默認爲false, 表清除busy狀態；可選爲true, 表該區域正在加載；或爲error, 表示該區域驗證無效。如果某個區域內有多個地方需要修改，需要全部修改完畢再通知使用者的話，就可以先將aria-busy設爲true, 等到全部內容更新完畢後再設成false. 該屬性可以避免輔助工具在區域內容更新完畢前不斷即時提醒使用者。
aria-live off|polite|assertive|rude 絕大多數的更新應該在用戶閒暇的時候告知，即時提示對用戶是一種干擾。如果希望內容完全更新後再提示，可以使用aria-busy。默認爲off, 表示不宣佈更新；polite表示只有用戶閒時宣佈；assertive表示儘快對用戶宣佈；rude表示即時提醒用戶，必要的時候甚至中斷用戶。
aria-relevant <additions|removals|text|all> 表示區域內哪些操作行爲需要做出反應。可以空格分隔多個一起顯示. additions表示新增節點的時候做出反應；removals表示刪除節點時重要操作；text表示文本改變是值得重視的；all等同於同時使用上面三個屬性值。

關係屬性：

aria-activedescendant<id> 當dom聚焦在composite,textbox,group或application時，標識當前獲取焦點的子元素id
aria-colcount <Number> 定義 table, grid 或 treegrid 的總列數
aria-colindex <Number> 定義 table, grid 或 treegrid 的列索引或位置
aria-colspan <Number> 定義 table, grid 或 treegrid 的cell或gridcell所跨越的列數
aria-controls <id1 id2 ...> 該屬性定義了元素間不能通過文檔結構決定的關聯關係。aria-controls屬性主要被role爲group, region, 或widget的元素使用。
aria-describedby <id1 id2 ...> 該屬性定義了文檔結構表現不出來的的元素間的相互關聯性。該屬性旨在通過標籤提供更多用戶可能需要的信息。如果指定了不只一個id, 所有元素會合併在一起共同創建一條單獨的描述。
aria-details <id> 標識爲對象提供詳細的擴展描述的元素。
aria-errormessage 標識爲對象提供錯誤消息的元素。
aria-flowto <id1 id2 ...> 如果該屬性值對應的是單獨的id, 輔助技術會恢復目標元素的閱讀；如果對應的是多個id, 則輔助技術會讓用戶去選擇、導航到目標元素。
aria-labelledby <id1 id2 ...> 一般用在區域元素上，對於的id一般爲對應的標題或是標籤元素的id.關係型屬性。
aria-owns <id> 表示所擁有的元素。值爲目標元素id.
aria-posinset <Number> 表示當前位置。用在設置和獲取一個集合內某項的當前位置。
aria-rowcount <Number> 定義 table, grid 或 treegrid 的總行數
aria-rowindex <Number> 定義 table, grid 或 treegrid 的行索引或位置
aria-rowspan <Number> 定義 table, grid 或 treegrid 的cell或gridcell所跨越的行數
aria-setsize <Number> 設置的尺寸大小值。

基礎控件

按鈕 button

按鈕是一個組件，能夠讓用戶觸發一個操作或事件，例如提交一個表單、打開一個對話框、取消操作、或執行刪除操作。告知用戶一個按鈕會打開對話框的慣用方法是將“...”（省略號）添加到按鈕上，例如“另存爲...”

除了常規按鈕組件外，WAI-ARIA還支持其他2種按鈕類型：

切換按鈕 toggle button：可以關閉（未按下）或打開（按下）的雙狀態按鈕。爲了告知輔助技術該按鈕是個切換按鈕，需要爲其指定屬性 aria-pressed的值。例如，音頻播放器中被標記爲靜音的按鈕可以通過設置其按下狀態爲 true，來指示聲音被靜音。重要提示：按鈕狀態改變時，其標籤不改變。在此示例中，當按下狀態爲 true 時，其標籤仍爲“靜音”，這樣屏幕閱讀器就會像這樣朗讀：“靜音” 切換按鈕“已按下”。或者，如果設計文檔要求按鈕標籤從“靜音”變爲“取消靜音”，則不需要設置 aria-pressed 屬性。
菜單按鈕 menu button：如菜單按鈕所述，當其 aria-haspopup屬性設置爲 true 或者 menu 時，該按鈕會被輔助技術視爲一個菜單按鈕。

注意按鈕執行的動作類型與鏈接的功能截然不同（參見鏈接模式）。組件的外觀和角色與其提供的功能相匹配，這非常重要。但是，偶爾某些元素會有鏈接的視覺樣式，卻執行按鈕的操作。在這種情況下，爲元素添加 button 角色，可以幫助輔助技術用戶理解元素的功能。但是，更好的解決方案是調整其視覺設計，以匹配其功能和ARIA角色。

示例

按鈕示例：將可點擊的HTML div 和 span 元素作爲可訪問命令和切換按鈕的示例。

Toggle Buttons - Inclusive Components

A Theme Switcher - Inclusive Components

鍵盤交互

當按鈕有焦點時：

Space或Enter：激活按鈕
按鈕激活後，根據按鈕的操作類型設置焦點。例如：
- 如果激活按鈕打開一個對話框，焦點將移至對話框內。（見對話框（模態））
- 如果激活按鈕會關閉一個對話框，焦點通常會返回到打開該對話框的按鈕上，除非該對話框執行的功能會遵從上下文的邏輯，轉到一個不同的元素。例如，激活對話框中的取消按鈕將焦點返回到打開對話框的按鈕。但是，如果對話框是確認刪除其來自頁面的操作，焦點將會根據邏輯移至一個新的上下文。
- 如果激活按鈕不會關閉當前上下文，按鈕激活後，焦點仍停留在該按鈕上，例如，一個應用或重新計算的按鈕。
- 如果按鈕操作會導致上下文變更，例如，轉到嚮導中的下一步，或添加其他搜索條件，此時，可以將焦點移至新操作的起點。
- 如果使用快捷鍵激活按鈕，焦點通常保留在激活快捷鍵的上下文中。例如，如果把快捷鍵 Alt+U 分配給“向上”按鈕，該按鈕會將當前聚焦的列表項目移至列表中的較高位置，當焦點在列表中時，按 Alt+U 將焦點移出列表。

WAI-ARIA角色，狀態和屬性

按鈕具有的角色 button。
按鈕有一個可訪問的標籤
默認情況下，可訪問名稱是從按鈕元素內部的所有內容計算得來。但是，無障礙名稱也可以使用 aria-describedby 或 aria-label 提供。
如果按鈕有功能描述，則將按鈕元素的 aria-describedby 的值設置爲包含描述的元素的ID。
當與按鈕相關聯的動作不可用時，該按鈕的 aria-disabled 設置爲 true。
如果按鈕是一個切換按鈕，則其具有 aira-pressed 狀態屬性。當按鈕被打開時，該狀態屬性的值爲 true，當被關閉時，該狀態屬性的值爲false。

鏈接 link

鏈接組件提供了對資源的交互索引。目標資源可以是外部的的，也可以是本地的，例如，當前頁面內、頁面外、應用。

注意作者們強烈建議使用原生語言的鏈接元素，例如一個具有 href 屬性的HTML A 元素。與其他 WAI-ARIA 組件角色一樣，應用link角色到一個元素，瀏覽器不會自動添加標準鏈接行爲，例如導航到鏈接目標或上下文菜單操作。當使用 link 角色時，爲元素提供這些特性是開發者的責任。

示例

鏈接舉例: 用HTML標籤 span 和 div 構建鏈接部件。

鍵盤交互

Enter: 執行鏈接並且將焦點移至鏈接目標。
Shift + F10 _(可選)_: 打開鏈接的上下文菜單。

WAI-ARIA 角色，狀態和屬性

包含鏈接文本或圖形的元素有 link 角色。

閱讀更多連接 read more

將標題選擇器添加到標題或段落，並用於aria-labelledby=""鏈接到標題文本。
aria-label=""直接在鏈接中添加描述性文本。
將id選擇器添加到標題或段落，並用於aria-describedby=""鏈接到標題文本。
使用該類visuallyhidden可視地隱藏有關鏈接的更多信息。
儘可能將更多鏈接讀入按鈕，因爲它們允許更多標籤選項。

示例

<a href="#" aria-labelledby="headline" class="read-more">Read More</a>

提示 tooltip

Tooltip是元素獲得鍵盤焦點或鼠標懸停在其上時，顯示的與元素相關的信息彈窗。它通常在一小段延遲後出現，並在 Escape 按下或鼠標移出時消失。

Tooltip組件不會獲得焦點。包含可聚焦元素的懸停可以使用非模態對話框模式實現。

示例
Tooltips & Toggletips - Inclusive Components

鍵盤交互

Escape: 關閉工具提示框。

注意

當工具提示組件顯示時，焦點停留在觸發元素上。

如果當觸發元素獲得焦點時喚起工具提示組件，當元素失去焦點時（onBlur），工具提示組件消失。如果鼠標移入喚起工具提示組件，則鼠標移出時消失。

WAI-ARIA 角色，狀態和屬性

作爲工具提示組件容器的元素具有角色 tooltip。
觸發工具提示組件的元素使用 aria-describedby 索引工具提示組件元素。

多媒體控件

圖片 img

非裝飾性img務必加上具有描述性的alt。
使用alt而不是title，以下任何一種都不能在瀏覽器和屏幕閱讀器組合中可靠地工作。
非空title的空alt

<img src="a.gif" alt="" title="some text">

非空title，沒有alt

<img src="a.gif" title="some text">

Short note on use of alt=”” and the title attribute

關於站點圖標

添加到網站的<img>需要具有alt屬性。如果圖像是信息性的，請將該等圖像設置爲該圖像alt的描述性替代。
避免使用照片，圖像或圖標等通用字符串作爲alt值，因爲它們不會向用戶傳達有價值的內容。儘可能具有描述性。
確保文本圖像中的任何文本至少爲14磅，並且與背景具有良好的對比度。
當使用圖像作爲鏈接時，必須考慮如何將alt文本讀回給輔助技術的用戶。以下示例alt在用作鏈接或獨立圖像資源時顯示徽標的相應文本。

a11y-站點圖標示例

關於SVG
讓屏幕閱讀器和語音識別工具等輔助技術（AT）可以訪問SVG的最佳方法是使用<svg>標籤將其直接放入HTML中
避免使用<embed>，<object>或<img>元素，因爲它們不像瀏覽器那樣支持內聯SVG
在SVG標記中包含一個<title>和<description>
使用aria-labelledby=""和引用標題和描述元素的id值
使用該role=""屬性爲SVG提供工作
在SVG添加中“隱藏”屏幕閱讀器中的元素 role="presentation"

a11y-svg示例

音頻

在考慮可訪問性的情況下構建您的媒體！在開始時使用可訪問性比在以後嘗試使用它更容易。所有組件都是如此，尤其是媒體組件。
確保您的播放器可以訪問，幷包含暫停，停止和播放媒體的控制元素。
不要自動播放媒體。這可能會造成混亂和煩惱。
確保您的媒體有其他方法來獲取內容。例如，添加音頻文件的腳本。
a11y-音頻示例

視頻

在考慮可訪問性的情況下構建您的媒體！在開始時使用可訪問性比在以後嘗試使用它更容易。所有組件都是如此，尤其是媒體組件。

確保您的播放器可以訪問，幷包含暫停，停止和播放媒體的控制元素。
不要自動播放媒體。這可能會造成混亂和煩惱。
確保您的媒體有其他方法來獲取內容。例如，爲視頻添加字幕和/或提供供用戶閱讀的記錄。
確保您的媒體不會引起癲癇發作！在將媒體添加到您的網站之前，請使用光敏癲癇分析工具（PEAT）檢查您的媒體。

a11y-視頻示例

表單類控件

單選按鈕組　radio group

radio group是一組可勾選按鈕，稱爲單選按鈕，一次只能勾選一個按鈕。一些實現可以在勾選狀態下的所有按鈕初始化該集合，以迫使用戶在移動焦點之前勾選其中一個按鈕。
示例

鍵盤交互

對於工具欄中不包含的radio group

本節介紹爲大多數radio group實施的鍵盤交互。對於嵌套在工具欄內的radio group的特殊情況，請使用以下部分中描述的鍵盤交互。

Tab和Shift + Tab：將焦點移入和移出radio group。當焦點移動到radio group時：
- 如果選中單選按鈕，則會在選中的按鈕上設置焦點。
- 如果未選中任何單選按鈕，則會在組中的第一個單選按鈕上設置焦點。
Space：如果尚未選中，則檢查聚焦單選按鈕。
Right Arrow 和DownArrow：將焦點移動到組中的下一個單選按鈕，取消選中先前聚焦的按鈕，然後選中新聚焦的按鈕。如果焦點位於最後一個按鈕上，則焦點移動到第一個按鈕。
Left Arrow and Up Arrow：將焦點移動到組中的上一個單選按鈕，取消選中先前聚焦的按鈕，然後選中新聚焦的按鈕。如果焦點在第一個按鈕上，則焦點移動到最後一個按鈕。

注意
上面描述的初始焦點行爲與某些瀏覽器爲本機HTMLradio group提供的行爲略有不同。在某些瀏覽器中，如果未選擇任何單選按鈕，則使用Shift + Tab將焦點移動到收音機組中會將焦點放在最後一個單選按鈕而不是第一個單選按鈕上。

對於工具欄中包含的radio group
因爲箭頭鍵用於在工具欄的元素之間導航而Tab鍵將焦點移入和移出工具欄，當radio group嵌套在工具欄內時，radio group的鍵盤交互與收音機的鍵盤交互略有不同不在工具欄內的組。例如，用戶需要能夠在所有工具欄元素之間導航，包括單選按鈕，而無需更改選中的單選按鈕。因此，當使用箭頭鍵瀏覽工具欄中的單選按鈕組時，選中的按鈕不會更改。嵌套在工具欄中的radio group的鍵盤交互如下。

Space：如果未選中聚焦單選按鈕，則取消選中當前選中的單選按鈕並檢查聚焦單選按鈕。
Enter（可選）：如果未選中聚焦單選按鈕，則取消選中當前選中的單選按鈕並檢查聚焦單選按鈕。否則，什麼都不做。
Right Arrow：
- 當焦點在單選按鈕上並且該單選按鈕不是radio group中的最後一個單選按鈕時，將焦點移動到下一個單選按鈕。
- 當焦點位於單選按鈕組中的最後一個單選按鈕上並且該單選按鈕不是工具欄中的最後一個元素時，將焦點移動到工具欄中的下一個元素。
- 當焦點位於單選按鈕組中的最後一個單選按鈕上時，該單選按鈕也是工具欄中的最後一個元素，將焦點移動到工具欄中的第一個元素。
Left Arrow：
- 當焦點位於單選按鈕上且該單選按鈕不是收音機組中的第一個單選按鈕時，將焦點移至上一個單選按鈕。
- 當焦點位於單選按鈕組中的第一個單選按鈕且該單選按鈕不是工具欄中的第一個元素時，將焦點移動到工具欄中的上一個元素。
- 當焦點位於單選按鈕組中的第一個單選按鈕上時，該單選按鈕也是工具欄中的第一個元素，將焦點移動到工具欄中的最後一個元素。
Down Arrow（可選）：將焦點移動到收音機組中的下一個單選按鈕。如果焦點位於收音機組中的最後一個單選按鈕上，則將焦點移至組中的第一個單選按鈕。

-Up Arrow（可選）：將焦點移動到radio group中的上一個單選按鈕。如果焦點位於收音機組中的第一個單選按鈕上，則將焦點移至組中的最後一個單選按鈕。

注意
工具欄中的單選按鈕通常以更像切換按鈕的方式設置樣式。有關示例，請參閱簡單編輯器工具欄示例

WAI-ARIA角色，狀態和屬性

單選按鈕包含在具有角色radiogroup的元素中或由其擁有。
每個單選按鈕元素都有角色無線電。
如果選中單選按鈕，則無線電元素的aria-checked設置爲true。如果未選中，則將aria-checked設置爲false。
每個無線電元素由其內容標記，具有由aria-labelledby引用的可見標籤，或具有用aria-label指定的標籤。

-radiogroup元素具有由aria-labelledby引用的可見標籤或具有用aria-label指定的標籤。

如果存在提供關於radio group或每個單選按鈕的附加信息的元素，則這些元素由具有aria-describedby屬性的radiogroup元素或無線電元素引用。

開關 switch

開關和複選框是類似的組件，因爲它們具有 on(checked) 和 off(unchecked)狀態。
但屏幕朗讀器仍會識別複選框的語義,需要加上role="switch"。

另一種實現方式是button加上role="switch"
示例
Switch Checkbox
ARIA Switch Controls (external repo)
Switch Component: Radio Buttons
Switch Radio Button Group
Inclusive Considerations When Restyling Form Controls - Scott O'Hara

搜索

在父元素role =“search”中包裝搜索組件，以增加其對輔助技術的可發現性。
只要有可能，請使用label元素將文本與表單元素明確關聯。標籤的for屬性必須與表單控件的id完全匹配。
當帶有描述性文本的按鈕旁邊時，某些表單字段不需要顯式label元素。例如：標記爲搜索的按鈕旁邊的搜索字段。在這些情況下，您仍應在標記中添加標籤，但您可以在視覺上隱藏它。
請注意，所有輔助技術都不承認placeholder，因此不適合替換適當的標籤。此外，宣佈佔位符的輔助技術將首先讀取佔位符，然後讀取輸入的標籤，然後讀取輸入的類型。所以一定不要重複輸入標籤作爲佔位符，否則會被多次朗讀。

a11y-search示例

複選框 checkbox

WAI-ARIA支持兩種類型的 checkbox：

雙態: 最常見的複選框類型，它允許用戶在兩個狀態間切換——選中、未選中.
三態: 這種類型的複選框支持額外的第三種狀態 - 部分選中.

三態複選框的一種常見使用場景是在軟件安裝時，一個單獨的三態複選框用來代表和控制整個安裝選項組的狀態。並且，該組中的每個選項都可以單獨使用雙態複選框開啓或關閉。

如果該組中的所有選項都被選中，該三態複選框呈現的整體狀態爲選中。
如果該組中的部分選項被選中，該三態複選框呈現的整體狀態爲部分選中（partially checked）。
如果該組中沒有選項被選中，該三態複選框呈現的整體狀態爲未選中。

用戶僅使用一個操作，就可以改變三態複選框組中所有選項的狀態：

選中整體複選框，可以選中組中的所有選項。
取消選中整體複選框，可以取消選中組中的所有選項。
並且，在某些實現中，系統可能會記住上次選中的選項，整體狀態爲部分選中。如果提供了此功能，第三次激活整體複選框會恢復選項組中部分被選中的狀態。

示例

兩種狀態的簡單複選框舉例 : 演示簡單的雙態複選框。
三態複選框示例: 演示如何使用 mixed 的 aria-checked 值製作一個組件。

鍵盤交互

當複選框擁有焦點時, 按 Space 鍵來改變複選框的狀態

WAI-ARIA角色，狀態和屬性

複選框的角色爲 checkbox。
複選框具有可訪問標籤，最好的方式是使用 aria-labelledby 關聯可見標籤:
- 將可見的內容放在角色爲 checkbox 元素裏面。
- 在角色爲 checkbox 的元素上通過 aria-labelledby 屬性的值爲一個可見的內容。
- aria-label 屬性設置在角色爲 checkbox 元素上。
選中後，複選框元素狀態 aria-checked 設置爲 true。
如果未選中，它的狀態 aria-checked 設置爲 false。
當部分選中，它的狀態 aria-checked 設置爲 mixed。
如果使用一個可見標籤可將一組複選框標識爲一個邏輯組，這些複選框應該被包含在一個具有 group 角色的元素中，且該元素的 aria-labelledby 設置爲包含標籤的元素的ID。
如果複選框或複選框組包括額外的相關聯靜態描述文案，複選框或複選框組的屬性 aria-describedby 設置爲包含描述元素的ID。

單選按鈕組

單選按鈕組，是一個可選中按鈕的組合，被稱爲單選按鈕，且在該組合中，只有一個按鈕處於選中狀態。

<fieldset>包圍整個複選框或單選按鈕組。<legend>提供了分組的說明。
一些輔助技術會讀取每個字fieldset的legend文本，因此它應該簡潔且具有描述性。這有助於使用輔助技術的人通過單選按鈕組來理解他們正在回答的問題。
WAI-ARIA提供了一個分組角色，其功能與fieldset和legend相似。外部元素具有role = group以指示包含的元素是組的成員，並且aria-labelledby屬性引用將用作組的標籤的文本的id。

示例

鍵盤交互

在單選按鈕組獲取焦點時:
- 如果有一個單選按鈕被選中，那麼焦點設置在這個按鈕上。
- 如果沒有被選中的單選按鈕，那麼將焦點設置在第一個單選按鈕上。
Space: 如果該按鈕還沒有被選中，則選中當前聚焦的單選按鈕。
Right Arrow 和 Down Arrow: 移動焦點到組合中的下一個單選按鈕，取消選中先前聚焦的按鈕，並且選中新聚焦的按鈕。如果焦點在最後一個按鈕上，焦點移至第一個按鈕。
Left Arrow 和 Up Arrow: 移動焦點到組合中的上一個單選按鈕，取消選中先前聚焦的按鈕，並選中新聚焦的按鈕。如果焦點在第一個按鈕上，焦點移至最後一個按鈕。

注意上文所述的初始聚焦行爲，與一些瀏覽器爲原生HTML按鈕組所提供的行爲略有不同。在某些瀏覽器中，如果沒有選中任何一個單選按鈕，使用 Shift+ Tab 將焦點移至單選按鈕組，焦點將會被放置在最後一個單選按鈕，而不是第一個單選按鈕。

WAI-ARIA 角色，狀態和屬性

單選按鈕被具有 radiogroup 角色的元素包含或擁有。
每個單選按鈕的role值都爲 radio 。
如果一個單選按鈕被選中，那麼該 radio 元素的 aria-checked 將被設置爲 true。如果沒有被選中，aria-checked 設置爲 false。
每一個 radio 元素由其內容標記，使用 aria-labelledby，索引一個可見標籤，或使用 aria-label 指定一個標籤。
radiogroup 使用 aria-labelledby 索引一個可見標籤，或者使用 aria-label 指定一個標籤。
如果元素提供了單選按鈕組或每個單選按鈕的額外信息，這些元素被 radiogroup 元素或 radio 元素使用 aria-describedby 屬性索引。

滑塊 slider

滑塊是供用戶從給定範圍內選擇值的輸入控件。滑塊通常有個拖動觸點，可以沿着條或軌道移動來改變滑塊的值。

示例

水平滑塊示例: 演示使用三個水平對齊的滑塊來製作顏色選擇器。
具有 aria-orientation 和 aria-valuetext 屬性的滑塊示例 : 三個恆溫控制滑塊，使用 aria-orientation 和 aria-valuetext。

鍵盤交互

Right Arrow: 按一定量增加滑塊的值；
Up Arrow: 按一定量增加滑塊的值；
Left Arrow: 按一定量減小滑塊的值；
Down Arrow: 按一定量減小滑塊的值；
Home: 將滑塊設置爲其範圍內的最小值；
End: 將滑塊設置爲其範圍內的最大值；
Page Up _(可選)_: 大幅度增加滑塊的值（比 Up Arrow 增加的值大）。
Page Down _(可選)_: 大幅度減小滑塊的值（比 Down Arrow 減小的值大）。

注意

焦點放在滑塊上(鼠標用戶可以移動的視覺對象，也稱爲thumb組件)。

在某些場景下，反轉上面指定值變化的方向(例如： Up Arrow 減小滑塊的值)，可以創建更直觀的體驗 _（譯者注：可以理解爲滑塊爲縱向方向排列）

WAI-WRIA 角色、狀態和屬性

每個可聚焦滑塊觸點元素具有 slider 角色。
每個滑塊元素的 aria-valuenow 屬性設置爲滑塊當前的十進制值。
每個滑塊元素的 aria-valuemin 屬性設置爲滑塊十進制的最小允許值。
每個滑塊元素的 aria-valuemax 屬性設置爲滑塊十進制的最大允許值。
當另一個滑塊的範圍（如最小值或者最大值）依賴另一個滑塊的當前值，當前值改變的時候依賴滑塊的 aria-valuemin 或 aria-valuemax 也要更新。
如果 aria-valuenow 的值對用戶不友好，例如周幾一般使用數字呈現，將 aria-valuetext 屬性設置爲一個字符串，這樣滑塊值更易理解，例如 "Monday"。
如果滑塊具有可視的標籤，那麼滑塊元素通過 aria-labelledby 引用，否則滑塊元素上設置 aria-label 標籤。
如果滑塊是垂直方向的，則把 aria-orientation 設置爲 vertical。滑塊的 aria-orientation 的默認值是 horizontal。

滑塊（多個觸點） sliderwothumb

多觸點滑塊是具有兩個或更多觸點的滑塊，每個觸點都在一組相關值中設置值。例如，在產品搜索中，可以使用雙觸點滑塊使用戶能夠設置搜索的最小和最大價格限制。在許多雙觸點滑塊中，不允許觸點彼此通過，例如當滑塊設置範圍的最小值和最大值時。例如，在價格範圍選擇器中，設置範圍下限的觸點的最大值受限於設置範圍上限的觸點的當前值。相反，上端觸點的最小值受到下端觸點的當前值的限制。但是，在某些多觸點滑塊中，每個觸點都會設置一個不依賴於其他觸點值的值。
示例
多觸點滑塊示例：演示雙觸點滑塊，用於選擇航空公司航班和酒店預訂的價格範圍。
鍵盤交互

每個觸點都在頁面標籤序列中，並且與單觸點滑塊具有相同的鍵盤交互。
無論滑塊內的觸點值和視覺位置如何，Tab鍵順序都保持不變。例如，如果觸點的值發生變化，使其移動經過其他觸點之一，則Tab鍵順序不會更改。

WAI-ARIA角色，狀態和屬性

用作可聚焦滑塊的每個元素都有角色滑塊。
每個滑塊元素都將aria-valuenow屬性設置爲表示滑塊當前值的十進制值。
每個slider元素都將aria-valuemin屬性設置爲十進制值，表示滑塊的最小允許值。
每個滑塊元素的aria-valuemax屬性設置爲十進制值，表示滑塊的最大允許值。
當另一個滑塊的範圍（例如，最小值和/或最大值）取決於滑塊的當前值時，當值改變時，更新從屬滑塊的aria-valuemin或aria-valuemax的值。
如果aria-valuenow的值不是用戶友好的，例如，星期幾由數字表示，則aria-valuetext屬性被設置爲使滑塊值可理解的字符串，例如“Monday”。
如果滑塊具有可見標籤，則滑塊元素上的aria-labelledby會引用它。否則，滑塊元素具有由aria-label提供的標籤。
如果滑塊垂直定向，則將aria-orientation設置爲垂直。滑塊的aria-orientation的默認值是水平的。

數值調節按鈕 spinbutton

數值調節按鈕是個將值限定在離散數值集合或範圍的輸入組件。例如，在一個設置鬧鐘的部件中，一個數值調節按鈕允許用戶在0-59間選擇分鐘。

數值調節按鈕通常有三個組件，包含一個顯示當前值的文本框，一個增加按鈕，一個減小按鈕。一般來說，文本框是唯一可聚焦組件，因爲增加和減小功能可使用光標鍵訪問，一般來說，文本框還允許用戶直接編輯其值。

如果數值範圍很大，數值調節按鈕支持以較小和較大的幅度調節其值。例如，在鬧鐘示例中，用戶可以使用 Up Arrow 和 Down Arrow 以1分鐘的步長改變值，並且可以使用 Page Up 和 Page Down 以10分鐘的步長改變值。

示例

鍵盤交互

Up Arrow: 遞增。
Down Arrow: 遞減。
Home: 如果數值調節按鈕具有最小值，則設置數值調節按鈕的值爲最小值。
End: 如果數值調節按鈕具有最大值，則設置數值調節按鈕的值爲最大值。
Page Up _(可選)_: 以大於 Up Arrow 的調節幅度增加值。
Page Down _(可選)_: 以大於 Down Arrow 的調節幅度減小值。
如果數值編輯按鈕的文本框允許直接編輯其值，支持以下鍵。
- 適用於設備平臺的標準單行文本編輯鍵（請參閱下面的註釋）。
- 可打印字符: 在文本框中輸入字符。注意，許多實現僅允許某些字符作爲值的一部分，並防止輸入任何其他字符。例如，小時和分鐘的數值調節只允許從0到59的整數值，冒號'：'以及字母'AM'和'PM'。任何其他字符輸入不會更改文本字段的內容和按鈕的值。

注意

操作過程中焦點仍在文本字段上。

適用於設備平臺的標準單行文本編輯鍵：

包括輸入鍵，光標移動，選擇和文本操作。

用於編輯功能的標準鍵分配依賴於操作系統。

提供文本編輯功能的最強大的方法需要依靠瀏覽器，瀏覽器爲HTML文本輸入類型的組件和具有 contenteditable HTML屬性的元素支持文本編輯功能。

重要: 確保JavaScript不會干擾瀏覽器提供的文本編輯功能，方法是捕獲用於執行它們的事件。

WAI-WRIA 角色、狀態和屬性

作爲數值調節按鈕的可聚焦元素具有 spinbutton 角色。一般來說，是支持文本輸入的元素。
spinbutton元素的 aria-valuenow 屬性用十進制值，表示當前值。
如果它具有已知的最小值，spinbutton元素的 aria-valuemin 屬性設置爲十進制值，表示數值調節按鈕的最小允許值。
如果它具有確定的最大值，spinbutton元素的 aria-valuemax 屬性設置爲十進制值，表示數值調節按鈕的最大允許值。
如果 aria-valuenow 的值用戶不好理解，例如周幾一般使用數字呈現，可以將spinbutton元素的 aria-valuetext 屬性設置爲一個字符串，讓數值選擇按鈕的值更好理解，例如 "Monday"。
如果spinbutton具有一個可見標籤，在spinbutton元素上使用 aria-labelledby 索引，否則，使用 aria-label 屬性爲spinbutton元素提供一個標籤。

列表框 listbox

listbox 控件呈現了一個選項列表，並允許用戶選擇一個或多個。允許選擇一個選項的列表框是一個單選列表框；允許選擇多個選項的列表框是一個多選列表框。

當屏幕閱讀器呈現一個列表框，可能會渲染出其名稱、狀態和每個選項在列表中的位置。選項的名稱是一個由瀏覽器計算得到的字符串，一般來自選項元素的內容。作爲一個平面字符串（flat string），名稱不包含任何語義信息。因此，如果選項包含一個語義元素，例如一個標題，屏幕閱讀器用戶不會訪問到該語義。另外，listbox角色傳遞給輔助技術的交互模型，不支持選項內元素的交互。因爲listbox組件的這些特性，它並沒有提供可訪問方式來呈現交互元素的列表，例如鏈接、按鈕或複選框。爲了呈現這些交互元素的列表，參見 grid。

爲了讓屏幕閱讀器用戶容易感知和理解，避免使用長選項名稱。當選項被朗讀時，選項的整體名稱作爲一個獨立語音單元被朗讀。當一次按鍵操作就朗讀太多的信息，將會很難理解。長的名稱會增加朗讀中斷的發生，而抑制信息的感知，因爲用戶一般不得不重新朗讀整個選項。而且，如果用戶不理解說了什麼，在listbox組件中，屏幕閱讀器用戶很難實現按字、詞、短語朗讀。

選項集中每個選項名稱使用相同的單詞或短語開頭也可以顯著降低鍵盤和屏幕閱讀器用戶的可用性。滾動列表來找到特定選項，對屏幕閱讀器用戶來說非常費時，因爲他們在聽到每個選項的不同之前，都必須聽到重複的單詞或短語。例如，如果一個選擇城市的列表框，其選項的每個城市名稱前面都有國家名稱，如果每個國家都列出了很多城市，屏幕閱讀器用戶將要不得不在聽到城市名稱之前聽到國家名稱。在這種情況下，最好有2個列表框，一個用於國家，一個用於城市。

鍵盤交互

對於一個垂直向的列表框：

當一個單選列表框接收到焦點：
- 如果在列表框接收焦點前，沒有選擇任何選項，第一個選項獲得焦點。可選的，第一個選項可以自動選擇。
- 如果列表框獲得焦點之前選擇了一個選項，焦點設置在所選擇的選項上。
當一個多選列表框接收到焦點：
- 如果列表框接收焦點之前沒有選擇任何選項，焦點設置在第一個選項並且選擇狀態不會自動改變。
- 如果列表框接收焦點之前選擇一個或多個選項，焦點設置在已選擇選項的第一個。
Down Arrow: 移動焦點到上一個選項。可選，在一個單選列表框中，選擇也可以跟隨焦點移動。
Up Arrow: 將焦點移至前一個選項。通常，一個單選列表框，選擇也可以跟隨焦點移動。
Home (可選): 將焦點移至第一個選項。通常，一個單選列表框，選擇也可以跟隨焦點移動。對於超過5個選項的列表，強烈建議支持此鍵。
End (可選): 將焦點移至最後一個選項。通常，一個單選列表框，選擇也可以跟隨焦點移動。對於超過5個選項的列表，強烈建議支持此鍵。
建議所有列表框都支持鍵入提示。尤其是那些擁有超過七個選項的列表：
- 鍵入字符：焦點移至名稱以鍵入字符開頭的下一個項目上。
- 快速鍵入多個字符：焦點移至名稱以鍵入字符串開頭的下一個項目上。
多選：開發者可以實現以下兩種交互模型中的一種來支持多項選擇：一個是推薦模型，當導航列表時不需要用戶按住修飾鍵，例如 Shift 或Control ，或一種替代模型，當導航時需要用戶按住修飾鍵，防止丟失選擇狀態。
- 推薦的選擇模型 - 沒有必要按住輔助鍵：
  - Space: 改變焦點選項的選擇狀態。
  - Shift + Down Arrow _(可選)_: 將焦點移至下一個選中項並且切換選項的選中狀態。
  - Shift + Up Arrow _(可選)_: 將焦點移至前一選中項並且切換選項的選中狀態。
  - Shift + Space _(可選)_: 從最近選中的項目中選擇相鄰的元素聚焦。
  - Control + Shift + Home _(可選)_: 選擇從聚焦的選項到第一個選項的所有的選項。
  - Control + Shift + End _(可選)_: 選擇從聚焦的選項到最後一個選項的所有選項。
  - Control + A _(可選)_: 選擇列表中的所有選項。或者，如果選擇了所有選項，它也可能取消選擇所有選項。
- 替代選擇模型 —— 在不按住 Shift 或 Control 修飾鍵移動焦點不會取消選擇所有已選擇節點，除非當前聚焦節點：
  - Shift + Down Arrow: 將焦點移至下一個選項並切換選項的選擇狀態。
  - Shift + Up Arrow: 將焦點移至上一個選項並切換選項的選擇狀態。
  - Control + Down Arrow: 將焦點移至下一個選項但不改變選項的選擇狀態。
  - Control + Up Arrow: 將焦點移至上一個選項但不改變選項的選擇狀態。
  - Control + Space: 改變焦點選項的選擇狀態。
  - Shift + Space _(可選)_: 從最近選中的項目中選擇相鄰的元素聚焦。
  - Control + Shift + Home _(可選)_: 選擇從聚焦的選項到第一個選項的所有的選項。
  - Control + Shift + End _(可選)_: 選擇從聚焦的選項到最後一個選項的所有選項。
  - Control + A _(可選)_: 選擇列表中的所有選項。或者，如果選擇了所有選項，它也可能取消選擇所有選項。

注意

DOM焦點（活躍元素）與選擇狀態有功能上的區別。更多細節，請參閱 this description of differences between focus and selection。
listbox 角色支持 aria-activedescendant 屬性，當通過鍵盤導航（keybord navigation）時，它提供一種非傳統方式在 treeitem 元素間移動DOM焦點。有關詳細信息，請參閱 Managing Focus in Composites Using aria-activedescendant
在單選列表框中，移動焦點可以選擇性的取消先前選擇選項的選擇，並選擇新聚焦的選項。這樣的選擇模型被稱之爲 "選擇跟隨焦點"。具有選擇跟隨焦點在某些情況下非常有用，但會嚴重降低其他情況中的可訪問性。有關指南，請參閱 Deciding When to Make Selection Automatically Follow Focus。
如果全選或取消全選是個重要功能，使用不同控件實現這些操作，例如 "全選" 和 "取消全選按鈕"，會顯著提升可用性。
如果在一個列表框的選項水平排列：
1. Down Arrow 行爲和上面描述的 Right Arrow 一樣，反之亦然。
2. Up Arrow 行爲和上面描述的 Left Arrow 一樣，反之亦然。

WAI-ARIA 角色，狀態和屬性

包含或擁有所有列表框選項的元素擁有角色 listbox。
列表框中的每個選項都有 option 角色，並且是 listbox 角色元素的DOM後代，或者在列表框元素上使用 aria-owns 屬性索引。
如果列表框不是另一個部件的一部分，那麼它有一個可見的label通過 aria-labelledby 與有 listbox 角色的元素相關聯。
單選列表框中，選中的選項 aria-selected 設置爲 true。
如果列表框支持多選：
- 角色 listbox 的元素將 aria-multiselectable 設置爲 true。
- 所有被選中的選項都將 aria-selected 設置爲 true。
- 所有未選擇的選項都將 aria-selected 設置爲 false。
如果可用選項的集合沒有完整地顯示在DOM中，而是根據用戶滾動動態加載，它們的 aria-setsize 和 aria-posinset 適當設定。
如果選項是水平排列的， listbox 角色元素的 aria-orientation 設置爲 horizontal。

a11y-表單下拉框示例

文字輸入框 Text Inputs & Textarea

保持簡單 - 屏幕閱讀器不支持鏈接到同一表單元素的多個標籤。
爲每個輸入使用標籤，並使for =“”和id =“”值匹配。ID在每個頁面上必須是唯一的，每個唯一表單元素只能鏈接一個標籤。
使用指示性的方法使必填字段顯而易見：邊框顏色更改，星號，描述文本等。
具有錯誤驗證的字段應具有詠歎調描述，以確保輔助技術讀取關聯的字段級錯誤消息。如果錯誤消息具有id =“my-error-message”，則輸入應該具有aria-describedby =“my-error-message”。

a11y-文字輸入框示例

導航類控件

手風琴 accordion

手風琴是一組垂直堆疊的交互式標題，每個標題包含標題，內容片段或表示內容部分的縮略圖。標題用作控件，使用戶能夠顯示或隱藏其相關的內容部分。當在單個頁面上呈現多個內容部分時，通常使用摺疊來減少滾動的需要。

通過以下術語來理解手風琴：

手風琴標題：
表示內容模塊的標籤或縮略圖，同時也用來展開內容，在某些實現中，也用來隱藏內容模塊。

手風琴面板：
與手風琴標題相關聯的內容模塊

在某些手風琴中，手風琴標題旁邊有永久可見的其他元素。例如，每個手風琴標題都伴隨一個菜單按鈕來提供每個面板的訪問操作。而且在某些情況下，手風琴面板可能永久展開可見。

示例：

手風琴示例：演示把一個表單分成三部分，並使用手風琴導航一次展開其中一部分
Collapsible Sections - Inclusive Components

鍵盤交互

Enter 或 Space:
- 當焦點位於摺疊狀態的手風琴標題上時，展開相關聯面板。如果實現只允許一個面板被展開，且另一個面板被展開，則摺疊這個面板。
- 當焦點位於展開狀態的手風琴標題上時，如果實現支持摺疊，則摺疊該面板。某些實現需要始終展開面板，並且只允許展開一個面板，這時手風琴標題不需要支持摺疊功能。
Down Arrow _(可選)_: 如果焦點在一個手風琴標題上，則將焦點移至下一個手風琴標題。如果焦點在最後一個手風琴標題上，則不響應或將焦點移至第一個手風琴標題。
Up Arrow _(可選)_: 如果焦點在一個手風琴標題上，則將焦點移至上一個手風琴標題，如果焦點在第一個手風琴標題上，則不響應或將焦點移至手風琴的最後一個標題。
Home _(可選)_: 當焦點在手風琴的標題上，將焦點移至第一個手風琴標題
End _(可選)_: 當焦點在手風琴的標題上，將焦點移至最後一個手風琴標題
Control + Page Down _(可選）_: 如果焦點在手風琴面板內，將焦點移至面板標題上。如果焦點在手風琴標題上，將焦點移至前一個手風琴標題。如果焦點在第一個手風琴標題上，則不響應或將焦點移至最後一個手風琴標題。
Control + Page Up _(可選)_: 如果焦點在手風琴面板內，將焦點移至該面板的標題上。如果焦點在手風琴標題，將焦點移至前一個手風琴標題。如果焦點在第一個手風琴標題，允許不響應操作或將焦點移至最後一個手風琴標題

角色、狀態、屬性

每個手風琴標題包含在一個角色爲 button 的元素內。
每個手風琴標題 button 都被具有 heading 角色的元素包裹，且該元素設置了合適的 aria-level 值，對應頁面的信息結構。
- 如果原生語言具有默認 heading 和 aria-level 元素，例如HTML標題標籤，可以使用原生語言元素。
- button 元素是 heading 元素內的唯一元素。也就是說，如果有其他永久可見元素，他們不能被包含在 heading 元素中。
如果與手風琴標題關聯的手風琴面板是展開的，標題的 button 元素的 aria-expanded 屬性設置爲 true。如果面板摺疊的，aria-expanded屬性設置爲 false。
手風琴標題的 button 元素 aria-controls 設置爲包含手風琴面板的內容元素的ID。
如果與手風琴標題關聯的手風琴面板是展開的，且不允許該面板摺疊，那標題的 button 元素的 aria-disabled 設置爲 true。
可選，每個面板容器的元素，都有 region 角色，且使用 aria-labelledby值索引控制面板呈現的按鈕。
- 避免在創建路標 region 擴展的情況下，使用 region 角色，例如在一個包含超過6個面板的手風琴中，可能會同時展開。
- 當面板包含標題元素或嵌套手風琴時，region 角色對屏幕閱讀器用戶對於結構的感知特別有幫助。

麪包屑 breadcrumb

麪包屑包含當前頁面的父頁面的鏈接列表，該列表是層級順序的。它可以幫助用戶在網站或網絡應用程序中找到自己的位置。麪包屑通常水平放置在頁面的主要內容之前。

示例

麪包屑示例

鍵盤交互

不適用

WAI-ARIA 角色，狀態和屬性

麪包屑路徑被包含在導航區域內。
導航區域使用 aria-label 或 aria-labelledby 標記。
當前頁面的鏈接的 aria-current 屬性設置爲 page。如果呈現當前頁面的元素不是個鏈接，aria-current可選。

輪播圖 carousel（slide show or image rotator）

輪播圖通過順序顯示一個或多個幻燈片的子集來呈現一組項目，稱爲幻燈片。通常，一次顯示一張幻燈片，用戶可以激活隱藏當前幻燈片的下一個或上一個幻燈片控件，並將下一張或上一張幻燈片“旋轉”到視圖中。在一些實施方式中，播放在頁面加載時自動開始，並且一旦顯示所有幻燈片，它也可以自動停止。雖然幻燈片可以包含任何類型的內容，但是每個幻燈片僅包含單個圖像的圖像輪播是常見的。

確保所有用戶都能輕鬆控制並且不會受到滑動旋轉的不利影響，這是使輪播圖可訪問性的一個重要方面。例如，如果在屏幕上看不到的幻燈片被錯誤地隱藏（例如，在屏幕外顯示），則屏幕閱讀器體驗可能令人困惑和被誤導。類似地，如果幻燈片自動播放但使用屏幕閱讀器的用戶不知道，則用戶可以讀取幻燈片1上的元素，對下一個元素執行朗讀命令，而不是聽到幻燈片1上的下一個元素，幻燈片2中的元素，不知道剛剛朗讀的元素來自全新的上下文。

提供足夠播放控制所需的功能包括：

用於顯示上一張和下一張幻燈片的按鈕。
可選，用於選擇要顯示的特定幻燈片的控件或控件組。例如，幻燈片選擇器控件可以標記爲選項卡列表中的選項卡，其中幻燈片由tabpanel元素表示。
如果輪播圖可以自動播放，它還：
- 有一個停止和重新播放的按鈕。這對於支持在不移動鍵盤焦點或鼠標的模式下操作的輔助技術尤爲重要。
- 當鍵盤焦點進入輪播圖時停止播放。除非用戶明確要求它這樣做，否則它不會重新播放。
- 只要鼠標懸停在輪播圖上，就停止播放。

示例

術語

以下術語用於描述輪播的組件。

slide
一組內容容器中的單個內容容器，用於保存要由輪播呈現的內容。

rotation control
用於停止和啓動自動幻燈片旋轉的交互式元素。

next slide control
交互式元素，通常爲箭頭樣式，顯示旋轉序列中的下一張幻燈片。

previous slide control
交互式元素，通常設置爲箭頭，顯示旋轉序列中的上一張幻燈片。

slide picker controls
一組元素，通常稱爲小點，使用戶能夠在旋轉序列中選擇要顯示的特定幻燈片。

鍵盤交互

如果輪播圖具有自動播放功能，則當輪播圖中的任何元件接收到鍵盤焦點時，自動播放將停止。除非用戶激活旋轉控制，否則它不會恢復。
Tab和Shift +Tab：將焦點移動到頁面選項卡序列指定的輪播的交互元素 - 不需要爲Tab創建腳本。
按鈕元素實現按鈕模式中定義的鍵盤交互。注意：激活播放控件，下一張幻燈片和上一張幻燈片不會移動焦點，因此用戶可以根據需要輕鬆地重複激活它們。
如果存在，播放控件是輪播圖內Tab鍵序列中的第一個元素。它必須先於旋轉內容，以便輕鬆定位。
如果選項卡元素用於幻燈片選擇器控件，則它們實現選項卡模式中定義的鍵盤交互。

WAI-ARIA 角色，狀態和屬性
本節介紹三種輪播樣式的元素組成：

基本的：具有播放，上一張幻燈片和下一張幻燈片控件，但沒有幻燈片選擇器控件。
帶標籤的：具有基本控件和單擊tab停止的、使用tabs pattern實現的幻燈片選擇器控件。
分組的：在一組幻燈片選擇器控件中具有基本控件和一系列tab焦點，每個控件都實現按鈕模式。因爲每個幻燈片選擇器按鈕都會向頁面選項卡序列添加一個元素，所以此樣式對鍵盤用戶來說是最不友好的。

基本輪播圖元素

包含輪播圖的所有組件的輪播圖容器元素，包括輪播圖控件和幻燈片，具有角色region或角色group。輪播容器最合適的角色取決於頁面的信息結構。查看landmark regions guidance，以確定輪播圖是否被指定爲標識區域。
輪播容器將aria-roledescription屬性設置爲carousel。
如果輪播具有可見標籤，則其可訪問標籤由設置爲包含可見標籤的元素的ID的輪播容器上的屬性aria-labelledby提供。否則，可在輪播容器上設置的屬性aria-label提供可訪問的標籤。請注意，由於aria-roledescription設置爲“carousel”，因此標籤不包含單詞“carousel”。
播放控件，下一個幻燈片控件和上一個幻燈片控件是原生按鈕元素（推薦）或實現按鈕模式。
播放控件具有由其內部文本或aria-label提供的可訪問標籤。標籤改變以匹配按鈕將執行的動作，例如“停止滑動播放”或“開始滑動播放”。激活按鈕時更改的標籤清楚地表明幻燈片內容可以自動更改以及何時更改。注意，由於標籤改變，播放控制沒有指定任何狀態，例如，aria-pressed。
每個幻燈片容器都具有角色group，其屬性aria-roledescription設置爲slide。
每張幻燈片都有一個名稱：
- 如果幻燈片具有可見標籤，則其可訪問標籤由幻燈片容器上的屬性aria-labelledby提供，該容器設置爲包含可見標籤的元素的ID。
- 否則，幻燈片容器上的屬性aria-label提供了可訪問的標籤。
- 如果識別幻燈片內容的唯一名稱不可用，則數字和集合大小可以用作有意義的替代，例如，“3 of 10”。注意：通常情況下，包含可訪問名稱中的設置位置和大小信息是不合適的。異常在此實現中很有用，因爲組元素不支持aria-setsize或aria-posinset。選項卡式輪播實現模式沒有此限制。
- 請注意，由於aria-roledescription設置爲“slide”，因此標籤不包含單詞“slide”。
(可選)，包含該組幻燈片元素的元素將aria-atomic設置爲false，將aria-live設置爲：
-off：如果轉盤自動播放。
-polite：如果輪播圖不自動播放。

帶標籤的輪播元素
帶標籤的轉盤的結構與基本的轉盤相同，不同之處在於：

每個幻燈片容器都有角色tabpanel代替group，並且它沒有aria-roledescription屬性。
它具有使用選項卡模式實現的幻燈片選擇器控件，其中：
- 每個控件都是一個tab元素，因此激活選項卡會顯示與該選項卡關聯的幻燈片。
- 每個標籤的可訪問名稱通過包括幻燈片的名稱或編號來指示它將顯示哪個幻燈片，例如“幻燈片3”。如果每張幻燈片都有唯一名稱
- 則最好使用幻燈片名稱控件集分組在tablist元素中，其中可訪問的名稱由aria-label的值提供，用於標識選項卡的用途，例如“選擇要顯示的幻燈片”。
- tab，tablist和tabpanel實現選項卡模式中指定的屬性。

分組的輪播元素
分組輪播具有與基本輪播相同的結構，但它還包括滑動選擇器控件，其中：

幻燈片選擇器控件集包含在具有角色group的元素中。
包含選取器控件的組具有可訪問標籤，該標籤由aria-label的值提供，用於標識控件的用途，例如“選擇要顯示的幻燈片”。每個選取器控件都是本機按鈕元素（推薦）或實現按鈕模式。
每個選取器按鈕的可訪問名稱與其顯示的幻燈片的名稱相匹配。實現此目的的一種技術是將aria-labelledby設置爲引用幻燈片組group素的值。
表示當前顯示的幻燈片的選擇器按鈕將屬性aria-disabled設置爲true。注意：aria-disabled優先於HTMLdisabled屬性，因爲這是屏幕閱讀器用戶受益於頁面Tab序列中包含的禁用按鈕的情況。

菜單、菜單欄 menu & mennu bar

menu 是一個組件，爲用戶提供一個選擇列表，例如一組操作或功能。菜單一般通過激活 menu button 打開或變爲可見，選擇菜單中一個會打開子菜單的項目，或激活一個命令，例如Windows中的 Shift + F10 ，來打開上下文的特定菜單。當用戶激活菜單中的選項時，菜單通常會關閉，除非是打開子菜單。

持續可見的菜單是 menubar。菜單欄通常是水平的，通常用以創建類似很多桌面應用中窗口頂部附近的菜單欄，讓用戶快速訪問一組連續的命令。

標識菜單項目會喚起一個對話框的常規做法是在菜單標籤後面添加"…"（省略號），例如"另存爲 …"。

示例

Navigation Menubar Example：演示提供站點導航的菜單欄。 Editor Menubar Example：在爲文本域提供文本格式化命令的菜單欄中的子菜單上演示單選和多選菜單。

鍵盤交互

以下爲鍵盤行爲的假定描述：

一個水平 menubar 包含數個 menuitem 元素。
menubar 中的所有項目都有子菜單，所有子菜單都有很多垂直排列的項目。
一些子菜單中的 menuitem 也有垂直排列的子菜單。

閱讀以下內容時，請記住：

可聚焦元素，可能具有 menuitem, menuitemradio , 或 menuitemcheckbox,角色，被成爲是菜單項目。
如果行爲僅適用於某些類型的項目，例如menuitem 元素，則使用特定的角色名稱。
子菜單，也稱爲彈出菜單，是具有 menu 角色的元素。
除了需要注意的情況外，通過menubutton打開的菜單與從菜單欄打開的菜單表現一致。

當 menu 打開，或者當 menubar 接收焦點時，鍵盤焦點設置在第一個項目上。所有項目都是可聚焦的，如 Keyboard Navigation Inside Components。
Enter: 當焦點位於一個具有子菜單的 menuitem 上時，打開子菜單並將焦點放在其子菜單的第一個項目上。 - 否則，激活該項目並關閉菜單。
Space:
- （可選）：當焦點在一個menuitemcheckbox時，更改狀態而不關閉菜單。
- （可選）：當焦點位於未選中的menuitemradio上時，不會關閉菜單，選中聚焦的 menuitemradio，並取消選中同一組中的任何其他已選中的 menuitemradio 元素。
- （可選）：當焦點位於一個具有子菜單的menuitem上時，打開子菜單並將焦點放在其子菜單的第一個項目上。
- （可選）：當焦點位於一個沒有子菜單的 menuitem 元素時，激活 menuitem 並關閉菜單。
Down Arrow:
- 當焦點在 menubar 裏的一個 menuitem 時，打開它的子菜單，並將焦點放在子菜單中的第一個項目上。
- 當焦點在一個menu上，將焦點移至下一個項目，可選的，從最後一個項目返回到第一個項目。
Up Arrow:
- 當焦點在一個 menu 上時，將焦點移至上一個項目，可選的，從第一個項目移至最後一個。
- (可選)：當焦點在menuitem 中一個 menubar上時，打開其子菜單，並將焦點放置在子菜單的最後一個項目上。
Right Arrow：
- 當焦點在一個menubar上，將焦點移至下一個項目，可選的，從最後一個項目返回到第一個項目。
- 當焦點在 menu 的一個具有子菜單的 menuitem 上時，打開子菜單並將焦點放置在其第一個項目上。
- 當焦點在一個 menu 中的不具有子菜單的項目上時，執行以下3個操作：
  1. 關閉子菜單和任何父菜單。
  2. 將焦點移至 menuitem 中的下一個 menubar.
  3. （推薦）打開該menuitem 的子菜單但不用將焦點移至子菜單，或者打開該menuitem的子菜單，並將焦點放置在子菜單的第一個項目上。

請注意，如果沒有menubar，例如從一個菜單按鈕打開一個菜單，當焦點在一個沒有子菜單的項目上時， Right Arrow 不會執行任何操作。

Left Arrow：
- 當焦點在一個menubar上時，將焦點移至上一個項目，可選的，從第一個項目移至最後一個。
- 當焦點在菜單中一個項目的子菜單時，關閉子菜單並將焦點返回給父級menuitem。
- 焦點在 menubar 欄中的一個項目的子菜單時，執行以下3個操作：
  1. 關閉子菜單。
  2. 把焦點移至menuitem中的前一個menubar.
  3. （推薦）打開該menuitem的子菜單但不用將焦點移至子菜單，或者打開該menuitem的子菜單，並將焦點放置在子菜單的第一個項目上。
Home: 如果不支持光標鍵循環，則將焦點移至當前menu或`menubar 的第一個子項。
End: 如果不支持光標鍵循環，則將焦點移至當前menu 或menuba`r 的最後一個子項。
對應於可打印字符的任意鍵（可選）：將焦點移至當前菜單中標籤以可打印字符開頭的菜單項。
Escape: 關閉包含焦點的菜單並將焦點返回到元素或上下文，例如打開菜單的菜單按鈕或父級`menuitem
Tab: 將焦點移至Tab序列中的下一個元素，並且如果獲得焦點的項目不在 menubar 中，關閉其 menu 和所有打開的父級 menu 容器
Shift + Tab: 將焦點移至Tab序列中的上一個元素，並且如果獲得焦點的項目不在 menubar 中，關閉其 menu 和所有打開的父級 menu 容器。

注意

禁用的菜單項是可聚焦的，但無法激活。

菜單中的separator不可聚焦或交互。

作爲上下文操作的結果，如果一個菜單被打開或菜單欄獲得焦點， Escape 或 Enter 可能會將焦點返回到調用的上下文。例如，當在編輯文本時按下快捷鍵時，一個富文本編輯器的菜單欄可能會獲得焦點，例如alt + F10。在這種情況下，點擊Escape 或從菜單中激活一個命令可能會將焦點返回給編輯器。

儘管建議開發者不要這樣做，但還是有一些導航菜單欄的實現，其menuitem 元素既能執行功能又能打開子菜單。在這種實現中， enter 和 Space 執行導航功能，例如，加載新內容，而Down Arrow則在水平menuitem中打開與其相關聯的子菜單

當menubar中的項目垂直排列，menu容器中的項目水平排列時：

A. Down Arrow 執行 Right Arrow 如上所述的表現，反之亦然。
B. Up Arrow 執行 Left Arrow 如上所述的表現，反之亦然。

WAI-ARIA角色，狀態和屬性

菜單是呈現選項的容器。作爲菜單的元素具有menu 或 menubar 角色。
包含在菜單中的項目是包含menu或menubar的子元素，並且具有一下任意角色：
如果激活一個 menuitem 會打開一個子菜單，那麼該 menuitem 被認爲是一個父級。一個子菜單的菜單元素被它的父級 menuitem 包含或擁有。
父級menu的aria-haspopup 設置爲 true。
以下方法可被用於讓腳本能夠在菜單的項目間移動焦點，如 Keyboard Navigation Inside Components:
- 菜單容器的 `tabindex 設置爲 -1 或 0 並將 aria-activedescendant 設置爲聚焦項目的ID。
- 菜單中的每個項目的 tabindex 設置爲-1, 除了菜單欄中的第一個項目的 tabindex 設置爲 0。
當 menuitemcheckbox 或 menuitemradio 選中時， aria-checked 設置爲 true.
當菜單項目不可用時，aria-disabled 設置爲 true.
可以通過在組之間放置具有 separator 角色的元素來將菜單中的項目分成組。例如，當菜單包含一組 menuitemradio 項目時，應使用此技術。
所有 separators 應有與其方向一致的 aria-orientation 值。
如果一個菜單欄是垂直方向的，它的aria-orientation 值設爲 vertical. 菜單欄的 aria-orientation 屬性的默認值是 horizontal。
如果一個菜單是水平方向的，它的 aria-orientation 值設爲 horizontal. 。菜單欄的 aria-orientation 屬性的默認值是 vertical。

注意如果在菜單容器上設置aria-owns ，來包含不是該容器DOM子元素的元素，那麼這些元素將按照它們被引用的順序出現在讀取順序中，並且在所有DOM子元素之後。管理焦點的腳本需要確保視覺焦點順序與此輔助技術閱讀順序相匹配。

菜單按鈕 menu button

菜單按鈕是一個可以打開 menu 的 button 。它的樣式通常與典型按鈕一樣，且帶有一個向下的箭頭或三角，來提示用戶激活按鈕會展開一個菜單。

示例

導航菜單按鈕: 由HTML元素 a 創建的菜單按鈕，展開是一個表現爲鏈接的項目菜單。
使用element.focus()的操作菜單的按鈕示例: 打開菜單上的高亮選項卡的按鈕是通過HTML中的 button 元素創建的，而菜單中的焦點是通過element.focus() 進行管理的。
使用aria-activedescendant的操作菜單按鈕示例:一個打開菜單上的高亮選項卡的按鈕，通常用aria-activedescendant進行管理。
Menus & Menu Buttons - Inclusive Components

鍵盤交互

按鈕擁有焦點時:
- Enter: 打開菜單並將焦點置於第一個菜單項上。
- Space: 打開菜單並將焦點置於第一個菜單項上。
- (可選) Down Arrow: 打開菜單並將焦點置於第一個菜單項。
- (可選) Up Arrow: 打開菜單並將焦點置於最後一個菜單項。
菜單打開後需要的鍵盤交互參照 Menu or Menu bar。

WAI-ARIA角色，狀態和屬性

打開菜單的元素具有 button 角色。
具有 button 角色的元素，其 aria-haspopup 屬性爲 menu 或 true。
當菜單展開時, 有 button 角色的元素的 aria-expanded 屬性設置爲 true。當菜單收起時, 建議不設置 aria-expanded 屬性。如果當菜單收起時，設置了 aria-expanded 屬性，其值應該爲 false。
通過激活按鈕展開的包含菜單項的元素，具有 menu 角色.

-可選的，具有 button 角色的元素，其 aria-controls 屬性具有特定的值，用來指向具有 menu 角色的元素。

在 Menu or Menu bar 中介紹了菜單元素所需的附加角色，狀態和屬性。

導航 navigation

基本導航
所有導航元素都應該有一個<nav>標籤。
如果必須使用更通用的元素（如a）<div>，請添加role="navigation"到每個導航欄以明確將其標識爲輔助技術用戶的標誌性區域。
菜單應根據其個別功能進行標記。使用可以使用class="visuallyhidden">, aria-label=""或aria-labelledby=""輕鬆地向您網站上的不同菜單添加上下文。
基本導航示例

下拉導航示例

頁腳導航示例
移動導航
將<button>元素用於移動導航圖標。
如果您使用純粹裝飾的圖標，請聲明alt=""，因爲不需要其他信息。如果您使用的圖標對功能很重要，請提供其他alt="_descriptive text goes here_"信息。
當您在顯示移動圖標時添加描述性文本以便爲按鈕的用途提供更多上下文時，它對所有用戶都很有幫助。
將移動打開/關閉按鈕放在<nav>元素中，並使用它們切換導航的另一個子包裝器的狀態。這將確保屏幕閱讀器仍然可以發現導航地標，即使它處於關閉/隱藏狀態。

移動導航示例

分頁器 pagination

儘可能將分頁器放在<nav>元素中。
如果不使用<nav>元素，則需要添加role="navigation"到標記。注意：使用<nav>元素時隱含了此角色，因此同時使用這兩個元素有點多餘。
標記包括aria-label="pagination"用於描述導航類型的標記。
添加aria-current="page"到指向當前頁面的鏈接。這將告訴AT焦點鏈接指向當前頁面。
aria-disabled="true"禁用鏈接時添加到鏈接。
分頁器示例

擴展器 disclosure

擴展器是一種控制內容部分的可見性的按鈕。當隱藏受控內容時，它通常被設計爲具有向右箭頭或三角形的典型按鈕，以暗示激活按鈕將顯示其他內容。當內容可見時，箭頭或三角形通常指向下方。
示例

鍵盤交互
當擴展器控制具有焦點時：

Enter：激活擴展器控制並切換擴展器內容的可見性。
Space：激活擴展器控制並切換擴展器內容的可見性。

WAI-ARIA角色，狀態和屬性

顯示和隱藏內容的元素具有角色button。
當內容可見時，帶有角色button的元素將aria-expanded設置爲true。

隱藏內容區域時，將其設置爲false。

（可選）具有角色button的元素具有爲aria-controls指定的值，該值引用包含顯示或隱藏的所有內容的元素。

工具欄 toolbar

工具欄是一個對控件進行分組的容器，例如，按鈕、菜單按鈕、或複選框。

當一組控件在視覺上呈現爲一個組合，可以使用 toolbar 角色來告知屏幕閱讀器用戶分組的呈現和目的。組合控件到工具欄，在鍵盤交互中是一個減少Tab停留數量的有效方式。

優化工具欄小部件的優點：

實現焦點管理，這樣在Tab順序中只包含一個toolbar站點，使用光標鍵可以在toolbar的控件間移動焦點。
避免在工具欄中包含需要光標鍵操作的控件，例如文本框或單選按鈕。如果必須使用，只能包含一個這樣的控件且讓其作爲最後一個元素。
當且僅當組合中包含三個或三個以上的控件時，才能使用工具欄作爲分組元素。

鍵盤交互

當工具欄獲取焦點時，焦點被設置在第一個可用控件上。或者，如果工具欄先前已獲取過焦點，則焦點被設置在工具欄中最後一個被聚焦的元素上。（譯者注：一般情況下，屏幕閱讀器用戶會使用Tab快速瀏覽頁面上的內容，順序爲從上到下、從左到右，此時，若工具欄獲取焦點，則將焦點設置在第一個可聚焦的元素上，若使用 Shift + tab 反向瀏覽，若工具欄獲取焦點，則將焦點設置在最後一個可聚焦的元素上。）
水平工具欄(默認)：
- Left Arrow: 將焦點移至上一個控件。可選：焦點從第一個控件移至最後一個控件上。
- Right Arrow: 將焦點移至下一個控件。可選：焦點從最後一個控件移至第一個控件上。
Home _(可選)_: 將焦點移至第一個元素。
End _(可選)_: 將焦點移至最後一個元素。

注意

如果工具欄中的項目垂直排列：
1. Down Arrow 與 Right Arrow 功能一樣。
2. Up Arrow 與 Left Arrow 功能一樣。
般來說，使用鍵盤進行導航時，不可用元素不可聚焦。但是，在某些需要發現功能的場景中，如果不可用元素可聚焦，可以幫助屏幕閱讀器用戶發現這些功能的存在。相關指導信息，請參閱 Focusability of disabled controls。
在應用程序中，快速訪問工具欄非常重要，例如，從編輯器的文本區域快速訪問到編輯器的工具欄，建議使用文檔快捷鍵，從相關上下文中移動焦點到對應工具欄。

WAI-WRIA 角色、狀態和屬性

用於工具欄容器的元素設置role爲 toolbar。
如果工具欄有可視的標籤，它被工具欄元素上的 aria-labelledby 引用。否則，工具欄元素具有由 aria-label提供的標籤。
如果工具欄控件是垂直排列的，工具欄元素應該設置 aria-orientation 爲 vertical。其默認值爲 horizontal。

卡片 card

確保所有需要突出顯示的元素都有標籤焦點指示符。
您添加到網站的每個<img>都需要具有alt屬性。如果圖像用做傳達信息，請將alt設置爲該圖像的描述性替代。
如果圖像是相鄰文本的裝飾或冗餘，請設置alt =“”，這將向輔助技術用戶傳達圖像對於理解頁面不是必需的。
避免使用照片，圖像或圖標等通用字符串作爲alt值，因爲它們不會向用戶傳達有價值的內容。儘可能具有描述性。
您可以使用描述性文本添加class =“visualhidden”，以便爲按鈕或鏈接的目的提供更多上下文。

a11y-卡片示例
 Cards - Inclusive Components

窗體類控件

警告框 alert

alert 是一個呈現簡短、重要信息的元素，以一種引起用戶注意而不打斷用戶任務的方式。動態渲染的警告會被大多數屏幕閱讀器自動朗讀，在某些操作系統中，警告會觸發警告提示音。與此同時，需要注意的是屏幕閱讀器不會告知用戶在加載完成前已經存在的警告。

因爲警告是用來提供重要和潛在的時間敏感信息，而不會打擾用戶繼續工作，重要的一點是它不會影響鍵盤焦點。alert dialog 爲那些必須打斷工作流的情況設計的。

同樣重要的是，避免設計自動消失的警告。一個消失太快的警告，可能導致不符合 WCAG 2.0 success criterion 2.2.3。另一個重要的設計考慮是警告引起的終端頻率。頻繁打斷會降低視障和認知障礙用戶的可用性，這讓滿足 WCAG 2.0 success criterion 2.2.4 的需求更加困難。

示例

鍵盤交互

一個警告框（WAI-ARIA 活動區域）不需要任何鍵盤交互。

WAI-ARIA 角色，狀態和屬性

該組件的角色爲 alert。

警告和消息對話框 alert & message dialog

一個警告對話框是一個模態對話框，可中斷用戶的工作流程，以傳達一個重要的信息，並獲得響應。包含操作確認提示和錯誤消息確認。alertdialog 角色能夠讓輔助技術和瀏覽器從其他對話框中區分出警告對話框，這樣就能給予警告對話框特殊對待，例如播放一個系統警告提示音。

示例

警告模態框示例

鍵盤交互

請參閱 modal dialog pattern 鍵盤交互部分。

WAI-ARIA 角色，狀態和屬性

包含對話框所有元素的元素，包括警告信息和任何對話框按鈕，具有 alertdialog 角色。
角色設置爲 alertdialog 的元素擁有以下情況中的一種：
- 如果對話框具有一個可見標題，具有一個 aria-labelledby 索引包含具有對話框標題的元素。
- aria-label 的值，如果對話框沒有可見的標題。
角色爲 alertdialog 的元素，具有 aria-describedby 屬性來索引包含警告信息的元素。

組合框 combo box

組合框是由兩個不同元素組合而成的小部件：1）單行文本框 2）用於幫助用戶設置文本框值的關聯彈出元素。彈出窗口可以是listbox(列表框)，grid(網格)，tree(樹)或dialog(對話框)。許多實現還包括第三個可選元素 - 與文本框相鄰的圖形按鈕，指示彈出窗口的可用性。如果建議可用，則激活按鈕會顯示彈出窗口。

默認情況下隱藏彈出窗口，觸發其顯示的條件取決於其實現。一些可能的彈出顯示條件包括：

只有在文本框中鍵入了一定數量的字符並且這些字符與其中一個建議值的某些部分匹配時，纔會顯示它。
即使文本框爲空，它也會在文本框聚焦後立即顯示。
按下Down Arrow鍵或激活"顯示"按鈕時顯示，可能依賴於文本框的內容。
如果文本框的值以創建與建議值的一個或多個部分匹配的方式更改，則會顯示該值。

Combobox小部件可用於在以下兩種方案之一中設置單行文本框的值：

必須從預定義的一組允許值中選擇文本框的值，例如，位置字段必須包含有效的位置名稱。請注意，listbox(列表框)和menu button(菜單按鈕)模式在此方案中也很有用；組合框和替代模式之間的差異如下所述。
文本框可以包含任何任意值，但是向用戶建議的值是有利的，例如，搜索字段可以建議類似或先前的搜索以節省用戶時間。

建議值的性質和建議的呈現方式稱爲自動完成行爲。組合框可以有以下四種形式的自動完成：

1. **無自動完成**：觸發彈出窗口時，無論文本框中鍵入的字符如何，它包含的建議值都是相同的。例如，彈出窗口建議一組最近輸入的值，並且建議不會隨用戶鍵入而更改。通過手動選擇列出
2. **自動完成**：觸發彈出窗口時，它會顯示完成或邏輯上對應於文本框中鍵入的字符的建議值。除非用戶在彈出窗口中選擇一個值，否則用戶鍵入的字符串將成爲文本框的值。
3. **使用自動選擇列出自動完成**：觸發彈出窗口時，它會顯示完成或邏輯上對應於文本框中鍵入的字符的建議值，並且第一個建議會自動突出顯示爲已選中。除非用戶選擇不同的建議或更改文本框中的字符串，否則當組合框失去焦點時，自動選擇的建議將成爲文本框的值。
4. **具有內聯自動完成功能的列表**：這與具有一個附加功能的自動選擇列表相同。所選建議的未被用戶鍵入的部分（完成字符串）在文本框中的輸入光標後顯示爲內聯。內聯完成字符串在視覺上突出顯示並具有選定狀態。

使用任何形式的列表自動完成功能，彈出窗口可能會在用戶鍵入時顯示和消失。例如，如果用戶鍵入一個兩個字符串，觸發五個要顯示的建議，但然後鍵入形成一個沒有任何匹配建議的字符串的第三個字符，彈出窗口可能會關閉，如果存在，則內聯完成字符串消失。
構建視覺上緊湊的窗口小部件並允許用戶從一組離散值中選擇一個值時，通常listbox（列表框）或menu button(菜單按鈕)鈕更易於實現和使用。組合框的一個特徵是將其與listbox（列表框）和menu button(菜單按鈕)區分開來，組合框的值顯示在編輯字段中。
因此，組合框爲用戶提供了listbox（列表框）和menu button(菜單按鈕)都缺少的功能，即能夠選擇部分或全部值以便複製到剪貼板。區分組合框和menu button(菜單按鈕)小部件與列表框小部件的一個特徵是它們提供撤銷機制的能力。
在許多實現中，用戶可以在組合框或菜單中導航該組允許值，然後通過按下escape來決定恢復小部件在導航之前具有的值。相反，導航listbox（列表框）會立即更改其值，而escape不會提供撤消機制。

注意:
ARIA 1.1中引入了組合框以彈出網格，樹或對話框的選項。ARIA 1.1規範中所做的更改還增加了對代碼模式的支持，該代碼模式使輔助技術能夠將文本框和彈出窗口呈現爲可單獨感知的元素。ARIA 1.0和1.1模式將在以下部分中介紹。雖然一旦輔助技術支持足夠，建議使用ARIA 1.1模式，但沒有計劃棄用ARIA 1.0模式。

示例

ARIA 1.1 Combobox與列表框彈出的示例：使用列表框彈出窗口演示各種形式的自動完成行爲並使用ARIA 1.1實現模式的組合框。
ARIA 1.1 Combobox與網格彈出框架的示例：在網格中提供建議的組合框，使用戶能夠瀏覽有關每個建議的描述性信息。
具有列表和內聯自動完成功能的ARIA 1.0 Combobox：一個組合框，用於演示自動完成行爲，稱爲內聯自動完成列表，並使用ARIA 1.0實現模式。
帶有列表自動完成功能的ARIA 1.0 Combobox：一個組合框，用於演示自動完成行爲，稱爲手動選擇列表，並使用ARIA 1.0實現模式。
沒有自動完成功能的ARIA 1.0 Combobox：一個組合框，用於演示與aria-autocomplete = none相關的行爲，並使用ARIA 1.0實現模式。

鍵盤交互

Tab：文本框位於頁面Tab訪問順序中。
注意：彈出指示器圖標或按鈕（如果存在），彈出窗口和彈出後代將從頁面選項卡序列中排除。

文本框鍵盤交互
當焦點位於文本框中時：

Down Arrow：如果彈出窗口可用，請將焦點移至彈出窗口：
- 如果自動完成行爲在按下Down Arrow之前自動選擇了建議，則會根據自動選擇的建議重點關注建議。
- 否則，將重點放在彈出窗口中的第一個可聚焦元素上。
Up Arrow（可選）：如果彈出窗口可用，則將焦點放在彈出窗口中的最後一個可聚焦元素上。
Escape：如果可見，則關閉彈出窗口。（可選）清除文本框。
Enter：如果自動選擇了自動填充建議，則通過將輸入光標放在文本框中可接受值的末尾或對值執行默認操作來接受建議。例如，在消息傳遞應用程序中，默認操作可能是將接受的值添加到消息收件人列表，然後清除文本框，以便用戶可以添加另一個收件人。
可打印字符：在文本框中鍵入字符。請注意，某些實現可能會將某些字符視爲無效並阻止其輸入。
適用於設備平臺的標準單行文本編輯鍵（請參閱下面的註釋）。
Alt +Down Arrow（可選）：如果彈出窗口可用但未顯示，則顯示彈出窗口而不移動焦點。
Alt +Up Arrow（可選）：如果顯示彈出窗口：
- 1.如果彈出窗口包含焦點，則將焦點返回到文本框。
- 2.關閉彈出窗口。

注意,適用於設備平臺的標準單行文本編輯鍵：

包括輸入鍵，光標移動，選擇和文本操作。
編輯功能的標準鍵分配取決於設備操作系統。
提供文本編輯功能的最強大的方法是依賴瀏覽器，這些瀏覽器爲具有類型文本的HTML輸入和具有可疑HTML屬性的元素提供它們。
重要信息：通過捕獲用於執行它們的鍵的關鍵事件，確保JavaScript不會干擾瀏覽器提供的文本編輯功能。

列表框彈出鍵盤交互
當焦點位於列表框彈出窗口中時：

Enter：通過關閉彈出窗口並將接受的值放在文本框中，並將輸入光標放在值的末尾，接受列表框中的焦點選項。
Escape：關閉彈出窗口並將焦點返回到文本框。（可選）清除文本框的內容。
Right Arrow：將焦點返回到文本框而不關閉彈出窗口，並將輸入光標向右移動一個字符。如果輸入光標位於最右側的字符上，則光標不會移動。
Left Arrow：將焦點返回到文本框而不關閉彈出窗口，並將輸入光標向左移動一個字符。

如果輸入光標位於最左側的字符上，則光標不會移動。

任何可打印字符：將焦點返回到文本框而不關閉彈出窗口並鍵入字符。
Backspace（可選）：將焦點返回到文本框並刪除光標前的字符。
Delete（可選）：將焦點返回到文本框，如果選擇了建議，則刪除選定的狀態，並刪除內聯自動完成字符串（如果存在）。
Down Arrow：將焦點移至並選擇下一個選項。如果焦點位於最後一個選項上，則將焦點返回到文本框或不執行任何操作。
Up Arrow：將焦點移至並選擇上一個選項。如果焦點在第一個選項上，則將焦點返回到文本框或不執行任何操作。
Home（可選）：將焦點移至並選擇第一個選項或將焦點返回到文本框並將光標放在第一個字符上。
End（可選）：將焦點移動到最後一個選項或將焦點返回到文本框並將光標放在最後一個字符之後。

注意

DOM Focus在組合框文本框中維護，輔助技術焦點使用aria-activedescendant在列表框中移動，如使用aria-activedescendant管理複合材料中的焦點所述。

2.選擇跟隨列表框中的焦點；列表框一次只允許爲文本框值選擇一個建議值。

網格彈出鍵盤交互
在網格彈出窗口中，每個建議值可以由單個單元格或整行表示。請參閱下面的註釋，瞭解網格設計的這一方面如何影響鍵盤交互設計以及選擇移動以響應焦點移動的方式。

Enter：通過關閉彈出窗口並將所選值放在文本框中，並將輸入光標放在值的末尾，接受當前選擇的建議值。
Escape：關閉彈出窗口並將焦點返回到文本框。（可選）清除文本框的內容。
任何可打印字符：將焦點返回到文本框而不關閉彈出窗口並鍵入字符。
Backspace（可選）：將焦點返回到文本框並刪除光標前的字符。
Delete（可選）：將焦點返回到文本框，如果選擇了建議，則刪除選定的狀態，並刪除內聯自動完成字符串（如果存在）。
Right Arrow：將焦點向右移動一個單元格。（可選）如果焦點位於行中最右側的單元格上，焦點可能會移動到下一行中的第一個單元格。如果焦點位於網格中的最後一個單元格上，則不執行任何操作或將焦點返回到文本框。
Left Arrow：將焦點向左移動一個單元格。（可選）如果焦點位於行中最左側的單元格上，焦點可能會移動到上一行中的最後一個單元格。如果焦點位於網格中的第一個單元格上，則不執行任何操作或將焦點返回到文本框。
Down Arrow：向下移動一個單元格。如果焦點位於網格的最後一行，則不執行任何操作或將焦點返回到文本框。
Up Arrow：向上移動一個單元格。如果焦點位於網格的第一行，則不執行任何操作或將焦點返回到文本框。
Page Down（可選）：將焦點向下移動作者確定的行數，通常是滾動，以使當前可見行集中的底行成爲第一個可見行之一。如果焦點位於網格的最後一行，則焦點不會移動。
Page Up（可選）：將焦點向上移動作者確定的行數，通常是滾動，以便當前可見行集中的頂行成爲最後一個可見行之一。如果焦點位於網格的第一行，則焦點不會移動。
Home（可選）：要麼：
- 將焦點移動到包含焦點的行中的第一個單元格。或者，如果網格每行少於三個單元格或每行多個建議值，則焦點可能會移動到網格中的第一個單元格。
- 將焦點返回到文本框並將光標放在第一個字符上。
End（可選）：要麼：
- 將焦點移動到包含焦點的行中的最後一個單元格。或者，如果網格每行少於三個單元格或每行多個建議值，則焦點可能會移動到網格中的最後一個單元格。
- 將焦點返回到文本框，並將光標放在最後一個字符之後。
Control + Home（可選）：將焦點移動到第一行。
Control + End（可選）：將焦點移動到最後一行。

注意

DOM Focus在組合框文本框中維護，輔助技術焦點使用aria-activedescendant在網格內移動，如使用aria-activedescendant管理複合材料中的焦點所述。

網格一次只允許爲文本框值選擇一個建議值。

在網格彈出窗口中，每個建議值可以由單個單元格或整行表示。

這方面的設計影響焦點和選擇運動：
A.如果每個單元格包含不同的建議值：

選擇遵循焦點，以便選擇包含焦點的細胞。

水平箭頭鍵導航通常從一行包裝到另一行。

垂直箭頭鍵導航通常從一列包裝到另一列。

B.如果一行中的所有單元格都包含有關相同建議值的信息：

選擇包含焦點的行，或者當同一行中的任何單元格包含焦點時，選擇包含建議值的單元格。

水平鍵導航可以從一行換行到另一行。

垂直箭頭鍵導航不會從一列換行到另一列。

樹彈出鍵盤交互
在樹彈出窗口的一些實現中，一些或所有父節點可以用作建議類別標籤，因此可能不是可選擇的值。
請參閱下面的註釋，瞭解設計的這一方面如何影響選擇移動以響應焦點移動的方式。
當焦點位於垂直方向的樹彈出窗口時：

Enter：通過關閉彈出窗口並將所選值放在文本框中，並將輸入光標放在值的末尾，接受當前選擇的建議值。
Escape：關閉彈出窗口並將焦點返回到文本框。（可選）清除文本框的內容。
任何可打印字符：將焦點返回到文本框而不關閉彈出窗口並鍵入字符。
Right Arrow：
- 當焦點在封閉節點上時，打開節點；焦點和選擇不動。
- 當焦點位於打開的節點上時，將焦點移動到第一個子節點，如果可選，則選擇它。
- 當焦點在終端節點上時，什麼都不做。
Left Arrow：
- 當焦點在開放節點上時，關閉節點。
- 當焦點位於也是末端節點或封閉節點的子節點上時，將焦點移動到其父節點並在可選擇時選擇它。
- 當焦點位於也是末端節點或封閉節點的根節點上時，不執行任何操作。
Down Arrow：將焦點移動到可聚焦的下一個節點，而無需打開或關閉節點，如果可選，則選擇它。
Up Arrow：將焦點移動到可關注的上一個節點，而無需打開或關閉節點，如果可選，則選擇它。
Home：將焦點移動到樹中的第一個節點，而不打開或關閉節點，如果可選，則選擇它。
End：將焦點移動到樹中可聚焦的最後一個節點，而不打開節點，如果可選，則選擇它。

注意
1.DOM Focus在組合框文本框中維護，輔助技術焦點使用aria-activedescendant在樹中移動，如使用aria-activedescendant管理組合焦點所述。
2.樹只允許一次爲文本框值選擇一個建議值。
3.在樹彈出窗口中，部分或全部父節點可能不是可選值；它們可以作爲建議值的類別標籤。如果焦點移動到不是可選值的節點，則：

先前選擇的節點（如果有）保持選中狀態，直到焦點移動到可選擇的節點。

沒有選定的值。

在任何一種情況下，焦點在視覺上都與選擇不同，因此用戶可以很容易地看到是否選擇了值。

4.如果樹中的節點水平排列：
A. 向下箭頭執行右箭頭如上所述，反之亦然。
B. 向上箭頭執行爲左箭頭如上所述，反之亦然。

對話框彈出鍵盤交互
焦點在對話框彈出窗口中時：

有兩種方法可以關閉彈出窗口並將焦點返回到文本框：
- 1.在對話框中執行操作，例如激活按鈕，指定文本框的值。
- 2.取消退出對話框，例如，按Escape或激活對話框中的取消按鈕。取消將返回焦點返回到文本框而不更改文本框值或將焦點返回到文本框並清除文本框。該對話框實現了模態對話框模式中定義的鍵盤交互。

注意
與其他組合框彈出窗口不同，對話框不支持aria-activedescendant，因此DOM焦點從文本框移動到對話框中。

WAI-ARIA角色，狀態和屬性
首先列出ARIA 1.1和ARIA 1.0模式不同的角色，狀態和屬性指南。隨後的指導適用於這兩種模式。

在實現ARIA 1.1模式的組合框中：
- 用作組合框容器的元件具有角色組合框。
- 具有角色組合框的元素包含或擁有具有角色文本框或角色搜索框的文本框元素。
- 當組合框彈出窗口可見時，組合框元素包含或擁有具有角色列表框，樹，網格或對話框的元素。
- 如果組合框彈出窗口具有除列表框以外的角色，則具有角色組合框的元素將aria-haspopup設置爲與彈出窗口類型對應的值。也就是說，aria-haspopup設置爲網格，樹或對話框。
- 當組合框彈出窗口可見時，textbox元素的aria-controls設置爲引用組合框彈出元素的值。
在實現ARIA 1.0模式的組合框中：
- 用作文本框的元素具有角色組合框。
- 當組合框彈出窗口可見時，具有角色組合框的元素將aria-owns設置爲引用具有角色列表框的元素的值。
- 具有角色組合框的元素具有列表框的aria-haspopup的值。請注意，具有角色組合框的元素具有listbox的隱式aria-haspopup值。
- textbox元素的aria-multiline值爲false。請注意，aria-multiline的默認值爲false。
- 當組合框彈出窗口不可見時，具有角色組合框的元素將aria-expanded設置爲false。
- 當彈出元素可見時，aria-expanded設置爲true。請注意，具有角色組合框的元素具有aria-expanded爲false的默認值。
- 當組合框獲得焦點時，DOM焦點放在文本框元素上。
- 當聚焦列表框，網格或樹彈出窗口的後代時，DOM焦點保留在文本框上，文本框將aria-activedescendant設置爲引用彈出窗口中的焦點元素的值。
- 在具有列表框，網格或樹彈出窗口的組合框中，當建議值在視覺上指示爲當前選定的值時，包含該值的選項，gridcell，row或treeitem將aria-selected設置爲true。
- 如果組合框具有可見標籤，則具有角色組合框的元素將aria-labelled設置爲引用標記元素的值。否則，組合框元素具有由aria-label提供的標籤。
- textbox元素的aria-autocomplete設置爲與其自動完成行爲相對應的值：
- none：顯示彈出窗口時，無論文本框中鍵入的字符如何，它包含的建議值都是相同的。
- list：觸發彈出窗口時，它會顯示完成或邏輯上對應於文本框中鍵入的字符的建議值。
- both：當觸發彈出窗口時，它會顯示完成或邏輯上對應於文本框中鍵入的字符的建議值。此外，所選建議的未被用戶鍵入的部分（稱爲完成字符串）在文本框中的輸入光標後顯示爲內聯。內聯完成字符串在視覺上突出顯示並具有選定狀態。

注意

當引用用於彈出窗口的以下模式列表的角色，狀態和屬性文檔時，請記住組合框是單選小部件，其中選擇始終在彈出窗口中關注焦點。

彈出元素的角色，狀態和屬性在各自的設計模式中定義：

listbox 角色，狀態和屬性

grid 角色，狀態和屬性

tree 角色，狀態和屬性

dialog 角色，狀態和屬性

對話框(模態) dialog modal

對話框是疊加在主窗口或另一個對話框上的窗口。Window下的模態對話框是惰性的。也就是說，用戶不能與對話框之外的內容進行交互。當前活躍窗口之外的非活躍內容，一般是模糊不清或灰暗的，這樣就讓這些內容很難被辨別，並且在某些實現中，如果試圖與非活躍內容進行交互將導致對話框被關閉。

與非模態對話框類型類似，模態對話框限制了TAB順序。也就是說，Tab 和 Shift + Tab 不會把焦點移出對話框。但是，與非模態對話框不同的是，模態對話框沒有提供在不關閉當前對話框的情況下，將鍵盤焦點移出對話框窗口的方法。

alertdialog 角色是特殊情況的對話框角色，被專門設計用來將用戶的注意力轉移至簡短、重要的信息上。其用法被描述在警告對話框設置模塊。

示例

模態對話框示例

鍵盤交互

在以下的描述中，術語 tabbable element 是指 tabindex 值大於等於0的元素。注意：強烈不建議使用大於0的值。

當對話框被打開時，焦點移至對話框內的元素。請參閱下面關於初始焦點處理的註釋。
Tab:
- 將焦點移至對話框內的下一個可聚焦元素。
- 如果焦點是最後一個元素，將焦點移至對話框內的第一個可聚焦元素。
Shift + Tab:
- 將焦點移至對話框內的上一個可聚焦元素。
- 如果焦點是在第一個元素，將焦點移至對話框內的最後一個可聚焦元素。
Escape: 關閉對話框。

注意

當對話框被打開時，根據內容的性質和大小放置焦點。

在任何情況下，焦點都應該移至對話框中的一個元素上。

除非建議某個操作的情況，焦點應該被初始設置在第一個可聚焦的元素上。

如果對話框裏面的內容非常多，聚焦第一個交互元素會導致起始內容滾出視窗，建議給對話框頂部的靜態元素添加 tabindex="-1"

如果對話框內容是一個不容易逆轉的流程的最後一步，例如刪除數據或者完成資金交易，建議將焦點設置在最小的破壞性操作上，特別是撤銷比較困難或不可撤銷的操作。通常這種情況下使用警告對話框。

如果對話框內容僅包含提供額外信息或是繼續處理的交互，則建議將焦點設置爲最有可能使用的元素上，例如 "OK" 或 "Continue" 按鈕。

當一個對話框關閉時，焦點返回到喚起該對話框的元素上，除了：

喚起元素不復存在，此時，焦點被設置在邏輯工作流程中的另一個元素上。

包含以下場景的工作流程設計，可以聚焦到一個更加符合邏輯的、不同的元素。

用戶不太可能需要立即重新喚起對話框。

對話框中完成的任務與工作流程中的後續步驟直接相關。

例如，網格包含一個具有用於添加行的按鈕的相關工具條。 Add Row按鈕打開一個提示輸入行數的對話框。對話框關閉以後，焦點應該放在新增行的第一個單元格中。

強烈建議在所有對話框中的Tab序列中，包含一個具有 button 角色的可見元素來關閉對話框，例如一個關閉圖標，或者取消按鈕。

WAI-ARIA 角色，狀態和屬性

作爲對話框容器的元素具有 dialog 角色。
需要操作對話框的所有元素都是 dialog 角色元素的後代。
對話框容器元素的 aria-modal 被設置爲 true。
該對話框包括：
- aria-labelledby 屬性的值指向可見的對話框標題。
- 標籤由 aria-label 屬性指定。

-可選的，aria-describedby 屬性被設置在具有 dialog 角色的元素上，指明對話框中的哪些元素包含描述對話框的主要目的或信息的內容。指定描述元素，當對話框打開時，能夠讓屏幕閱讀器在朗讀對話框標題和初始聚焦元素的同時，朗讀該描述。

注意

通過將 aria-modal 設置爲 true，將對話框標記爲模態對話框，可以防止某些輔助技術用戶感知到對話框外的內容，如果一個對話框被標記爲模態對話框，但對其他用戶來說又不表現爲模態對話框，這些輔助技術的用戶將會得到不好的體驗。所以， 以下兩點同時出現時，標記爲模態對話框：

應用程序代碼防止所有用戶以任何方式和對話框外的元素進行交互。

視覺樣式模糊了對話框外的內容。

ARIA1.1中引入的 aria-modal 屬性替代了 aria-hidden，爲了告知輔助技術對話框的內容是不可交互的。然而，但傳統對話框的實現中，aria-hidden被用來讓對話框外的內容變得讓輔助技術用戶不可訪問，更重要的是：

在每個包含無效內容的元素上都將 aria-hidden 設置爲 true。

對話框元素不是任何 aria-hidden 爲 true 的元素的後代。

結構類控件

動態列表 feed

Feed是頁面的一部分，可在用戶滾動時自動加載新的內容部分。Feed中內容的各個部分以文章元素顯示。因此，可以將Feed視爲動態的文章列表，這些文章通常會無限滾動。

當用戶滾動（例如網格）時，最能區分饋送與支持加載數據的其他ARIA模式的特徵是饋送是結構而不是小部件。因此，具有閱讀模式的輔助技術（例如屏幕閱讀器）在與Feed內容交互時默認爲閱讀模式。但是，與大多數其他WAI-ARIA結構不同，Feed會在網頁和輔助技術之間建立互操作性合同。合同管理滾動交互，以便輔助技術用戶可以閱讀文章，按文章向前和向後跳轉，並在閱讀模式下可靠地觸發新文章加載。

例如，購物網站上的產品頁面可能具有一次顯示五個產品的相關產品部分。當用戶滾動時，請求更多產品並將其加載到DOM中。雖然靜態設計可能包含用於加載另外五個產品的下一個按鈕，但是在用戶滾動時自動加載更多數據的動態實現簡化了用戶體驗並減少了與查看前五個產品建議相關的慣性。但是，遺憾的是，當網頁基於滾動事件動態加載內容時，它可能會給輔助技術的用戶帶來可用性和互操作性困難。

通過在網頁和輔助技術之間建立以下互操作性協議，饋送模式實現可靠的輔助技術閱讀模式交互：

在Feed的上下文中，網頁代碼負責：

基於哪個文章包含DOM焦點對內容進行適當的可視滾動。
根據哪篇文章包含DOM焦點來加載或刪除Feed文章。

2.在feed上下文中，具有閱讀模式的輔助技術負責：

通過確保article元素或其後代之一具有DOM焦點來指示哪個文章包含讀取光標。
提供讀取模式鍵，將DOM焦點移動到下一篇和前一篇文章。
提供讀取模式鍵，用於將讀取光標和DOM焦點移動到結束之前和開始之前。

因此，實現饋送模式允許屏幕閱讀器在保持其讀取模式的同時可靠地讀取和觸發饋送內容的加載。
feed模式的另一個特徵是它有助於輔助技術用戶的脫脂閱讀。

網頁作者可以爲每篇文章提供可訪問的名稱和描述。通過識別提供標題和主要內容的文章內部的元素，輔助技術可以提供使用戶能夠從一篇文章跳到另一篇文章並有效地辨別哪些文章值得更多關注的功能。

示例
Feed模式的示例實現
鍵盤交互
Feed模式不基於桌面GUI小部件，因此feed角色與任何完善的鍵盤約定無關。建議支持以下或類似的界面。
當焦點位於Feed中時：

Page Down：將焦點移至下一篇文章。
Page Up：將焦點移至上一篇文章。
Control + End：在焦點後將焦點移動到第一個可聚焦元素。
Control + Home：在焦點前將焦點移動到第一個可聚焦元素。

注意

由於缺乏慣例，提供易於發現的鍵盤界面文檔尤爲重要。

在某些情況下，Feed可能包含嵌套Feed。例如，社交媒體Feed中的文章可能包含該文章的評論摘要。要導航嵌套的Feed，用戶首先將焦點移動到嵌套的Feed中。支持嵌套Feed導航的選項包括：

用戶使用Tab將焦點移動到包含文章內容的嵌套訂閱源中。如果文章包含大量鏈接，按鈕或其他小部件，這可能會很慢。

提供一個鍵，用於將焦點從包含文章中的元素移動到嵌套Feed中的第一個項目，例如Alt + Page Down。

要繼續閱讀外部Feed，Control + End會將焦點移至外部Feed中的下一篇文章。

在極少數情況下，Feed文章包含使用上述建議鍵的小部件，Feed導航鍵將操作包含的小部件，並且用戶需要將焦點移動到不使用Feed導航鍵以便導航的元素Feed。

WAI-ARIA角色，狀態和屬性

包含Feed文章集的元素具有角色Feed。
如果Feed具有可見標題，則feed元素通過引用包含標題的元素來標記aria-labelledby。否則，feed元素具有使用aria-label指定的標籤。
Feed中的每個內容單元都包含在帶有角色aritcle的元素中。Feed中的所有內容都包含在article元素中。
每個article元素都有aria-labelledby，指的是文章中可以作爲區別標籤的元素。
它是可選的，但強烈建議每個article元素通過引用文章中作爲文章主要內容的一個或多個元素來描述aria-describedby 。
每個article元素都將aria-posinset設置爲一個值，該值表示其在Feed中的位置。
每個article元素都將aria-setsize設置爲一個值，該值表示已加載的文章總數或Feed中的總數，具體取決於哪個值對用戶更有幫助。如果Feed中的總數未確定，則可以用aria-setsize值-1表示。
將article元素添加到Feed容器或從Feed容器中刪除時，如果操作需要多個DOM操作，則feed元素在更新操作期間將aria-busy設置爲true。請注意，當操作完成或某些輔助技術用戶可能無法看到更改時，將aria-busy設置爲false非常重要。

網格 grid

網格組件是一個容器，能夠讓用戶使用方向導航鍵，例如 arrow keys、 Home 和 End，來瀏覽其包含的信息和與其包含的元素進行交互。作爲提供靈活鍵盤導航的通用容器小部件，它可以滿足各種各樣的需求。它可以用於簡單的組合複選框或導航鏈接的集合，也可用於複雜的目的，例如完整功能的電子應用表格。儘管 WAI-ARIA 屬性和輔助技術使用"row" 和 "column" 的術語，描述和呈現 grid 角色元素的邏輯結構，但是在元素上使用 grid 角色，並不需要將其視覺呈現實現爲表格。

當呈現的內容是表格時，從 grid 和 table 中選擇實現模式時，考慮以下因素。

grid 是一個複合小部件，所以它：
- 始終包含多個可聚焦元素。
- 在頁面Tab序列中只有一個可聚焦元素。
- 需要作者提供 manages focus movement inside it 的代碼。
Table中的所有可聚焦元素均被包含在頁面Tab序列中。

grid 模式的使用大致可分爲兩類：展示表格信息（數據表格）和集合其他部件（佈局柵格）。儘管數據網格和佈局柵格使用相同的ARIA角色、狀態和屬性，它們內容和目的中的不同是考慮鍵盤交互設計的重要因素。爲了強調這些因素，以下兩節分別介紹了數據網格和數據柵格的鍵盤交互模式。

示例

佈局網格示例: 用於佈局窗口小部件的網格的三個示例實現，包括導航鏈接的集合，郵件收件人列表和一組搜索結果。
數據網格示例: 網格的三個示例實現，包括與呈現表格信息（如內容編輯，排序和列隱藏）相關的功能。
高級數據網格示例: 具有類似於典型電子表格的行爲和功能的網格示例，包括單元格和行選擇。

呈現表格信息的數據網格

grid 可用於顯示具有列標題，行標題或兩者均有的表格信息。如果表格信息是可編輯的或可交互的， grid 模式特別有用。例如，當數據元素是更多信息的鏈接時，不是將它們呈現在靜態表格中並在頁面tab序列中包含所有鏈接，實現 grid 模式提供給用戶更加直觀和有效的鍵盤導航方式，同時縮短了頁面的tab序列的長度。 grid 還可以提供諸如單元格內容編輯，選擇，剪切，複製和粘貼等功能。

在一個呈現表格數據的 grid 中，每一個單元格都包含一個可聚焦的元素或其單元格本身可聚焦，無論單元格內容是否可編輯或可交互。有一個例外：如果行列的表頭單元格沒有提供功能，例如排序或過濾，它們不需要可聚焦。一個原因是當用戶與 grid 交互時，屏幕閱讀器需要處於應用閱讀模式，而不是文檔閱讀模式，這非常重要。在應用閱讀模式時，屏幕閱讀器用戶只能發現可聚焦的元素和標記可聚焦元素的內容。因此，屏幕閱讀器用戶可能會在不知情的情況下忽略網格中包含的元素，當它們不可聚焦或不用於標記列或行。

數據網格鍵盤交互

以下鍵通過在網格的單元格之間移動焦點來提供網格導航。默認情況下，這些鍵盤命令在網格元素接收到焦點後默認可用。例如，用戶將焦點移動具有 Tab 的網格後。

Right Arrow: 將焦點向右移動一個單元格。如果焦點位於行中最右側的單元格，則焦點不會移動。
Left Arrow: 將焦點向左移動一個單元格。如果焦點位於行中最左側的單元格，則焦點不會移動。
Down Arrow: 將焦點往下移動一個單元格。如果焦點位於列中的底部單元格上，則焦點不會移動。
Up Arrow: 將焦點往下移動一個單元格。如果焦點位於列中的頂部單元格上，則焦點不會移動。
Page Down: 以開發者設定的行數移動焦點，一般滾動時，當前可見行集合中的最後一行會變爲第一次滾動後可見行中的一行。
Page Up: 移動焦點到開發者設定的行數，一般滾動時，當前可見行集合中的第一行會變爲滾動後可見行中的一行。
Home: 將焦點移至包含焦點所在行的第一個單元格。
End: 將焦點移至包含焦點所在行的最後一個單元格。
Control + Home: 將焦點移至第一行中的第一個單元格。
Control + End: 將焦點移至最後一行的最後一個單元格。

注意

當使用以上網格導航鍵移動焦點時，根據單元格內容，在單元格內元素或網格單元格上設置焦點。請參閱 Whether to Focus on a Cell or an Element Inside It。

當使用導航鍵在單元格間移動焦點，例如光標鍵，它們不能用於某些操作，例如操作組合框或在單元格內移動編輯光標。如果需要此功能，請參閱 Editing and Navigating Inside a Cell。

如果導航功能可以動態地向DOM添加更多的行或列，則將焦點移至網格的開頭或結尾的鍵盤事件（例如 control + End ），可將焦點移至DOM中的最後一行，而不是先前可用數據的最後一行。

如果網格支持單元格、行、列的選擇，一般使用以下的鍵實現這些功能。

Control + Space: 選擇包含焦點的列。
Shift + Space: 選擇包含焦點的行。如果網格包含帶有用於選擇行的複選框的列，則該鍵可以用作在焦點不在複選框時勾選框的快捷方式。
Control + A: 選擇所有單元格。
Shift + Right Arrow: 向右擴展選擇一個單元格。
Shift + Left Arrow: 向左擴展選擇一個單元格。
Shift + Down Arrow: 向下擴展選擇一個單元格。
Shift + Up Arrow: 向上擴展選擇一個單元格。

注意有關剪切，複製和粘貼鍵的分配，請參閱 Key Assignment Conventions for Common Functions。

組合部件的佈局柵格

grid 模式可被用於組合一組可交互元素，例如鏈接、按鈕、和複選框。由於整個網格只有一個元素包含在tab序列中，所以使用網格進行分組可以顯著減少頁面上的tab步驟。如果滾動元素列表會從一個大數據集中動態地加載更多的元素，例如在購物類網站中的推薦產品的連續列表中，該模式尤其有用。如果像這樣的列表元素都在tab序列中，鍵盤用戶會被困在列表中。如果組中的任何元素在鼠標懸停時都會出現關聯元素， grid 模式用來爲用戶界面的上下文元素提供鍵盤訪問。

與用於呈現數據的網格不同，用於佈局的 grid 不一定具有用於標記行或列的標題單元格，並且可能只包含單個行或單個列。即使有多個行和列，它也可能呈現一個獨立、邏輯上相同的元素集合。例如，消息的收件人列表可能是個網格，其每個單元格包含一個代表收件人的鏈接。網格最初可能只有一行，但是隨着收件人的添加，會變爲多行。在這樣的情況下，網格導航鍵也需要換行，以便用戶可以使用 Right Arrow 和 Down Arrow 來從列表開頭閱讀到末尾。雖然在佈局柵格中這種類型的焦點移動換行非常有用，但是如果在數據網格中使用就會讓用戶迷失方向，尤其是輔助技術的用戶。

因爲光標鍵被用來在 grid 中移動焦點，如果其包含的元素不需要光標鍵來操作， grid 將會更容器構建和使用。如果一個單元格包含類似listbox的元素，則需要額外的鍵盤命令來聚焦和激活 listbox，和恢復網格導航功能的命令。支持這個需求的方法在 Editing and Navigating Inside a Cell部分進行描述。

佈局柵格的鍵盤交互

以下鍵通過在網格的單元格之間移動焦點來提供網格導航。這些鍵盤命令在 Tab 中的元素接收焦點後默認可用。

Right Arrow: 將焦點向右移動一個單元格。可選，如果焦點位於行中最右側的單元格上，則焦點可能會移至下一行中的第一個單元格。如果焦點位於網格中的最後一個單元格上，則焦點不會移動。
Left Arrow: 將焦點向左移動一個單元格。可選，如果焦點位於行中最左側的單元格上，則焦點可能會移至上一行中的最後一個單元格。如果焦點位於網格中的第一個單元格上，則焦點不會移動。
Down Arrow: 將焦點向下移動一個單元格。可選，如果焦點位於列中的底部單元格上，則焦點可能會移至下一列的頂部單元格。如果焦點位於網格中的最後一個單元格上，則焦點不會移動。
Up Arrow: 將焦點向上移動一個單元格。可選，如果焦點位於當前列的頂部單元格上，則焦點可能會移至前一列的最後一個單元格。如果焦點位於網格的第一個單元格上，則焦點不會移動。
Page Down _(可選)_: 以開發者設定的行數向上移動焦點，一般情況下，當前可見行中的第一行會成爲滾動後可見行中的一行。
Page Up _(可選)_: 將對象移至作者確定的行數上，通常是滾動的，因此當前可見的行行中的頂行將成爲最後一個可見行之一。如果焦點位於網格的第一行，則焦點不會移動。
Home: 將焦點移至包含焦點的行中的第一個單元格。可選，如果網格具有單列或每行少於三個單元格，則焦點可以替代地移至網格中的第一單元格。
End: 將焦點移至包含焦點的行中的最後一個單元格。可選，如果網格具有單個列或每行少於三個單元格，則焦點可以替代地移至網格中的最後一個單元格。
Control + Home _(可選)_: 將焦點移至第一行中的第一個單元格。
Control + End _(可選)_: 將焦點移至最後一行的最後一個單元格。

注意

當使用以上網格鍵移動焦點時，根據單元格內容，決定焦點是否設置在單元格內的元素上或網格單元格上。請參閱 Whether to Focus on a Cell or an Element Inside It.

當使用導航鍵在單元格間移動焦點時，它們不可用於類似操作組合框或在單元格內移動輸入光標等的事情。如果需要此功能，請參閱Editing and Navigating Inside a Cell。

如果導航功能可以動態地向DOM中添加更多的行或列，則移動焦點到網格的開頭或結尾的鍵盤事件（例如 control + End ），可將焦點移至DOM中的最後一行，而不是後端數據中可用的最後一行。

爲柵格佈局提供需要單元格選擇功能，是不常見的。雖然如此，但當確實需要時，這些功能一般使用以下的鍵:

Control + Space: 選擇包含焦點的列。
Shift + Space: 選擇包含焦點的行。如果網格包含用於選擇行的複選框的列，當焦點不在複選框上時，可作爲選中複選框的快捷鍵。
Control + A: 選擇所有單元格。
Shift + Right Arrow: 向右擴展選擇一個單元格。
Shift + Left Arrow: 向左擴展選擇一個單元格。
Shift + Down Arrow: 向下擴展選擇一個單元格。
Shift + Up Arrow: 向上擴展選擇一個單元格。

注意有關剪切，複製和粘貼鍵的分配，請參閱 Key Assignment Conventions for Common Functions。

鍵盤交互 — 設置焦點和導航單元格內容

本節介紹了數據和佈局網格模式共有的鍵盤交互設計的兩個重要方面：

1、選擇單元格或單元格內元素接收焦點，來響應網格導航鍵盤按鍵事件。 2、啓用網格導航鍵，用來與單元格內元素進行交互。

是否聚焦單元格或其包含的元素

對於輔助技術用戶，導航網格時的體驗質量很大程度上取決於單元格包含的內容以及設置鍵盤焦點的位置。例如如果一個單元格包含一個按鈕，網格導航鍵在單元格上放置焦點，而不是按鈕上，屏幕閱讀器會朗讀出按鈕的標籤，但不會告知用戶存在一個按鈕。

有兩種最佳的單元格設計和聚焦行爲組合：

一個單元格包含一個組件，其操作不需要光標鍵和網格導航鍵，在該組件上設置焦點。這些小部件的示例包括鏈接，按鈕，菜單欄，切換按鈕，單選按鈕（不是單選按鈕組），開關和複選框。
一個單元格包含文本或一個單獨的圖形，網格導航鍵在單元格上設置焦點。

但是組件、文本和圖像的任意組合都可能被包含在一個單元格中，不遵循以上兩種設置和焦點移動模式的網格，會增加開發者或用戶或兩者的複雜性。下面樣例部分中包含的參考實現，給出了讓其他單元格設計儘可能可訪問的一些策略，但是使用以上兩種模式，才能獲得最大程度的無障礙體驗。

在單元格內編輯和導航

當使用導航鍵在單元格間移動焦點，它們不能用來執行像操作組合框或在單元格內移動光標的操作。用戶可能需要用於網格導航的鍵來操作單元格內的元素，如果單元格包含：

可編輯內容。
多個小部件。
在交互模式中使用光標鍵交互的組件，例如單選按鈕或滑塊。

以下爲禁用和恢復網格導航功能的慣用鍵盤操作。

Enter: 禁用網格導航以及：
- 如果單元格包含可編輯內容，將焦點放置在輸入框中，例如 textbox。如果輸入框是個單行文本框，連續按 Enter ，會重置網格導航功能，或移動焦點到附近單元格的輸入框中。
- 如果單元格包含一個或多個組件，將焦點放置在第一個組件上。
F2:
- 如果單元格包含可編輯的內容，則會將焦點放在輸入字段中，例如 textbox。隨後按下 F2 恢復網格導航功能。
- 如果單元格包含一個或多個組件，將焦點放置在第一個組件上。隨後按下 F2 恢復網格導航功能。
字母數字鍵: 如果單元格包含可編輯的內容，則會將焦點放在輸入框中，例如 textbox。

當網格導航被禁用時，導航行爲的常規更改包括：

Escape: 恢復網格導航。如果正在編輯內容，它也可能會撤消修改。
Right Arrow 或者 Down Arrow: 如果單元格包含多個小組件，將焦點移至單元格的內下一個小組件，如果焦點在最後一個組件上，可選`地，將焦點返回給第一個小組件，或者，傳遞按鍵事件到當前聚焦的組件。
Left Arrow 或者 Up Arrow: 如果單元格包含多個小組件，將焦點移至單元格的內前一個小組件，如果焦點在最後一個組件上，可選，將焦點返回給第一個小組件，或者，傳遞按鍵事件到當前聚焦的組件。
Tab: 將焦點移至網格中的下一個組件。可選，焦點可能會在一個單元格內循環，或在網格內循環。
Shift + Tab: 將焦點移至網格中的上一個組件。可選，焦點可能會在一個單元格內循環，或在網格內循環。

WAI-ARIA 角色，狀態和屬性

網格容器具有角色 grid。
每個行容器都具有 row 角色，並且是 grid 元素或 rowgroup 角色元素的後代，或被其擁有。
每個單元格是 row 元素的DOM後代，或被row元素擁有，並且具有以下角色之一：
- columnheader 如果單元格包含標題或列的標題信息。
- rowheader 如果單元格包含標題或行的標題信息。
- gridcell 如果單元格不包含列或行的標題信息。
如果在用戶界面中有一個元素是網格的標籤，在網格元素上設置 aria-labelledby 屬性，該屬性的值指向該標籤元素。否則，使用 aria-label爲網格元素指定一個標籤。
如果網格具有一個說明或描述，在網格元素上設置 aria-describedby 屬性，其值指向包含描述的元素。
如果網格提供排序功能，則在頭部單元格上爲 aria-sort 屬性設置合適的值，來對行或列進行排序，如 grid and table properties 部分所述。
如果網格支持選擇，當單元格或行被選擇時，被選擇元素的 aria-selected 設置爲 true。
如果網格提供內容編輯功能，並且包含在某些條件下禁用編輯功能的單元格，在編輯功能被禁用時，設置 aria-readonly 爲 true。如果所有單元格的編輯功能都被禁用，在網格元素上設置 aria-readonly 爲 true。不提供編輯功能的網格在任何元素上都不包含 aria-readonly 屬性。
如果存在某些行或列在DOM中被隱藏或不存在的情況，例如當滾動時自動加載數據，或者網格提供了隱藏行或列的功能，使用以下屬性，如grid and table properties 所述。
- aria-colcount 或 aria-rowcount 分別設置爲列或行的總數。
- aria-colindex 或 aria-rowindex 設置爲單元格在行或列中的位置。
如果網格包含跨多行或多列的單元格，並且如果 grid 角色未應用於HTML table 元素，則應用 aria-rowspan 或 aria-colspan，如 grid and table properties 所述。

注意

如果具有 grid 角色的元素是HTML table 元素，那麼不必爲行和單元格使用ARIA角色，因爲HTML元素暗含了ARIA語義。例如，HTMLTR 具有隱含的ARIA角色 row。一個從HTML table 構建的網格，包含跨越多行或多列的單元格，必須使用HTML rowspan 和 colspan屬性，不能使用 aria-rowspan 或 aria-colspan。

如果通過aria-owns屬性將行或列包含在網格中，它們將在網格元素的DOM後代之後呈現給輔助技術，除非DOM後代也被包含在給 aria-owns 屬性中。請參閱使用 aria-owns 進行詳細說明。

表格 table

與HTML表元素一樣，WAI-ARIA表格是一個靜態表格結構，包含一行或多行，每行包含一個或多個單元格；它不是一個交互式小部件。因此，其單元不可聚焦或可選擇。網格圖案用於製作具有表格結構的交互式窗口小部件。
但是，表通常用於呈現信息和交互式小部件的組合。由於表不是窗口小部件，因此表中包含的每個窗口小部件都是頁面選項卡序列中的單獨停靠點。如果窗口小部件的數量很大，則使用網格替換表可以顯着減少頁面選項卡序列的長度，因爲網格是可以包含其他窗口小部件的複合窗口小部件。

注意
與具有本機宿主語言等效的其他WAI-ARIA角色一樣，強烈建議作者儘可能使用本機HTML表格元素。這對角色表尤其重要，因爲它是WAI-ARIA 1.1的新功能。因此，建議使用可供目標受衆使用的每種瀏覽器和輔助技術組合徹底測試實施。

示例

table 示例：使用HTML div和span元素創建的ARIA表。
Data Tables - Inclusive Components

鍵盤交互
不適用。

WAI-ARIA角色，狀態和屬性

表容器具有角色表。
每個行容器都有角色行，它是表元素的DOM後代或者由表元素擁有的元素或具有角色行組的元素。
每個單元格都是行元素的DOM後代或由行元素擁有，並具有以下角色之一：
- 如果單元格包含列的標題或標題信息，則爲columnheader。
- 如果單元格包含行的標題或標題信息，則爲rowheader。
- 如果單元格不包含列或行標題信息,則爲cell。
如果用戶界面中有一個元素充當表的標籤，則在table元素上設置aria-labelledby，其值爲引用標籤元素。否則，使用aria-label爲表元素指定標籤。
如果表具有標題或描述，則在table元素上設置aria-describedby，其值爲引用包含描述的元素。
如果表包含可排序的列或行，則aria-sort將在有關排序列或行的標題單元格元素上設置爲適當的值，如網格和表屬性一節中所述。
如果存在某些行或列被隱藏或不存在於DOM中的情況，例如，頁面上有用於隱藏行或列的小部件，則應用以下屬性，如網格和表屬性一節中所述。
- aria-colcount或aria-rowcount分別設置爲列或行的總數。
- aria-colindex或aria-rowindex分別設置爲行或列中單元格的位置。
如果表包含跨越多行或多列的單元格，則應用aria-rowspan或aria-colspan，如網格和表格屬性中所述。

注意
如果行或單元格通過aria-owns包含在表中，則它們將在表元素的DOM後代之後呈現給輔助技術，除非DOM後代也包含在aria-owns屬性中。

選項卡 tabs

選項卡是一個內容分層模塊的集合，被稱爲選項卡面板，一次只能顯示內容的一個面板。每個選項卡面板都有相關聯選項卡元素，當被激活，顯示其相關聯面板。選項卡元素列表被排列在當前顯示面板的邊緣，大多數情況在頂部邊緣。

用於描述選項卡的術語包含：

選項卡或選項卡界面

選項卡元素組合和它們相關聯的內容面板。

選項卡列表 被包含在 tablist 元素中的選項卡元素組合。

選項卡選項卡列表中的一個元素，作爲其中一個內容面板的標籤，可以激活以顯示對應的內容面板。

內容面板包含與選項卡元素相關聯內容的元素。

當初始化一個選項卡界面，一個選項卡面板默認顯示，其相關聯選項卡元素使用樣式來標識其當前活躍。當用戶激活一個別的選項卡元素，先前顯示的內容面板被隱藏，與被激活選項卡元素相關聯的內容面板變爲可見，且選項卡元素被認爲當前“活躍”。

示例

自動激活的選項卡: 一個選項卡小組件，當接收到焦點時選項卡標籤會自動激活並顯示對應的面板。
手動激活的選項卡: 一個選項卡小組件，用戶通過點擊 Space 或者 Enter來激活一個選項卡標籤並顯示它的面板。
Tabbed Interfaces - Inclusive Components

選項卡示例

鍵盤交互

對於選項卡列表：

Tab: 當焦點進入選項卡列表，將焦點放置在當前活躍選項卡元素上。當選項卡列表包含焦點，移動焦點到當前頁面 tab 序列中的選項卡列表外的下一個元素，一般情況是內容面板的第一個可聚焦元素，或內容面板本身。
當焦點在水平選項卡列表中的一個選項卡元素上時：
- Left Arrow: 移動焦點到上一個選項卡元素；如果焦點在第一個選項卡元素上，移動焦點到最後一個選項卡元素。
- Right Arrow: 移動焦點到下一個選項卡元素。如果焦點在最後一個選項卡元素上，移動焦點到第一個選項卡元素。
當焦點在水平或垂直選項卡列表中的一個選項卡元素上時：
- Space or Enter: 如果獲取焦點的選項卡不會自動激活，則激活該選項卡元素。
- Home _(可選)_: 移動焦點到第一個選項卡元素上。
- End _(可選)_: 移動焦點到最後一個選項卡元素上。
- Shift + F10: 如果選項卡有關聯的彈出菜單，則打開菜單。
- Delete _(可選)_: 如果允許刪除操作，刪除（關閉）當前選項卡元素和其相關聯選項卡面板。如果還有任何選項卡元素，將焦點設置在已關閉選項卡元素的下一個元素上，並且激活新聚焦的選項卡元素。

注意

建議當選項卡元素接收到焦點時自動激活，只要它們相關的選項卡面板顯示時沒有明顯的延遲。這種做法需要提前加載選項卡內容面板的內容。否則，自動激活標籤會延緩焦點移動，這也會降低用戶有效瀏覽選項卡列表的效率。更多相關指導，可以閱讀 Deciding When to Make Selection Automatically Follow Focus

如果選項卡列表中的選項卡元素垂直排列：

Down Arrow 與 Right Arrow 執行一樣的操作。

Up Arrow 與 Left Arrow 執行一樣的操作。

如果選項卡列表是水平的，它不會監聽 Down Arrow 或 Up Arrow 光標鍵，即使焦點在選項卡列表內，使用這些鍵仍會提供瀏覽器的常規滾動功能。

如果您有三個以上的選項卡，請務必更新aria-posinset和aria-setsize屬性的值。

WAI-ARIA 角色，狀態和屬性

選項卡組合的容器元素具有角色 tablist。
每個選項卡元素都有 tab 角色，並且被包含在具有 tablistl 角色的元素裏。
每個選項卡擁有角色 tabpanel。
每個具有 tab 角色的元素，具有 aria-controls 屬性來索引其相關聯 tabpanel 元素。
當前活躍 tab 元素具有 aria-selected 狀態且設置爲 true ，所有其他 tab 元素爲 false。
每個具有角色 tabpanel 的元素有 aria-labelledby 屬性，來索引其相關聯 tab 元素。
如果一個 tab 元素有彈出菜單，則它的屬性 aria-haspopup 設置爲 true。
如果 tablist 元素是垂直排布，那麼它應該設置 aria-orientation 屬性值爲 vertical。tablist 元素的 aria-orientation 默認值爲horizontall。

樹 tree view

一個樹視圖呈現爲一個分層列表。層次結構中的任何項目都可能有子項，並且有子項的元素，可以展開或摺疊來顯示或隱藏子項。例如，在使用樹視圖顯示文件夾和文件的文件系統導航器中，代表文件夾的項目能夠被展開文件夾中的內容，這些內容可能是文件、文件夾，或兩者都有。

理解的樹視圖的一些術語包括：

節點在樹結構中的項目。 根結點

在樹結構根部的節點；它可以具有一個或多個子節點，但不具有父節點。

子節點

有一個父節點的節點；任意節點如果不是根節點，那它就是一個子節點。

終端節點

不具有任何子節點的節點；一個終端節點要麼是根節點要麼是子節點。

父節點

有一個或多個子節點的節點。它可以是打開的（擴展）或關閉的（摺疊）。

開節點

被展開以使其子節點可見的父節點。

閉節點

被摺疊以使其子節點不可見的父節點。

當使用鍵盤來導航一個樹結構，一個可見的鍵盤指示器告訴用戶哪個節點被聚焦。如果樹結構允許用戶一個動作只選擇一個項目，那麼它被稱爲單選擇樹（single-select tree），而且被聚焦的項目還有一個被選中的狀態。但是，在多選擇樹（multi-select trees）中，允許用戶一次性選擇多個項目，其選擇狀態與焦點無關。例如，在一個典型文件系統導航器中，用戶可以一次性地移動焦點來選擇任意數量的文件，例如複製或移動。爲已選定和具有焦點的項目提供視覺上的設計區分，這非常重要。有關詳細信息，請參閱 this description of differences between focus and selection。

示例

使用計算屬性的文件目錄樹視圖示例：一個文件選擇樹，示範瀏覽器支持基於DOM 結構自動計算的 aria-level, aria-posinset 和aria-setsize 屬性。
使用聲明屬性的文件目錄樹視圖示例: 文件選擇樹，示範如何明確地定義 aria-level, aria-posinset 和 aria-setsize 的值。
使用計算屬性的導航樹視圖示例: 一個樹結構，提供一組網頁的導航並示範瀏覽器支持基於DOM 結構自動計算的 aria-level, aria-posinset和 aria-setsize 屬性。
使用聲明屬性的導航樹視圖示例: 一個樹結構，提供一組網頁的導航並示範如何明確地定義 aria-level, aria-posinset 和 aria-setsize 的值。

鍵盤交互

對於垂直方向的樹結構：

當單選樹接收到焦點：
- 如果樹結構接收焦點之前沒有任何節點被選擇，則焦點設置在第一個節點上。
- 如果樹結構獲得焦點之前有一個節點被選擇，則焦點設置在被選擇的節點上。
當多選樹接收到焦點：
- 如果樹結構接收焦點之前沒有任何一個節點被選擇，則焦點設置在第一個節點上。
- 如果樹結構接收焦點之前有一個或多個節點被選擇，則焦點設置在第一個被選擇的節點上。
Right arrow:
- 當焦點在展開節點上，收起節點，焦點不移動。
- 當焦點在展開節點上，將焦點移動第一個可聚焦節點上。
- 當焦點在最後一個節點上，不響應事件。
Left arrow:
- 當焦點是在一個閉節點上，打開這個節點；焦點不會移動。
- 當焦點在一個同時也是終端節點或閉節點的子節點上，將焦點移至它的父節點。
- 當焦點一個是同時也是終端節點或閉節點的根節點上，什麼也不做。
Down Arrow: 不打開或關閉節點，將焦點移至下一個可聚焦的節點。
Up Arrow: 不打開或關閉節點，將焦點移至上一個可聚焦的節點。
Home: 不打開或關閉節點，將焦點移至樹結構中的第一個可聚焦的節點。
End: 不打開或關閉節點，將焦點移至樹結構的最後一個可聚焦的節點。
Enter: 激活一個節點，即執行其默認操作。對於父節點，一個可能的默認動作是打開或關閉節點。在一個選項不跟隨焦點（見下面的註釋）的單選樹，默認的操作通常是選擇焦點節點。 +建議所有的樹結構支持提前鍵入，特別是對於包含超過7個根節點的樹結構：
- 鍵入一個字符：焦點移至下一個名稱以輸入的字符開頭的節點。
- 快速連續鍵入多個字符：焦點移至下一個名稱以輸入的字符串開頭的節點。
_(可選)_: 展開與當前節點在同一層級的所有兄弟節點。
在多選樹中選擇：作者可使用以下兩種交互模式以支持多選：推薦的模式，用戶正在瀏覽列表時不要求用戶按住輔助鍵，如 Shift 或 Control ，或另一種模式，當瀏覽時要求按住輔助鍵，以避免丟失選擇狀態。
- 推薦選擇模型 - 當移動焦點時按住輔助鍵是沒有必要的：
  - Space: 切換聚焦節點的選擇狀態。
  - Shift + Down Arrow _(可選)_: 將焦點移至下一個節點，並且切換下一個節點的選擇狀態。
  - Shift + Up Arrow _(可選)_: 將焦點移至上一個節點，並且切換上一個節點的選擇狀態。
  - Shift + Space _(可選)_: 選擇從最後選擇的節點到當前節點的相鄰節點。
  - Control + Shift + Home _(可選)_: 選擇具有焦點的節點以及它到第一個節點的所有節點。
  - Control + Shift + End _(可選)_: 選擇具有焦點的節點以及它到最後一個節點的所有節點。
  - Control + A _(可選)_: 選擇在樹結構中的所有節點。根據需要，如果選擇了所有的節點，它也可以取消選擇所有節點。
- 備選選擇模型 - 移動焦點時不按住 Shift 或 Control 輔助鍵，會取消選中節點，聚焦的節點除外：
  - Shift + Down Arrow: 將焦點移至下一個節點，並且切換下一個節點的選擇狀態。
  - Shift + Up Arrow: 將焦點移至上一個節點，並且切換上一個節點的選擇狀態。
  - Control + Down Arrow: 不改變選擇狀態，將焦點移至下一個節點。
  - Control + Up Arrow: 不改變選擇狀態，將焦點移至前一個節點。
  - Control + Space: 切換聚焦節點的選擇狀態。
  - Shift + Space _(可選)_: 選擇從最近選擇的節點到當前節點的相鄰節點。
  - Control + Shift + Home _(可選)_: 選擇從焦點節點到第一個節點的所有節點。
  - Control + Shift + End _(可選)_: 選擇焦點節點到最後一個節點的所有節點。
  - Control + A _(可選)_: 選擇在樹結構中的所有節點。根據需要，如果所有的節點都被選擇了，它也可以取消選擇所有節點。

注意

DOM焦點（激活的元素）與選擇的狀態在功能上是有區別的。有關詳細信息，請參閱 this description of differences between focus and selection.。
tree 角色支持 aria-activedescendant 屬性，它提供了另一種使用鍵盤導航在 treeitem 元素間移動DOM焦點的方式。有關詳細信息，請參閱 Managing Focus in Composites Using aria-activedescendant。
在單選樹中，移動焦點可以取消選擇之前選擇的節點，並選擇新聚焦的節點。這種選擇模式被稱爲 "選擇跟隨焦點（selection follows focus）"。選擇跟隨焦點在某些情況下非常有用，在其他情況下則會嚴重降低可訪問性。有關更多的指南，請參閱 Deciding When to Make Selection Automatically Follow Focus。
如果選擇或取消選擇所有節點是一個重要的功能，實現單獨控制這些行爲，如 "全選" 和 "取消全選" 按鈕，可顯著提高可用性。
如果在一個樹結構中的節點被水平地佈置：
1. Down Arrow 的表現如上面描述的 Right Arrow 一樣，反之亦然。
2. Up Arrow 的表現如上面描述的 Left Arrow 一樣，反之亦然。

WAI-ARIA 角色，狀態和屬性

所有樹節點都包含在或被角色爲 tree 的元素所包含。
作爲樹節點的每個元素都有 treeitem 角色。
每一個根節點包含在角色爲 tree 的元素或被設置了 aria-owns 的屬性的 tree元素引用。
每個父節點包含或擁有 group 角色的元素。
每個子節點都包含在一個角色爲 group 的元素中，或者被其擁有，該元素包含在節點中，或者由作爲該子節點的父節點的節點擁有。
每個作爲父節點擁有 treeitem 的元素 aria-expanded 設置爲 false，當節點處於關閉狀態，並設置爲 true 時，該節點是在打開狀態。終端節點沒有 aria-expanded 屬性，因爲，如果他們有，他們會被輔助技術錯誤地描述爲父節點。
如果樹支持多個節點的選擇，擁有角色 tree 的元素擁有設置爲 true 值的 aria-multiselectable 屬性。否則，aria-multiselectable 要麼是設置爲 false 或使用默認值 false。
如果樹不支持多選，選中節點的 aria-selected 被設置爲 true 並且該屬性不存在於樹中的任何其它節點。
如果樹支持多種選擇：
- 所有選定的節點的 aria-selected 設置爲 true。
- 所有未選擇的節點的 aria-selected 設置爲 false。
擁有角色 tree 的元素擁有被 aria-labelledby 引用的可見標籤或擁有指定值的 aria-label 屬性。
如果由於用戶移動焦點或滾動樹結構引起的動態加載，DOM中不存在完整的可用節點集合，每個節點擁有指定值的 aria-level， aria-setsize和 aria-posinset。
如果 tree 元素是水平方向的，它的 aria-orientation 設置爲 horizontal。一個樹結構的 aria-orientation 默認值是 vertical。

注意如果 aria-owns 設置在樹容器上，以包含不是該容器DOM子元素的元素，這些元素會按它們被引用的順序出現在讀取序列中，並且在所有屬於該容器的DOM子元素之後。用於管理焦點的腳本需要確保視覺焦點與這個輔助技術讀取順序相匹配。

樹型網格 treegrid

treegrid呈現分層數據網格，該網格由可編輯或交互的表格信息組成。層次結構中的任何行都可以具有子行，並且可以展開或摺疊具有子項的行以顯示或隱藏子項。例如，在用於顯示電子郵件討論列表的消息和消息響應的treegrid中，具有響應的消息將在行中，可以展開以顯示響應消息。

在樹形網格中，行和單元格都是可聚焦的。無論單個單元格內容是可編輯的還是交互式的，每個行和單元格都包含一個可聚焦元素或者本身是可聚焦的。有一個例外：如果列標題單元格不提供排序或過濾等功能，則它們不需要是可聚焦的。對於所有單元能夠接收或包含鍵盤焦點而言重要的一個原因是，當用戶與網格交互時，屏幕閱讀器通常將處於其應用程序讀取模式，而不是其文檔讀取模式。在應用程序模式下，屏幕閱讀器用戶只能聽到可聚焦元素和標記可聚焦元素的內容。因此，屏幕閱讀器用戶可能會在不知不覺中忽略樹格中包含的元素，這些元素要麼不可聚焦，要麼不用於標記列或行。

當使用鍵盤導航樹形網格時，可視鍵盤指示器通知用戶哪個行或單元格被聚焦。如果treegrid允許用戶僅爲一個動作選擇一個項目，則它被稱爲單選樹格，而具有焦點的項目也具有選定狀態。但是，在多選樹格中，使用戶能夠爲操作選擇多個行或單元格，所選狀態與焦點無關。例如，在分層電子郵件討論網格中，用戶可以移動焦點以爲操作選擇任意數量的行，例如刪除或移動。視覺設計必須區分所選項目和具有焦點的項目。有關更多詳細信息，請參閱焦點和選擇之間差異的此描述。

示例
電子郵件收件箱treegrid示例：用於導航電子郵件收件箱的樹形網格，演示三種鍵盤導航模型 - 第一行，單元格第一，單元格。
鍵盤交互
以下鍵通過在網格的行和單元格之間移動焦點來提供treegrid導航。當網格中的元素已經獲得焦點時，例如在用戶使用Tab將焦點移動到網格之後，treegrid的實現使這些鍵命令可用。將焦點移動到網格中可能導致第一個單元格或第一個行被聚焦。焦點是轉到單元格還是行取決於作者首選項以及是否支持行焦點，因爲某些treegrids可能無法爲行提供焦點。

Enter：如果啓用了僅單元格焦點並且焦點位於具有aria-expanded屬性的第一個單元格上，則打開或關閉子行。否則，執行單元格的默認操作。

-Tab：如果包含焦點的行包含可聚焦元素（例如，輸入，按鈕，鏈接等），則將焦點移動到行中的下一個輸入。如果焦點位於行中的最後一個可聚焦元素，則將焦點從treegrid小部件移動到下一個可聚焦元素。

Right Arrow：
- 如果焦點位於摺疊的行上，則展開該行。
- 如果焦點位於展開的行上或位於沒有子行的行上，則將焦點移動到行中的第一個單元格。
- 如果焦點位於連續的最右側單元格上，則焦點不會移動。
- 如果焦點在任何其他單元格上，則將一個單元格移動到右側。
Left Arrow：如果焦點位於展開的行上，則摺疊該行。
- 如果焦點位於摺疊的行或沒有子行的行上，則焦點不會移動。
- 如果焦點位於行中的第一個單元格並且支持行焦點，則將焦點移動到該行。
- 如果焦點位於行中的第一個單元格並且不支持行焦點，則焦點不會移動。
- 如果焦點在任何其他單元格上，則將一個單元格移動到左側。
Down Arrow：
- 如果焦點在一行上，則將焦點向下移動一行。
如果焦點位於單元格上，則將焦點向下移動一個單元格。如果焦點位於列中的底部單元格，則焦點不會移動。
Up Arrow：
- 如果焦點在一行上，則將焦點向上移動一行。
- 如果焦點在一個單元格上，則向上移動一個單元格。
- 如果焦點位於列中的頂部單元格，則焦點不會移動。
Page Down：
- 如果焦點在一行上，則將焦點向下移動作者確定的行數，通常是滾動，以使當前可見行集中的底行成爲第一個可見行之一。
- 如果焦點位於單元格上，則將焦點向下移動作者確定的單元格數量，通常是滾動，以使當前可見行集中的底行成爲第一個可見行之一。
- 如果焦點位於最後一行，則焦點不會移動。

-Page Up：

如果焦點位於一行上，則將焦點向上移動作者確定的行數，通常是滾動，以便當前可見行集中的頂行成爲最後一個可見行之一。
如果焦點位於單元格上，則將焦點向上移動作者確定的單元格數量，通常是滾動，以使當前可見行集中的頂行成爲最後一個可見行之一。如果焦點位於第一行，則焦點不會移動。
Home：
- 如果焦點在單元格上，則將焦點移動到行中的第一個單元格。
- 如果焦點位於行的第一個單元格中，則焦點不會移動。
End：
- 如果焦點在單元格上，則將焦點移動到行中的最後一個單元格。
- 如果焦點位於行的最後一個單元格中，則焦點不會移動。
Control + Home：
如果焦點在一行上，則將焦點移動到第一行。
如果焦點位於單元格上，則將焦點移動到列中的第一個單元格。如果焦點位於第一行，則焦點不會移動。
Control + End：
如果焦點在一行上，則將焦點移至最後一行。
如果焦點位於單元格上，則將焦點移動到列中的最後一個單元格。如果焦點位於最後一行，則焦點不會移動。

注意

當上述treegrid導航鍵移動焦點時，焦點是設置在單元格內還是單元格上的元素上取決於單元格內容。查看是否關注單元格或其中的元素。

雖然導航鍵（例如箭頭鍵）正在將焦點從一個單元移動到另一個單元格，但它們不能用於操作組合框或在單元格內移動編輯插入符。如果需要此功能，請參閱編輯和在單元格內導航。

如果導航功能可以動態地向DOM添加更多行或列，則將焦點移動到網格的開頭或結尾的鍵事件（例如control + End）可能會將焦點移動到DOM中的最後一行而不是最後一行在後端數據中。

如果treegrid支持選擇單元格，行或列，則以下鍵通常用於這些函數。

Control + Space：
- 如果焦點在一行上，則選擇所有單元格。
- 如果焦點位於單元格上，請選擇包含焦點的列。
Shift + Space：
- 如果焦點在一行上，則選擇該行。
- 如果焦點位於單元格上，請選擇包含焦點的行。如果treegrid包含一個帶有用於選擇行的複選框的列，則此鍵可以作爲在焦點不在複選框上時檢查框的快捷方式。
Control + A：選擇所有單元格。
Shift + Right Arrow：
- 如果焦點在一行，則不會更改選擇。
- 如果焦點在一個單元格上，則選擇一個單元格向右。
Shift +Left Arow：
- 如果焦點在一行，則不會更改選擇。
- 如果焦點在一個單元格上，則選擇一個單元格向左。
Shift +Down Arrow：
- 如果焦點在一行上，則將選擇範圍擴展到下一行中的所有單元格。
- 如果焦點在單元格上，則向下選擇一個單元格。
Shift +Up Arrow：
- 如果焦點在一行上，則將選擇範圍擴展到上一行中的所有單元格。
- 如果焦點在一個單元格上，則選擇一個單元格。

注意
有關剪切，複製和粘貼鍵分配的常用功能，請參見鍵分配約定。

WAI-ARIA 角色，狀態和屬性

treegrid容器具有角色treegrid。
每個行容器都有角色行，並且是treegrid元素的DOM後代或元素擁有的元素或具有角色rowgroup的元素。
每個單元格都是row元素的DOM後代或由元素擁有，並具有以下角色之一：
- 如果單元格包含列的標題或標題信息，則爲columnheader。
- 如果單元格包含行的標題或標題信息，則爲rowheader。
- 如果單元格不包含列或行標題信息，則爲gridcell。
一個row可以展開或摺疊，以顯示或隱藏一組子行是父行。每個父元素都在元素或包含在元素中的單元格上設置row了aria擴展狀態。將狀態設置爲當子行不顯示，而且設置爲顯示子行的時候。不控制子行顯示的行沒有該屬性，因爲如果它們具有該屬性，則它們將被錯誤地描述爲輔助技術作爲父行。 row`rowaria-expandedfalsetruearia-expanded`
如果treegrid支持選擇多個行或單元格，則它是一個多選擇的樹網格，具有角色的元素treegrid將aria-multiselectable設置爲true。否則，它是單選樹格，並且aria-multiselectable設置爲false或默認值爲false隱含值。
如果treegrid是單選樹格，則在所選行或單元格上將aria-selected設置爲true，並且它不存在於treegrid中的任何其他行或單元格上。
如果treegrid是多選樹格：
- 所有被選中的行或單元格有唱段選擇設置爲true。
- 未選擇的所有行和細胞有唱段選擇設置爲false。
如果用戶界面中有一個元素充當treegrid的標籤，則在grid元素上設置aria- labelledby，其值爲引用標籤元素。否則，使用aria-label爲grid元素指定標籤。
如果treegrid具有標題或描述，則在網格元素上設置aria-describedby，其值爲引用包含描述的元素。
如果treegrid提供排序函數，則aria-sort將在有關排序列或行的標題單元格元素上設置爲適當的值，如網格和表屬性一節中所述。
如果treegrid提供內容編輯功能幷包含可能在某些條件下禁用編輯功能的單元格，則aria-readonly將設置true爲禁用編輯的單元格。如果對所有單元格禁用編輯功能，則可以在元素上設置aria-readonly爲true不對每個單元格aria-readonly設置爲trueon treegrid。不提供單元格內容編輯功能的Treegrids不包含aria-readonly任何元素的屬性。
如果存在某些行或列被隱藏或不存在於DOM中的情況，例如，在滾動時動態加載數據或網格提供隱藏行或列的函數，則應用以下屬性，如網格和表屬性。
- aria-colcount或aria-rowcount分別設置爲列或行的總數。
- aria-colindex或aria-rowindex分別設置爲行或列中單元格的位置。
如果treegrid包含跨多行或多列的單元格，並且該treegrid角色未應用於HTML table元素，則應用aria-rowspan或aria-colspan，如網格和表格屬性中所述。

窗口拆分 window splitter

窗口分割器是窗口的兩個部分或窗格之間的可移動分隔符，其允許用戶改變窗格的相對大小。Window Splitter可以是可變的也可以是固定的。固定分離器在兩個位置之間切換，而可變分離器可以調整到允許範圍內的任何位置。

窗口拆分器的值表示其中一個窗格的大小，在此模式中，窗格稱爲主窗格。當拆分器具有其最小值時，主窗格具有其最小尺寸，並且輔助窗格具有其最大尺寸。拆分器還具有與主窗格名稱匹配的可訪問名稱。

例如，考慮具有用於目錄的主窗格的書籍閱讀應用程序和用於顯示書籍的一部分的內容的輔助窗格。兩個窗格被標記爲“目錄”的垂直分割器分開。當目錄窗格具有其最大大小時，拆分器的值爲100，當內容表完全摺疊時，拆分器的值爲0。

請注意，術語“主窗格”未描述窗格內的內容的重要性或目的。

鍵盤交互

Left Arrow：將垂直分割器向左移動。
Right Arrow：將垂直分割器向右移動。
Up Arrow：向上移動水平分割器。
Down Arrow：向下移動水平分割器。
Enter：如果主窗格未摺疊，則摺疊窗格。如果窗格已摺疊，請將拆分器恢復到先前的位置。
Home（可選）：將拆分器移動到爲主窗格提供允許的最小大小的位置。這可能會完全摺疊主窗格。
End（可選）：將拆分器移動到爲主窗格提供最大允許大小的位置。這可能會完全摺疊輔助窗格。
F6 （可選）：在窗格中循環。

注意
固定大小的分離器省略了箭頭鍵的實現。

WAI-ARIA角色，狀態和屬性

用作可聚焦分離器的元素具有角色分離器。
separator元素的aria-valuenow屬性設置爲表示分隔符當前位置的十進制值。
separator元素的aria-valuemin屬性設置爲十進制值，表示主窗格的最小大小。這通常是0。
separator元素的aria-valuemax屬性設置爲十進制值，表示主窗格具有其最大大小的位置。這通常是100。
如果主窗格具有可見標籤，則它將由分隔符元素上的aria-labelledby引用。否則，分隔符元素具有由aria-label提供的標籤。
separator元素具有引用主窗格的aria-controls。

總結

參考資料

包容性設計(inclusive design)和通用設計(universal design)的區別是什麼？-知乎

我國網站信息無障礙技術標準現狀與發展-《信息化研究》

無障礙設計 - ANN 的設計筆記

WAI-ARIA無障礙網頁應用屬性完全展示 - 張鑫旭

What You’re Getting Wrong About Inclusive Design-Kat Holmes

5 Digital Accessibility Myths Busted - Carie Fisher

Accessibility First: Rethinking the Way We Approach Website Design and Development - Carie Fisher

Designing Accessible Content: Typography, Font Styling, and Structure- Carie Fisher

Checklist of Federal and State Requirements for Developing an Accessible Website in Washington- Jeff Jimerson

How to Boost Your Website’s Accessibility + SEO

pointnorth.io

WAI-ARIA Authoring Practices 1.1

Deque's Accessibility Heuristics

a11y style guide

The Accessibility of Styled Form Controls

a list apart - accessibility

the paciello group

WEB組件包容性設計手冊

前言

面向用戶設計

WEB中的無障礙訪問

可訪問性反模式與誤區

暗黑模式

迷之信噪比

過時的UX模式

可訪問性的誤區

關於我國網站信息無障礙的社會需求

關於可訪問性組織與規範

WEB包容性設計要素

信息結構與內容

使文字可讀

適當使用顏色

夜間模式

避免負面的身體反應（癲癇發作）

WEB語義可訪問性（ARIA）

多狀態設計

鍵盤訪問

測試驅動開發

可訪問性與SEO

WAI-ARIA

概念

角色模型

區域標識角色 (Landmark Roles) 實踐

banner

complementary

contentinfo

form

main

navigation

region

search

狀態和屬性

基礎控件

按鈕 button

鏈接 link

提示 tooltip

多媒體控件

圖片 img

音頻

視頻

表單類控件

單選按鈕組 radio group

開關 switch

搜索

複選框 checkbox

單選按鈕組

滑塊 slider

滑塊（多個觸點） sliderwothumb

數值調節按鈕 spinbutton

列表框 listbox

文字輸入框 Text Inputs & Textarea

導航類控件

手風琴 accordion

麪包屑 breadcrumb

輪播圖 carousel（slide show or image rotator）

菜單、菜單欄 menu & mennu bar

菜單按鈕 menu button

導航 navigation

分頁器 pagination

擴展器 disclosure

工具欄 toolbar

卡片 card

窗體類控件

警告框 alert

警告和消息對話框 alert & message dialog

組合框 combo box

對話框(模態) dialog modal

結構類控件

動態列表 feed

網格 grid

表格 table

選項卡 tabs

樹 tree view

樹型網格 treegrid

窗口拆分 window splitter

總結

參考資料

單選按鈕組　radio group