Grouping Controls

Now, grouping controls are also super important because sometimes different form elements,

they just belong together.

So you want to make sure that that is clear to people using screen readers, to other assistive

technology.

And you're doing that basically by using controls with field sets.

That's the easiest way and this is the only thing that I recommend from this page.

So if you go to this section, associating related content with fieldset, then you'll

see that there is a fieldset.

In this case, it's named output format and it has three radio button text files, CSV

file, HTML file, and you can select one of those.

In the HTML, this basically looks like this.

You have fieldset and legend.

The legend always needs to be the first child of the fieldset.

So if you're doing accessibility testing, you'll need to look out for that.

But then you can basically do what you want after that.

And here we have the input, the radio button.

So that's type radio instead of type checkbox.

And then we have "checked" because this is the first one and we want to have that automatically

checked.

Then we have the format "csv" and that is not checked and we have the label after that.

Now what happens when a screen reader comes across this?

It will read a CSV file, radio button selected in this case, and then it will say "output

format".

basically gives you that additional information that, oh yeah, this is the section for the output

format. And that's especially important if you have multiple similar things. But let's first

look at checkboxes. It's the same thing. Basically, so in this case, I want to receive the weekly

newsletters offer from the company and that would be also

announced as offers from offers from the company. Checkbox

unchecked. And then I want to receive as the description. And

here we have the example with the related fields. So in this

case, we have duplicated name, street, number, city and subcode

fields, input fields. So just having name input field does not

give the user enough information because they should be able to

distinguish between those use cases. So in this case, it's

name, you know, edit text, and then shipping address, and then you have name, edit text,

billing address. And it's like, oh, yeah, that makes a lot more sense than just having like name

and street. And that can make it much easier to be mindful and knowing what's happening

between those fields. Yeah, and the code is basically the same. Wrap it into fieldset,

put the legend, which is in this case the shipping address,

at the top, and then you put inside the fieldset whatever you want.

Now, there is this note that the fieldset can sometimes be not announced, or it might be

only announced when you enter the field set and stuff like that. That's all true. Users are used

to how they have their screen reader configured. So don't worry about this. This has been

around for a long time, so there's no need to really look at that and make sure that

or make anything else in that situation. It's a really simple solution for a lot of use cases.