FE.BASE-WEB組件包容性設計手冊

前言

包容性設計這個術語並非一個新概念。這是自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. 可訪問的網站和應用程序簡單或醜陋

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

• 24 ways
• Chase Bank
• Deque Systems
• Funka
• Indiana University
• Jiffy Lube
• National Oceanic and Atmospheric Administration (NOAA)
• The White House
• University of Washington
• U.S. WEB Design System

5. 我使用了一些自動化測試工具，所以個人網站或應用程序如今是可訪問的

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

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

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

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

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

需求

我國殘障人士數衆多，分佈廣。根據第二次全國殘疾人抽樣調查結果，目前我國有各種殘障人士共8296萬人，佔全國總人口的6.34%；

我國人口老齡化問題日趨嚴重，老齡人口比例日趨上升。我過已經步入老齡化社會，目前在我過60歲以上老年人口已經達到1.78億，並且我過人口老齡化的速度還在加快比例還在進一步擴大。國務院印發的《中國老齡事業發展」十二五「規劃》中指出，到2030年我過老年人口規模將會在目前的基礎上翻一番。

現狀

早在2014年，中國殘疾人聯合會、中央網信辦就聯合印發《關於增強網站無障礙服務能力建設的指導意見》。在此號召下，我國多個省市級政府網站前後開展了信息無障礙優化，使得面向障礙羣體的信息、辦事等業務真正惠民利民，落到實處。

2017年中國殘疾人聯合會、中國工業和信息化部共同制定下發了《關於支持視力、聽力、言語殘疾人信息消費的指導意見》。中國盲人協會、國家網信辦等政府組織也在積極推動和從事相關公共服務的行業採起信息無障礙措施，鼓勵支持相關信息無障礙產品研發、生產、推廣、應用。

2019年4月19日，信息無障礙產品聯盟（CAPA）2018年度會議暨輪值主席換屆選舉大會在北京順利召開。百度、微軟（中國）、阿里巴巴集團、中國平安、字節跳動、OPPO、滴滴出行、CSDN、信息無障礙研究會、浙江大學中國信息無障礙和技術研究院等數十家單位表明出席會議。

會議詳細內容信息無障礙產品聯盟2018年度會議暨輪值換屆選舉大會在京召開

關於可訪問性組織與規範

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的三個常見用途是：

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

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

要求全部子元素都具備訪問性的角色是：
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）調用的。

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

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

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

1. 用戶提供特定的屏幕閱讀器命令，例如擊鍵或手勢。
2. 屏幕閱讀器調用API中的方法來調用按鈕。
3. API將此交互轉發給瀏覽器。
4. 瀏覽器如何響應傳入的交互取決於上下文，但在這種狀況下，瀏覽器能夠經過WEB API將其做爲「單擊」事件引起。
5. 瀏覽器不該指示點擊來自輔助技術，由於這樣作會侵犯用戶的隱私權。
6. WEB開發人員已爲點擊註冊了一個JavaScript事件監聽器;
7. 如今執行它們的回調函數，就像用戶用鼠標單擊同樣。

瞭解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: 關閉工具提示框。

注意

1. 當工具提示組件顯示時，焦點停留在觸發元素上。
2. 若是當觸發元素得到焦點時喚起工具提示組件，當元素失去焦點時（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是一組可勾選按鈕，稱爲單選按鈕，一次只能勾選一個按鈕。一些實現能夠在勾選狀態下的全部按鈕初始化該集合，以迫使用戶在移動焦點以前勾選其中一個按鈕。
示例

• 使用Roving tabindex的radio group示例
• 使用aria-activedescendant的radio group示例
• Radio Button Star Rating
• Radio Button Pills

鍵盤交互

對於工具欄中不包含的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：

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

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

• 若是該組中的全部選項都被選中，該三態複選框呈現的總體狀態爲選中。
• 若是該組中的部分選項被選中，該三態複選框呈現的總體狀態爲部分選中（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。

示例

• 單選按鈕組示例使用動態tabindex
• 單選按鈕組示例使用aria-activedescendant管理焦點
• a11y- 單選按鈕示例

鍵盤交互

• 在單選按鈕組獲取焦點時:

  • 若是有一個單選按鈕被選中，那麼焦點設置在這個按鈕上。
  • 若是沒有被選中的單選按鈕，那麼將焦點設置在第一個單選按鈕上。
• 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 減少的值大）。

注意

