WAI-ARIA旋转木马的角色（a.k.a。滑块，幻灯片，画廊）

Question

旋转木马应该使用WAI-ARIA roles，如下所示？

备注：

• 我熟悉slider角色，但这指的是不同类型的小部件。
• 示例来自USA.gov，我在使用中看到的唯一一个与轮播相关的咏叹调角色是aria-live个别幻灯片。

Answer 1

正如您所说，role=slider不适合轮播。您应该使用的是role=listbox

引用MDN（见下面的链接）：

  

列表框角色用于标识创建列表的元素，用户可以从中选择一个或多个静态项目，与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"。

两个箭头是带有<button>和title="previous"的{​​{1}}元素，当按下按钮时，会选择上一个或下一个列表项，在这种情况下，列表项的属性会更改为title="next"和aria-selected="true"。后者意味着用户可以直接选择当前所选图像，这当然具有合适的替代文字。

此示例中未包含的另一个选项可能是将tabindex="0"添加到查看器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

来自official W3 tutorials：

  

要以对辅助技术可感知的方式对轮播进行分组，可以使用值为role的{​​{1}}属性。要识别区域，可以使用region属性，如下例所示：

aria-label

所以你应该使用 <div class="carousel" role="region" aria-label="Recent news"> … </div>

Answer 5

TL; DR：

role="marquee"

轮播不 a listbox。

从列表框说明

  

一个小部件，允许用户从选项列表中选择一个或多个项目。

listbox角色是select的子类。虽然我确定存在例外，但轮播通常不会用作用户“选择一个或多个项目”的表单元素，并且不应使用以其他方式对待它们的角色。

轮播的更好的角色是tablist，只要提供轮播或旋转木马幻灯片的编号，并根据哪个活动来切换：

  

制表符元素列表，它是对tabpanel元素的引用。

旋转木马的全部角色是marquee，因为不依赖于将“标签”显示为子弹或数字来访问不同的幻灯片：

  

一种非必要信息经常变化的实时区域。

Answer 6

现在，对于角色“列表框”，“区域”或“字幕”，其他答案已经无法达成共识，弹出另一个角色：角色“组”，以及角色描述“轮播”。

非常正式的WAI-ARIA Authoring Practices 1.2（重点是我）：

• 轮播容器元素[...]具有 角色区域或角色组。最合适的角色 轮播容器取决于 页。 [...]

• 轮播容器的 aria-roledescription属性设置为轮播。

A11y很难。