我有一个页面,我正在尝试编写代码,用户必须从多个选项中选择一个,以缩略图网格的形式呈现。在类似的页面上,我使用了 role="radiogroup"
和 role="radio"
(以及适当的脚本、标签等),效果很好——区别这个是在较大的 radio 组中有多个部分。
编辑,澄清一下:我宁愿使用 native 单选按钮,正如几个人指出的那样。我可能做不到,因为这是一个大角度的应用程序,有很多我必须解决的奇怪包袱,但我正在调查它。也就是说,无论是 role="radio"
还是 type="radio"
,我的问题都是关于最好的沟通方式被组合在一起。
用户只能从任何这些部分中选择一个选项。结构如下:
选择一张图片
艺术家 1
- 图片A
- 图片B
艺术家 2
- 图片 C
- 图片D
基本上,我正在寻找一种在浏览图像选项时保留“艺术家”上下文的方法。类似于 select
元素中的 optgroup
。我试过 fieldset
,效果不错;我想知道这是否是最好的方法?
这是我目前拥有的结构明智的。 (适当的焦点和键盘管理将根据需要通过JS添加。)
<form id="select-design" aria-label="Design Options">
<h2>Choose an image</h2>
<div role="radiogroup" id="collections-list" aria-label="Options" tabindex="0">
<fieldset id="group-1">
<legend>Artist: Jack Kirby</legend>
<div role="radio" aria-checked="false" tabindex="-1">
<img src="//placehold.it/200x200/bada55/fff" alt="Cool Picture">
</div>
<div role="radio" aria-checked="false" tabindex="-1">
<img src="//placehold.it/200x200/0de/fff" alt="Also Cool Picture">
</div>
</fieldset>
<fieldset id="group-2">
<legend>Artist: Kevin Maguire</legend>
<div role="radio" aria-checked="false" tabindex="-1">
<img src="//placehold.it/200x200" alt="Nice Art">
</div>
<div role="radio" aria-checked="false" tabindex="-1">
<img src="//placehold.it/200x200/0cd/fff" alt="Nicer Art">
</div>
</fieldset>
</div>
这里是 codepen .
我看到的一个问题是,在我当前的 html 中,它将第一个单选按钮读取为“3 个中的第 2 个”- 我猜由于它在 DOM 中的位置,它默认将图例视为单选项。总的来说,它有效,但我觉得它可以做得更好。
有什么想法吗?
如果任何屏幕阅读器用户可以对此进行权衡,我们将特别感激。
最佳答案
同意@stringy 关于使用 native 单选按钮的观点(参见 first rule of ARIA use )但是如果您必须创建自定义单选按钮,则需要使用 aria 属性 aria-setsize在每个控件上(也建议查看 accessible custom control checklist ):
<fieldset id="group-1">
<legend>Artist: Jack Kirby</legend>
<div role="radio" aria-checked="false" tabindex="-1" aria-setsize="2">
<img src="//placehold.it/200x200/bada55/fff" alt="Cool Picture">
</div>
<div role="radio" aria-checked="false" tabindex="-1" aria-setsize="2">
<img src="//placehold.it/200x200/0de/fff" alt="Also Cool Picture">
</div>
</fieldset>
关于外部<div>
这本身不是 radiogroup
它对 2 组 radio 组进行分组(不需要使用 role=radiogroup
指定,因为您正在使用 fieldset/legend
)
所以建议使用role=group
并删除 tabindex=0
作为div
container 本身不是一个交互式对象,不应该在焦点顺序中:
<div role="group" id="collections-list" aria-label="Options">
@jack 如果所有单选按钮都属于同一组,那么它们应该包含在一个 fieldset/legend
中。或 role=radiogroup
使用可访问的名称(通过 aria-label
或 aria-labelledby
)然后将 3 个子组中的每一个包装在
<div role=group aria-label="whatever">
关于html - 在单选组中对项目进行分组的可访问方式是什么? (HTML5/WAI-咏叹调),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36776126/