Geek Answers Handbook

What is an affordable way to group items in a radio group? (HTML5 / WAI-ARIA)

I have a page that I am trying to encode, where the user must select one of several parameters presented as a thumbnail grid. On such pages, I used role="radiogroup"and role="radio"(and the corresponding scripts, markings, etc.), and it worked well - the difference is that there are several sections in the larger radio group.

Edit to clarify: I would prefer to use my own switches, as some people have pointed out. I may not be able to, because it is a big angular app with a lot of weird luggage that I have to work with, but I am learning it. In this case, regardless of whether they are role="radio"or type="radio", my question concerns, in particular, the best way to report that some of them are grouped together.

The user can select only one option from any of these sections. The structure is as follows:

Choose image

Artist 1

  • Image A
  • Image B

Artist 2

  • Image C
  • Image 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>

codepen.

, , - , html "2 3" - , - DOM. , , , .

?

, .

+4
2

@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">
+5

, <div> . <input type="radio">, , , .

, , , . HTML , , .

, . (, , ), , , /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 . HTML MDN, , .

0

More articles:


All Articles