html - 在单选组中对项目进行分组的可访问方式是什么？ (HTML5/WAI-咏叹调)

Question

我有一个页面，我正在尝试编写代码，用户必须从多个选项中选择一个，以缩略图网格的形式呈现。在类似的页面上，我使用了 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 中的位置，它默认将图例视为单选项。总的来说，它有效，但我觉得它可以做得更好。

有什么想法吗？

如果任何屏幕阅读器用户可以对此进行权衡，我们将特别感激。

Answer 1

同意@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">