轮播应该使用哪些WAI-ARIA 角色，如下所示？
笔记：
问问题
9510 次
6 回答
12
正如您所说的那样，role=slider不适合轮播。你应该使用的是role=listbox
引用 MDN（见下面的链接）：
列表框角色用于标识创建列表的元素，用户可以从中选择一个或多个静态项目，并且与 HTML 元素不同，可能包含图像。
请参阅https://developer.mozilla.org/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role以获取有关您应该使用的其他 ARIA 角色的更多信息，例如role=option列表框中的每个条目。
您也可以看看这个 YUI 插件（YUI 2 已被弃用，但文档对于您的问题仍然有效） http://yui.github.io/yui2/docs/yui_2.9.0_full/examples/carousel /carousel-ariaplugin.html
通过 javascript 将 aria 角色添加到现有轮播中。我不建议使用它，但您当然可以推断出它的作用并根据需要将其复制到您的标记中。
于 2013-06-03T14:31:20.213 回答
6
我看过很多使用 的例子role="listbox"，但这对我来说感觉不正确。列表框是一个表单控件，希望从用户那里获得选择。如果轮播的目的是让用户选择一个选项，那么请使用listbox，但大多数人不会以这种方式使用轮播组件。一个更好的角色将是一个tablist。Tablists 用于表示数据（与捕获选项相反）。轮播代表数据。显示特定图像的链接将具有角色，tab并且每个图像及其相应数据（例如其标题）将获得角色tabpanel。
见http://www.w3.org/TR/2010/WD-wai-aria-practices-20100916/#tabpanel
于 2013-06-25T18:11:17.207 回答
6
这是使用 jQuery UI 的可访问轮播示例：http: //hanshillen.github.io/jqtest/#goto_carousel
控制栏是一个图像列表，用 标记<ul role="listbox">。每个<li>都有role="option"、tabindex="-1"和aria-selected="false"。
这两个箭头是带有and的<button>元素，当按下按钮时，选择了上一个或下一个列表项，在这种情况下，该列表项的属性变为and 。后者意味着用户可以直接跳到当前选择的图像，当然有合适的替代文本。title="previous"title="next"aria-selected="true"tabindex="0"
此示例中未包含的另一个选项可能是添加role="alert"到查看器 div，因此当该 div 的内容发生更改时，会自动读取新的 alt 文本。这样用户就不必按tab来查看图像是什么，然后按shift+tab返回按钮。
于 2013-06-05T14:05:32.857 回答
5
来自官方W3 教程：
要以辅助技术可感知的方式对轮播进行分组，可以使用
role值为 的属性。region要识别区域，aria-label可以使用属性，如下例所示：<div class="carousel" role="region" aria-label="Recent news"> … </div>
所以你应该使用role="region"
于 2016-01-15T08:01:44.577 回答
1
既然其他答案已经不能就角色“listbox”、“region”或“marquee”达成一致，就会弹出另一个答案：角色“group”，结合角色描述“carousel”。
来自非常官方的WAI-ARIA Authoring Practices 1.2（强调我的）：
轮播容器元素 [...] 具有角色区域或角色组。轮播容器最合适的角色取决于页面的信息架构。[...]
carousel 容器的aria-roledescription 属性设置为 carousel。
A11y 很难。
于 2020-08-24T16:03:41.153 回答