我有一个页面，我正在尝试编码，用户必须从多个选项中选择一个，显示为缩略图网格。在类似的页面上，我使用了role="radiogroup"和role="radio"（以及适当的脚本、标签等），效果很好 - 与此不同的是，较大的无线电组中有多个部分。
编辑，澄清一下：正如几个人指出的那样，我宁愿使用本机单选按钮。我可能无法做到，因为这是一个很大的角度应用程序，有很多奇怪的包袱，我必须解决，但我正在研究它。也就是说，无论他们是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>
在这里，它作为代码笔。
我看到的一个问题是，对于我当前的 html，它将第一个单选按钮读取为"2 of 3" - 我想它默认将图例视为单选项目，因为它位于 DOM 中。 总的来说，它有效，但我觉得它可以更好。
有什么想法吗？
如果任何屏幕阅读器用户可以对此进行权衡，将不胜感激。
同意@stringy关于使用本机单选按钮的观点（请参阅 ARIA 使用的第一条规则） 但是，如果必须创建自定义单选按钮，则需要在每个控件上使用 aria 属性 aria-setsize（还建议查看可访问的自定义控件清单）：
<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如果所有单选按钮都属于同一组，则它们应包含在具有可访问名称（通过 aria-label 或 aria-labelledby 的单个fieldset/legend或role=radiogroup中，然后将 3 个子组中的每一个包装在
<div role=group aria-label="whatever">
部分问题在于您依赖于<div>元素而不是标准表单元素来创建表单。如果按照 Andre 的建议更改为<input type="radio">，则可以使用匹配的名称属性来关联无线电。
这样，键盘和屏幕阅读器软件可以告诉组中有多少输入，即使它们被其他标记分隔。所有 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指南有大量关于这种事情的有用信息。