什么是在无线电组内分组项目的可访问方式？ (HTML5 / WAI-ARIA)

我有一个页面,我正在尝试编码,用户必须从许多选项中选择一个,显示为@L_489_6@网格.在类似的页面上,我使用了role =“radiogroup”和role =“radio”(以及适当的脚本,标签等),并且效果很好 – 与这一点的区别在于较大的radiogroup中有多个部分. @H_944_5@ @H_944_5@编辑,澄清：我宁愿使用原生的单选按钮,正如几个人所指出的那样.我可能无法做到,因为这是一个很大的角度应用程序,我需要解决很多奇怪的行李,但我正在研究它.也就是说,无论他们是角色=“无线电”还是类型=“无线电”,我的问题都是关于沟通的最佳方式,其中一些是组合在一起的.

@H_944_5@用户只能从这些部分中选择一个选项.结构如下：

@H_944_5@选择一张图片

@H_944_5@艺术家1

@H_944_5@>图片A
>图片B

@H_944_5@艺术家2

@H_944_5@>图片C
>图像D.

@H_944_5@基本上,我正在寻找一种方法来保留“艺术家”背景,同时在图像选项中移动.像SELECT元素中的optgroup一样.我尝试过fieldset,这是哪种作品;我想知道这是不是最好的方式？

@H_944_5@这是我目前拥有的,结构方面的. (将根据需要通过JS添加适当的焦点和键盘管理.)

@H_944_5@

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

@H_944_5@在这里它是一个codepen.

@H_944_5@我看到的一个问题是,使用我当前的html,它将第一个单选按钮读为“2 of 3” – 我猜它默认将图例视为放射性项目,因为它位于DOM中.总的来说,它有效,但我觉得它可能会更好.

@H_944_5@有什么想法吗？

@H_944_5@如果任何屏幕阅读器用户可以权衡这一点,将特别感激.

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