在放射组中分组项目的可访问方式是什么？（HTML5/WAI-ARIA）

我有一个页面，我正在尝试编码，用户必须从许多选项中选择一个，以缩略图网格的形式显示。在类似的页面上，我使用了role=radiogroup和role=radio以及适当的脚本、标签等，效果很好——与此不同的是，在较大的radiogroup中有多个部分

编辑，澄清一下：正如一些人指出的那样，我宁愿使用本地单选按钮。我可能不能，因为这是一个巨大的角度应用程序，有很多奇怪的包袱，我必须处理，但我正在研究它。也就是说，无论它们是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中，它将第一个单选按钮读取为3中的2个-我猜它默认将图例视为放射性项目，因为它位于DOM中。总的来说，它是有效的，但我觉得它可以更好

有什么想法吗

---

如果任何屏幕阅读器用户都能参与进来，我将不胜感激。

问题的一部分在于您依赖元素来创建表单，而不是标准表单元素。如果您按照Andre的建议更改为，则可以使用a来关联收音机

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

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

例如

---

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

同意@stringy关于使用本机单选按钮的观点，请参见，但如果必须创建自定义单选按钮，则需要在每个控件上使用aria属性，还建议查看：

@jack如果所有单选按钮都是同一组的一部分，则它们应包含在单个字段集/图例或role=radiogroup中，并通过aria label或aria labelledby访问名称，然后将3个子组中的每一个子组包装在

<div role=group aria-label="whatever">

---

我一直使用fieldset，所以我想知道是否有更好的方法。对不起，你为什么不使用呢？就因为这个形象？我这么问是因为我的最新版本在这里表现得很奇怪。不过，这可能是一个JAWS错误。不过，在这种情况下，将每个字段集作为自己的放射组处理是否有效？我把“radiogroup”理解为一组单选按钮，你可以从中选择一个选项——因此，如果页面上有3个radiogroup，你可以选择3个选项，每个选项一个。而我所拥有的更像是三组映射到同一输入的图片，你应该只能从页面上的所有图片中选择一张，而不是每套一张。正如我所说，我想到的最接近的功能等价物是select with optgroups。@jack ok，所以所有单选按钮都是同一个组的一部分，那么它们应该包含在一个字段集/legend或role=radiogroup中，通过aria label或aria labelldby访问名称，然后用Cool包装这3个子组中的每一个，这是有意义的。我会接受你的回答；你介意在答案的正文中加上这句话吗？这样以后的读者就不会忽视它了？谢谢你的帮助@杰克-按要求添加贪婪！相信我，我更愿意使用输入和本机特性。html目前的存在是因为我正在开发的应用程序中有很多角度的包袱；如果我能让它成为真正的无线电输入，我会的。我的问题更多的是关于是否有一种方法可以说从这9个输入中选择一个，例如从这3组中的任何一组。在您的代码版本中，我相信用户tabbin会跳过p标记

---

g通过，不是吗？我正在寻找一种方法将它们与相关输入关联起来。啊，我明白了！在这种情况下，我对史蒂夫·福克纳的答案投了赞成票，因为我相信这是最有效的答案！

<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 role="group" id="collections-list" aria-label="Options">

<div role=group aria-label="whatever">