Why fieldset is used in html

So in this example, when focus moves to field 3 the "Group 2" legend would be announced, not the "Group 1" legend. In my demo, all radio buttons are inside the inner fieldset. There are no radio buttons inside the outer but not the inner fieldset. I hope that makes sense.

Comment by goetsu posted on on 25 July Thanks Goetsu. We came up against some interesting complications though The expected behaviour is for the legend to be announced when focus moves to the first and only the first field inside the fieldset.

The "first" field changes though, depending on the direction of navigation. It also changes when there is a set of radio buttons inside the fieldset and one of them is selected. Take a fieldset containing a set of five radio buttons: we'd need to put aria-describedby on the first radio button, the last radio button, and either dynamically add it to whichever radio button was selected assuming it wasn't one of the two radio buttons that already had aria-describedby applied or apply it to every field just in case.

That's a lot of extra verbosity, for a lot of people. The legend is accessible to VoiceOver on iOS as you navigate through the content. It just isn't announced when focus moves to the first field or when you use the roter to access form fields. So the choice becomes a usability choice - and not an easy one at that. Comment by James Edwards posted on on 26 July Comment by Leonie Watson posted on on 26 July Comment by James Edwards posted on on 27 July Comment by Allen Simon posted on on 27 July It's amusing that your one no-no is using a fieldset for a single question, yet your core example in the article is a single yes-no question.

Surely there are other tools such as the "title" attribute which you could use for accessibility. Anyway, for a single question it's easier to just have answer buttons rather than radios with a separate "submit" button. I probably didn't phrase it that well. The title attribute wouldn't be appropriate in this case. It forms part of the accessible name computation, and so if present it effectively overrides the label element. You'd need to replicate the radio button behaviour so that only one button could be selected at a time.

You'd also need to provide additional semantics to inform screen reader users which button was currently pressed. Comment by Nimesh Gurung posted on on 28 July It's good to see documented here. How do you guys normally debug accessibility issues, is it just trial and error? We try to follow standards as much as possible.

For example, if there is an HTML element designed to do the thing we want, we'll try to use it. The theory is that browsers and assistive technologies also try to follow standards, so it should give us some common ground. In real life there are always differences between browsers and assistive technologies when it comes to accessibility as with everything else.

We encourage usability testing with people who use assistive technologies, as a way to uncover potential problems. Once an issue has been identified, it's a matter of trying to find the cause, and from there of trying to find a solution that fixes the problem without having a negative impact on someone else's experience.

Comment by Nienke posted on on 02 August By Priya Pedamkar. A fieldset tag in HTML is something that helps us get certain elements, some related elements together inside one place, normally a Form. The fieldset tag, when used, creates a block or a boundary around our related elements said above.

This tag helps break down form sections into several logical ones. When this attribute is used, it indicates that the group of elements for which this attribute is used is to be disabled. It defines these identifiers to which our group of related elements will belong or belongs to. If there is more than one form identifier, they are all included and separated by spaces.

The HTML tags or elements can contain one or more properties. Improve this question. TylerH Eastern Monk Eastern Monk 5, 7 7 gold badges 43 43 silver badges 61 61 bronze badges. Why do we need any tag? Why do we need an img tag when we can create an image from 1px divs with background colors? Please note: W3C has nothing to do with w3schools. Don't refer to w3schools. Madmartigan I know. But W3C gives only specification which I did not find of much use to get my question answered.

About not using W3Schools and using more trustworthy sites for technical information: w3fools. Show 2 more comments. Active Oldest Votes. Improve this answer. Asons Quentin Quentin k gold badges silver badges bronze badges.

I don't have a link handy, but apparently many screen readers read the legend text before each label in the fieldset. Madmartigan — That is a good thing, it means that you know you are still dealing with the same set of radio buttons. It is also a reason to ensure the legend is concise. Add a comment. Another feature of fieldset is that disabling it disables all of the fields contained within it.

Collin Price Collin Price 5, 2 2 gold badges 33 33 silver badges 35 35 bronze badges. It's needed for accessibility. Smi Eric Sites Eric Sites 1, 10 10 silver badges 16 16 bronze badges. It came out in HTML 4. Boris D. Teoharov Boris D.