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

Question

我有一个页面,我正在尝试编码,用户必须从许多选项中选择一个,显示为缩略图网格.类似的网页,我已经使用role="radiogroup"和role="radio"(及相应的脚本,标签等),而且运作良好-这一个区别是,有较大的RadioGroup中内的多个部分.

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

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

---

选择一张图片

艺术家1

• 图片A
• 图B

艺术家2

• 图片C
• 图片D.

---

基本上,我正在寻找一种方法来保留"艺术家"背景,同时在图像选项中移动.optgroup从select元素中得到的东西.我试过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中.总的来说,它有效,但我觉得它可能会更好.

有什么想法吗？

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

Answer 1

同意@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如果所有单选按钮都属于同一组,那么它们应该包含在单个fieldset/legend或role=radiogroup可访问的名称中(通过aria-label或aria-labelledby)然后包装3个子组中的每一个

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