ARIA: application 角色
application 角色向輔助技術表明,一個元素及其所有子元素應被視為類似於桌面應用程式,不應使用傳統的 HTML 解釋技術。此角色僅應用於定義高度動態且類似桌面的 Web 應用程式。大多數移動和桌面 Web 應用程式不被視為此類應用程式。
<div role="application" aria-label="…">…</div>
透過指定 application 角色,表明此 div 元素及其所有後代元素都應被視為桌面應用程式的一部分。
描述
application 文件結構角色,向輔助技術表明 Web 內容的這部分包含不符合任何其他已知 HTML 元素或 WAI-ARIA 小部件的元素。應暫停對 HTML 結構和小部件的任何特殊解釋,並將完全控制權交給瀏覽器和 Web 應用程式來處理滑鼠、鍵盤或觸控互動。
在此模式下,Web 作者完全負責處理所有鍵盤輸入、焦點管理和其他互動,並且不能假設輔助技術會在其端進行任何處理。
如果被 application 角色包圍的 Web 應用程式包含應該被視為普通 Web 內容的部分,則應使用 document 或 article 角色來包含此類內容。
Background
出於歷史原因,尤其是在 Windows 上,螢幕閱讀器和其他一些輔助技術(AT)在內容載入完成後,傳統上會一次性捕獲瀏覽器中的整個 Web 內容。AT 會構建自己的表示形式,以便視障使用者能夠以最易於理解的方式消費內容。這通常被稱為虛擬文件、瀏覽模式或類似術語。文件被簡化為單列檢視。會生成一個鍵盤互動模型,該模型非常類似於文字處理器,使用者可以逐行、逐句或逐段閱讀。AT 會讀取任何語義,如連結、標題、表單控制元件、表格、列表或影像。
此外,多年來已建立了一套所謂的快速導航鍵,允許視障使用者透過特定元素型別來快速瀏覽頁面。這些元素通常包括標題、表單欄位、列表、表格、連結、圖形或地標區域。
為了讓這一切正常工作,AT 會攔截幾乎所有的鍵盤輸入並自行處理,不讓任何輸入傳遞給瀏覽器或其他使用者代理。為了能夠與 Web 頁面進行互動,會識別一套標準的控制元件,當按下某個鍵(通常是 Enter 鍵)時,此模式將被關閉。螢幕閱讀器模式,通常稱為表單模式或焦點模式,會讓所有鍵盤輸入再次傳遞給瀏覽器。 Escape 是切換回瀏覽模式最常見的方式,但在特定 application 部分內,某些螢幕閱讀器可能需要其他按鍵才能專門退出此模式。例如,JAWS 的 NUMPAD PLUS。
application 角色旨在為那些不屬於標準控制元件集的小部件提供一種方式,使其能夠被使用瀏覽和焦點模式與 Web 內容互動的 AT 直接訪問。大多數常用小部件都有預期的鍵盤互動行為。因此,Web 作者建立的自定義鍵盤體驗會造成令人困惑的體驗。
關聯的 WAI-ARIA 角色、狀態和屬性
document,article-
用於指示應用程式中應視為普通 Web 內容的部分
aria-activedescendant-
用於管理應用程式內部的焦點。
aria-label-
用於提供應用程式的名稱或正在暴露的小部件的用途。
aria-describedby-
用於引用包含有關導航或操作此元素的其他說明的元素的 ID。
aria-roledescription-
用於為螢幕閱讀器提供更具描述性的應用程式角色文字。此文字應本地化。
aria-disabled-
指示元素可見但已停用
aria-errormessage-
指向提供元素錯誤訊息的元素的引用
aria-expanded-
如果設定為
true,則此元素擁有或控制的分組元素已展開,如果為false,則已摺疊。 aria-haspopup-
指示存在一個可以由該元素觸發的彈出視窗,例如選單或對話方塊。
鍵盤互動
鍵盤互動完全由 Web 作者控制,並且可以是與所實現的小部件相關的任何內容。例如,在幻燈片應用程式中,可以建立一個小部件,使用箭頭鍵在幻燈片上定位元素,並透過 ARIA 即時區域提供音訊反饋,以傳達位置和與其他物件的重疊狀態。焦點透過 aria-activedescendant 進行管理。
應用程式必須處理 Tab、Space 和 Enter 鍵以及 Escape 鍵。唯一的例外是,如果焦點設定在應用程式內的標準控制元件上,該控制元件支援從瀏覽器進行的鍵盤導航,例如 input 元素。
所需的 JavaScript 功能
- keyPress
-
用於處理鍵盤輸入和控制焦點
- Click, Touch
-
也請根據您的小部件適當處理
- 更改屬性值
-
aria-activedescendant用於管理應用程式容器內的焦點。響應於改變焦點或互動點的鍵盤或其他應用程式事件而設定。
注意: application 角色沒有相關的 HTML 小部件,因此它是完全自由形式的。應用程式的作者必須承擔全部責任,確保使用者不會被困在使用者無法退出的焦點陷阱中。必須處理互動的所有方面,包括返回到頁面上其他部分的常規 Web 內容。請明智地、謹慎地使用,並記住進行測試!
示例
一些使用或曾經正確使用 application 角色的著名 Web 應用程式是
- Google Docs、Sheets 和 Slides
- CKEditor 和 TinyMCE WYSIWYG Web 編輯器,例如 Mozilla Developer Network 上使用的編輯器
- Gmail 的部分內容
可訪問性考慮
不當使用 application 角色可能會無意中剝奪使用者對網頁資訊的訪問許可權,因此在使用時請務必格外小心。請仔細考慮您是否真的需要它,而不是能否僅使用一組其他已知的小部件來完成相同的任務。
如果使用,application 角色應新增到儘可能低的公共容器上,而不是新增到 <body> 元素上,例如。此外,請務必使用輔助技術測試您編寫的內容,以驗證其是否按預期工作。
規範
| 規範 |
|---|
| 無障礙富網際網路應用程式 (WAI-ARIA) # application |
優先順序順序
應用 application 角色將導致此元素及其所有後代元素被視為應用程式內容,而不是 Web 內容。輔助技術可能擁有的任何 Web 內容閱讀機制將不適用。
另見
- 如果您使用 WAI-ARIA 角色
application,請明智地使用 - Marco Zehe 的部落格文章 - 使用 ARIA
application角色 - Léonie Watson 撰寫