1. 焦點放在滑塊上(鼠標用戶能夠移動的視覺對象，也稱爲thumb組件)。
2. 在某些場景下，反轉上面指定值變化的方向(例如： 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'。 任何其餘字符輸入不會更改文本字段的內容和按鈕的值。

注意

1. 操做過程當中焦點仍在文本字段上。

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

   1. 包括輸入鍵，光標移動，選擇和文本操做。
   2. 用於編輯功能的標準鍵分配依賴於操做系統。
   3. 提供文本編輯功能的最強大的方法須要依靠瀏覽器，瀏覽器爲HTML文本輸入類型的組件和具備 contenteditable HTML屬性的元素支持文本編輯功能。
   4. 重要: 確保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 _(可選)_: 選擇列表中的全部選項。或者，若是選擇了全部選項，它也可能取消選擇全部選項。

注意

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

5. 若是在一個列表框的選項水平排列：

   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元素表示。

• 若是輪播圖能夠自動播放，它還：

  • 有一箇中止和從新播放的按鈕。這對於支持在不移動鍵盤焦點或鼠標的模式下操做的輔助技術尤其重要。
  • 當鍵盤焦點進入輪播圖時中止播放。除非用戶明確要求它這樣作，不然它不會從新播放。
  • 只要鼠標懸停在輪播圖上，就中止播放。

示例

• 自動播放輪播圖示例
• A Content Slider

術語

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

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：演示提供站點導航的菜單欄。
• sEditor Menubar Example：在爲文本域提供文本格式化命令的菜單欄中的子菜單上演示單選和多選菜單。

鍵盤交互

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

1. 一個水平 menubar 包含數個 menuitem 元素。
2. menubar 中的全部項目都有子菜單，全部子菜單都有不少垂直排列的項目。
3. 一些子菜單中的 menuitem 也有垂直排列的子菜單。

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

1. 可聚焦元素，可能具備 menuitem, menuitemradio , 或 menuitemcheckbox,角色，被成爲是菜單項目。
2. 若是行爲僅適用於某些類型的項目，例如menuitem 元素，則使用特定的角色名稱。
3. 子菜單，也稱爲彈出菜單，是具備 menu 角色的元素。
4. 除了須要注意的狀況外，經過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 容器 。

注意

1. 禁用的菜單項是可聚焦的，但沒法激活。
2. 菜單中的separator不可聚焦或交互。
3. 做爲上下文操做的結果，若是一個菜單被打開或菜單欄得到焦點， Escape 或 Enter 可能會將焦點返回到調用的上下文。例如，當在編輯文本時按下快捷鍵時，一個富文本編輯器的菜單欄可能會得到焦點，例如alt + F10。在這種狀況下，點擊Escape 或從菜單中激活一個命令可能會將焦點返回給編輯器。
4. 儘管建議開發者不要這樣作，但仍是有一些導航菜單欄的實現，其menuitem 元素既能執行功能又能打開子菜單。在這種實現中， enter 和 Space 執行導航功能，例如，加載新內容，而Down Arrow則在水平menuitem中打開與其相關聯的子菜單
5. 當menubar中的項目垂直排列，menu容器中的項目水平排列時：

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

WAI-ARIA角色，狀態和屬性

• 菜單是呈現選項的容器。做爲菜單的元素具備menu 或 menubar 角色。

• 包含在菜單中的項目是包含menu或menubar的子元素，而且具備一下任意角色：

  • menuitem
  • menuitemcheckbox
  • menuitemradio
• 若是激活一個 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停留數量的有效方式。

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

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

鍵盤交互

• 當工具欄獲取焦點時，焦點被設置在第一個可用控件上。或者，若是工具欄先前已獲取過焦點，則焦點被設置在工具欄中最後一個被聚焦的元素上。（譯者注：通常狀況下，屏幕閱讀器用戶會使用Tab快速瀏覽頁面上的內容，順序爲從上到下、從左到右，此時，若工具欄獲取焦點，則將焦點設置在第一個可聚焦的元素上，若使用 Shift + tab 反向瀏覽，若工具欄獲取焦點，則將焦點設置在最後一個可聚焦的元素上。）

• 水平工具欄(默認)：

  • Left Arrow: 將焦點移至上一個控件。可選：焦點從第一個控件移至最後一個控件上。
  • Right Arrow: 將焦點移至下一個控件。可選：焦點從最後一個控件移至第一個控件上。
• Home _(可選)_: 將焦點移至第一個元素。
• End _(可選)_: 將焦點移至最後一個元素。

注意

1. 若是工具欄中的項目垂直排列：

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

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 的需求更加困難。

示例

• 警告框示例
• Notifications - Inclusive Components

鍵盤交互

一個警告框（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小部件可用於在如下兩種方案之一中設置單行文本框的值：

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

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

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.關閉彈出窗口。

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

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

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

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

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

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

注意

1. 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（可選）：將焦點移動到最後一行。

注意

1. DOM Focus在組合框文本框中維護，輔助技術焦點使用aria-activedescendant在網格內移動，如使用aria-activedescendant管理複合材料中的焦點所述。
2. 網格一次只容許爲文本框值選擇一個建議值。
3. 在網格彈出窗口中，每一個建議值能夠由單個單元格或整行表示。

這方面的設計影響焦點和選擇運動：
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：當觸發彈出窗口時，它會顯示完成或邏輯上對應於文本框中鍵入的字符的建議值。此外，所選建議的未被用戶鍵入的部分（稱爲完成字符串）在文本框中的輸入光標後顯示爲內聯。內聯完成字符串在視覺上突出顯示並具備選定狀態。

注意

1. 當引用用於彈出窗口的如下模式列表的角色，狀態和屬性文檔時，請記住組合框是單​​選小部件，其中選擇始終在彈出窗口中關注焦點。
2. 彈出元素的角色，狀態和屬性在各自的設計模式中定義：

• listbox 角色，狀態和屬性
• grid 角色，狀態和屬性
• tree 角色，狀態和屬性
• dialog 角色，狀態和屬性

<span id="dialog_modal"></span>

對話框(模態) dialog modal

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

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

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

示例

模態對話框示例

鍵盤交互

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

• 當對話框被打開時，焦點移至對話框內的元素。請參閱下面關於初始焦點處理的註釋。

• Tab:

  • 將焦點移至對話框內的下一個可聚焦元素。
  • 若是焦點是最後一個元素，將焦點移至對話框內的第一個可聚焦元素。

• Shift + Tab:

  • 將焦點移至對話框內的上一個可聚焦元素。
  • 若是焦點是在第一個元素，將焦點移至對話框內的最後一個可聚焦元素。
• Escape: 關閉對話框。

注意

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

   • 在任何狀況下，焦點都應該移至對話框中的一個元素上。
   • 除非建議某個操做的狀況，焦點應該被初始設置在第一個可聚焦的元素上。
   • 若是對話框裏面的內容很是多，聚焦第一個交互元素會致使起始內容滾出視窗，建議給對話框頂部的靜態元素添加 tabindex="-1"
   • 若是對話框內容是一個不容易逆轉的流程的最後一步，例如刪除數據或者完成資金交易，建議將焦點設置在最小的破壞性操做上，特別是撤銷比較困難或不可撤銷的操做。一般這種狀況下使用 警告對話框。
   • 若是對話框內容僅包含提供額外信息或是繼續處理的交互，則建議將焦點設置爲最有可能使用的元素上，例如 "OK" 或 "Continue" 按鈕。

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

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

   • 包含如下場景的工做流程設計，能夠聚焦到一個更加符合邏輯的、不一樣的元素。

     1. 用戶不太可能須要當即從新喚起對話框。
     2. 對話框中完成的任務與工做流程中的後續步驟直接相關。

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

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

WAI-ARIA 角色，狀態和屬性

• 做爲對話框容器的元素具備 dialog 角色。
• 須要操做對話框的全部元素都是 dialog 角色元素的後代。
• 對話框容器元素的 aria-modal 被設置爲 true。

• 該對話框包括：

  • aria-labelledby 屬性的值指向可見的對話框標題。
  • 標籤由 aria-label 屬性指定。

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

注意

• 經過將 aria-modal 設置爲 true，將對話框標記爲模態對話框，能夠防止某些輔助技術用戶感知到對話框外的內容，若是一個對話框被標記爲模態對話框，但對其餘用戶來講又不表現爲模態對話框，這些輔助技術的用戶將會獲得很差的體驗。因此， 如下兩點同時出現時，標記爲模態對話框：

  1. 應用程序代碼防止全部用戶以任何方式和對話框外的元素進行交互。
  2. 視覺樣式模糊了對話框外的內容。

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

  1. 在每一個包含無效內容的元素上都將 aria-hidden 設置爲 true。
  2. 對話框元素不是任何 aria-hidden 爲 true 的元素的後代。

結構類控件

動態列表 feed

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

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

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

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

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

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

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

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

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

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

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

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

注意

1. 因爲缺少慣例，提供易於發現的鍵盤界面文檔尤其重要。

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

   • 用戶使用Tab將焦點移動到包含文章內容的嵌套訂閱源中。若是文章包含大量連接，按鈕或其餘小部件，這可能會很慢。
   • 提供一個鍵，用於將焦點從包含文章中的元素移動到嵌套Feed中的第一個項目，例如Alt + Page Down。
   • 要繼續閱讀外部Feed，Control + End會將焦點移至外部Feed中的下一篇文章。
3. 在極少數狀況下，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. 一個單元格包含文本或一個單獨的圖形，網格導航鍵在單元格上設置焦點。

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

在單元格內編輯和導航

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

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

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

• 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
• a11y-選項卡示例

鍵盤交互

對於選項卡列表：

• Tab: 當焦點進入選項卡列表，將焦點放置在當前活躍 選項卡 元素上。當選項卡列表包含焦點，移動焦點到當前頁面 tab 序列中的選項卡列表外的下一個元素，通常狀況是內容面板的第一個可聚焦元素，或內容面板自己。

• 當焦點在水平選項卡列表中的一個選項卡元素上時：

  • Left Arrow: 移動焦點到上一個選項卡元素；若是焦點在第一個選項卡元素上，移動焦點到最後一個選項卡元素。
  • Right Arrow: 移動焦點到下一個選項卡元素。若是焦點在最後一個選項卡元素上，移動焦點到第一個選項卡元素。

• 當焦點在水平或垂直選項卡列表中的一個選項卡元素上時：

  • Space or Enter: 若是獲取焦點的選項卡不會自動激活，則激活該選項卡元素。
  • Home _(可選)_: 移動焦點到第一個選項卡元素上。
  • End _(可選)_: 移動焦點到最後一個選項卡元素上。
  • Shift + F10: 若是選項卡有關聯的彈出菜單，則打開菜單。
  • Delete _(可選)_: 若是容許刪除操做，刪除（關閉）當前選項卡元素和其相關聯選項卡面板。若是還有任何選項卡元素，將焦點設置在已關閉選項卡元素的下一個元素上，而且激活新聚焦的選項卡元素。

注意

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

2. 若是選項卡列表中的選項卡元素垂直排列：

   1. Down Arrow 與 Right Arrow 執行同樣的操做。
   2. Up Arrow 與 Left Arrow 執行同樣的操做。
3. 若是選項卡列表是水平的，它不會監聽 Down Arrow 或 Up Arrow 光標鍵，即便焦點在選項卡列表內，使用這些鍵仍會提供瀏覽器的常規滾動功能。
4. 若是您有三個以上的選項卡，請務必更新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 _(可選)_: 選擇在樹結構中的全部節點。根據須要，若是全部的節點都被選擇了，它也能夠取消選擇全部節點。

注意

1. DOM焦點（激活的元素）與選擇的狀態在功能上是有區別的。有關詳細信息，請參閱 this description of differences between focus and selection.。
2. tree 角色支持 aria-activedescendant 屬性，它提供了另外一種使用鍵盤導航在 treeitem 元素間移動DOM焦點的方式。有關詳細信息，請參閱 Managing Focus in Composites Using aria-activedescendant。
3. 在單選樹中，移動焦點能夠取消選擇以前選擇的節點，並選擇新聚焦的節點。這種選擇模式被稱爲 "選擇跟隨焦點（selection follows focus）"。選擇跟隨焦點在某些狀況下很是有用，在其餘狀況下則會嚴重下降可訪問性。有關更多的指南，請參閱 Deciding When to Make Selection Automatically Follow Focus。
4. 若是選擇或取消選擇全部節點是一個重要的功能，實現單獨控制這些行爲，如 "全選" 和 "取消全選" 按鈕，可顯著提升可用性。

5. 若是在一個樹結構中的節點被水平地佈置：

   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

---

更多資料

aria解析-google developers

• Parctical ARIA Examples - heydonworks
• 高效設計UI 狀態、以及無痛與工程師溝通的FSM 表格
• 更好的網頁開發流程：學會運用Confluence, Airtable, Jira 與 Abstract
• 包容性web設計
• WEB應用程序通用設計
• 兼濟天下·用戶無障礙體驗的可訪問性設計