WAI-ARIA旋转木马的角色(又名滑块,幻灯片,画廊)

Question

什么WAI-ARIA的角色应该用于旋转木马,类似下面？

笔记:

• 我熟悉滑块角色,但这指的是不同类型的小部件.
• 这个例子来自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"和的元素title="next",当按下按钮时,选择上一个或下一个列表项,在这种情况下,列表项的属性更改为aria-selected="true"和tabindex="0".后者意味着用户可以直接选择当前所选图像,当然这些图像具有合适的替代文字.

此示例中未包含的另一个选项可能是添加role="alert"到查看器div,因此当该div的内容更改时,将自动读取新的alt文本.这样用户无需按下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 教程：

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

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

所以你应该使用 role="region"