旋轉木馬的 WAI-ARIA 角色（又名滑塊、幻燈片、畫廊）

Question

輪播應該使用哪些WAI-ARIA 角色，如下所示？

筆記：

• 我熟悉滑塊角色，但這指的是不同類型的小部件。
• 該示例來自USA.gov ，我在使用中看到的與輪播相關的唯一 aria 角色是各個幻燈片上的aria-live 。

Answer 1

正如您所說的那樣， role=slider不適合輪播。 您應該使用的是role=listbox

引用自 MDN（見下面的鏈接）：

listbox 角色用於標識創建列表的元素，用戶可以從中選擇一個或多個靜態項目，並且與 HTML 元素不同，它可能包含圖像。

有關您應該使用的其他 ARIA 角色的更多信息，請參閱https://developer.mozilla.org/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role ，例如列表框中每個條目的role=option 。

您還可以查看此 YUI 插件（不推薦使用 YUI 2，但文檔對於您的問題仍然有效） http://yui.github.io/yui2/docs/yui_2.9.0_full/examples/carousel /carousel-ariaplugin.html

通過 javascript 將 aria 角色添加到現有輪播中。 我不建議使用它，但您當然可以推斷它的作用並根據需要在標記中復制它。

Answer 2

下面是一個使用 jQuery UI 的可訪問輪播示例： http : //hanshillen.github.io/jqtest/#goto_carousel

控制欄是一個圖像列表，用<ul role="listbox">標記。 每個<li>都有role="option" 、 tabindex="-1"和aria-selected="false" 。

兩個箭頭是帶有title="previous"和title="next" <button>元素，當按下按鈕時，將選擇上一個或下一個列表項，在這種情況下，列表項的屬性更改為aria-selected="true"和tabindex="0" 。 后者意味着用戶可以直接跳轉到當前選擇的圖像，當然還有合適的替代文字。

此示例中未包含的另一個選項可能是將role="alert"添加到查看器 div，因此當該 div 的內容更改時，會自動讀取新的替代文本。 這樣用戶就不必按Tab鍵查看圖像，然后按shift + Tab鍵返回按鈕。

Answer 3

我看過很多使用role="listbox"例子，但這對我來說是不正確的。 列表框是一個表單控件，希望從用戶那里獲得選擇。 如果輪播的目的是讓用戶選擇一個選項，那么使用listbox ，但大多數人不會以這種方式使用輪播組件。 更好的角色是tablist 。 表格列表用於表示數據（與捕獲選項相反）。 輪播代表數據。 顯示特定圖像的鏈接將具有tab的作用，每個圖像及其相應的數據（例如其標題）將具有tabpanel的作用。

見http://www.w3.org/TR/2010/WD-wai-aria-practices-20100916/#tabpanel

Answer 4

來自官方W3 教程：

要以輔助技術可感知的方式對輪播進行分組，可以使用值為region的role屬性。 要識別區域，可以使用aria-label屬性，如下例所示：

 <div class="carousel" role="region" aria-label="Recent news"> … </div>

所以你應該使用role="region"

Answer 5

tl;博士：

role="marquee"

---

輪播不是列表框。

從列表框描述

允許用戶從選項列表中選擇一個或多個項目的小部件。

listbox 角色是select的子類。 雖然我確定有例外，但輪播通常不會用作用戶“選擇一個或多個項目”的表單元素，並且不應使用其他方式將它們視為此類的角色。

輪播的一個更好的角色是tablist ，只要提供輪播幻燈片的項目符號或編號，並根據哪個活動進行切換：

tab 元素的列表，它們是對 tabpanel 元素的引用。

輪播的一個更好的角色是marquee ，因為不依賴於將“標簽”顯示為項目符號或數字來訪問不同的幻燈片：

一種非必要信息頻繁變化的實時區域。

Answer 6

既然其他答案已經不能就角色“列表框”、“區域”或“選框”達成一致，那么會彈出另一個答案：角色“組”，結合角色描​​述“輪播”。

來自非常官方的WAI-ARIA Authoring Practices 1.2 （重點是我的）：

• 輪播容器元素 [...] 具有角色區域或角色組。 輪播容器最合適的角色取決於頁面的信息架構。 [...]

• carousel 容器的aria-roledescription 屬性設置為 carousel 。

A11y 很難。