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

Question

我有一个页面，我正在尝试编写代码，用户必须 select 从多个选项中选择一个，以缩略图网格的形式呈现。在类似的页面上，我使用了 role="radiogroup" 和 role="radio"（以及适当的脚本、标签等），并且效果很好——与此不同的是在更大的无线电组中有多个部分。

编辑，澄清：我宁愿使用本机单选按钮，正如几个人指出的那样。我可能做不到，因为这是一个很大的 angular 应用程序，有很多我必须解决的奇怪包袱，但我正在研究它。也就是说，无论它们是 role="radio" 还是 type="radio"，我的问题具体是关于 将其中一些组合在一起的最佳沟通方式。

用户只能从任何这些部分中选择一个选项。结构如下：

选择图片

艺术家 1

图片 A
图片 B

艺术家 2

图片 C
图片 D

所以基本上，我正在寻找一种在浏览图像选项时保留 "artist" 上下文的方法。 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。总的来说，还可以，但我觉得还可以更好。

有什么想法吗？

如果有任何屏幕-reader 用户可以对此进行权衡，将不胜感激。

Answer 1

部分问题是您依赖 <div> 元素而不是标准表单元素来创建表单。如果按照 Andre 的建议更改为 <input type="radio">，则可以使用 matching name attribute 来关联无线电。

这样键盘和屏幕阅读器软件就可以知道组中有多少输入，即使它们被其他标记分隔。所有 HTML 表单元素都具有完整的键盘支持和焦点状态，这减少了您必须执行的脚本量。

输入也应该有一个标签，所以这是您的图像和选项的任何其他细节的自然之家。您通过 for/id 属性配对告诉浏览器（以及屏幕阅读器）哪个标签属于哪个输入。

例如

<p>Artist: Jack Kirby</p>
<input type="radio" name="A1" value="p1" id="p1">
<label for="p1"><img src="pic1.jpg" alt="Title of artwork" /></label>
<input type="radio" name="A1" value="p2" id="p2">
<label for="p2"><img src="pic2.jpg" alt="Title of artwork" /></label>

<p>Artist: Kevin Maguire</p>
<input type="radio" name="A1" value="p3" id="p3">
<label for="p3"><img src="pic3.jpg" alt="Title of artwork" /></label>
<input type="radio" name="A1" value="p4" id="p4">
<label for="p4"><img src="pic4.jpg" alt="Title of artwork" /></label>

不同的 HTML 元素向浏览器传递不同的有用信息，并且 div 元素大多只是一个包含其他元素的空框。当您拥有无法使用有意义的标记复制的独特小部件时，ARIA 效果最佳，但是当您可以使用正确的 HTML 完成工作时，使内容更易于访问。我在上面链接的 MDN HTML 指南中有大量关于此类事情的有用信息。

Answer 2

同意@stringy 关于使用本机单选按钮的观点（参见 first rule of ARIA use) But if you must create custom radio buttons you need to use the aria attribute aria-setsize on each control (also suggest looking at the 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 组无线电组（不需要像你一样使用 role=radiogroup 指定使用 fieldset/legend)

因此建议使用 role=group 并删除 tabindex=0，因为 div 容器本身不是交互式对象，不应处于焦点顺序中：

<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">

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

What's an accessible way to group items within a radiogroup? (HTML5/WAI-ARIA)

html

forms

accessibility

wai-aria