javascript - 轮播的 WAI-ARIA 角色(又名 slider 、幻灯片、画廊)

标签 javascript html accessibility wai-aria

什么 WAI-ARIA roles应该用于轮播,如下图所示?

USA.gov carousel example

注意事项:

  • 我熟悉 slider Angular 色,但这是指不同类型的小部件。
  • 例子来自USA.gov我在使用中看到的唯一与轮播相关的 aria Angular 色是单个幻灯片上的 aria-live

最佳答案

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

引用自 MDN(见下面的链接):

The listbox role is used to identify an element that creates a list from which a user may select one or more items which are static and, unlike HTML elements, may contain images.

参见 https://developer.mozilla.org/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role有关您应该使用的其他 ARIA Angular 色的更多信息,例如列表框中每个条目的 role=option

您还可以查看此 YUI 插件(YUI 2 已弃用,但文档对于您的问题而言仍然有效) http://yui.github.io/yui2/docs/yui_2.9.0_full/examples/carousel/carousel-ariaplugin.html

通过 javascript 将 aria Angular 色添加到现有轮播。我不建议使用它,但您当然可以推断出它的作用并根据需要在您的标记中复制它。

关于javascript - 轮播的 WAI-ARIA 角色(又名 slider 、幻灯片、画廊),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16840054/

相关文章:

javascript - 无法读取对象数组中最后一个对象的属性(javascript)

javascript - 向后反向数字循环

iphone - 当您在移动设备上单击目标 ="_blank"链接时会发生什么?

html - JAWS 不会读取角色为 ="tab"的 li 内链接中的 aria-label 链接

ios - 如何停止 UISegmentedControl 的 VoiceOver 通知?

javascript - 关闭div后将输入值设置为null

javascript - tinymce 中的 <input> 元素

javascript - jsonp 最坏情况

javascript - 导出json到json文件

java - 如何使用内置的 Java tts?