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

我有一个页面,我正在尝试编码,用户必须从许多选项中选择一个,显示为缩略图网格.在类似的页面上,我使用了role =“radiogroup”和role =“radio”(以及适当的脚本,标签等),并且效果很好 – 与这一点的区别在于较大的radiogroup中有多个部分.

编辑,澄清：我宁愿使用原生的单选按钮,正如几个人所指出的那样.我可能无法做到,因为这是一个很大的角度应用程序,我需要解决很多奇怪的行李,但我正在研究它.也就是说,无论他们是角色=“无线电”还是类型=“无线电”,我的问题都是关于沟通的最佳方式,其中一些是组合在一起的.

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

选择一张图片

艺术家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,它将第一个单选按钮读为“2 of 3” – 我猜它默认将图例视为放射性项目,因为它位于DOM中.总的来说,它有效,但我觉得它可能会更好.

有什么想法吗？

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

解决方法

同意@stringy关于使用本机单选按钮(参见 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>这本身不是一个放射组,它组合了2组无线电组(当你使用fieldset / legend时,不需要使用role = radiogroup来指定)

所以建议使用role = group并删除tabindex = 0,因为div容器本身不是一个交互式对象,不应该在焦点顺序中：

<div role="group" id="collections-list" aria-label="Options">

@jack如果所有单选按钮都属于同一组,则它们应包含在单个字段集/图例或角色=具有可访问名称的radiogroup(通过aria-label或aria-labelledby)中,然后将3个子组中的每一个包含在

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