--- id: 587d778b367417b2b2512aa7 title: Wrap Radio Buttons in a fieldset Element for Better Accessibility challengeType: 0 videoUrl: 'https://scrimba.com/c/cVJVefw' forumTopicId: 301030 dashedName: wrap-radio-buttons-in-a-fieldset-element-for-better-accessibility --- # --description-- The next form topic covers accessibility of radio buttons. Each choice is given a `label` with a `for` attribute tying to the `id` of the corresponding item as covered in the last challenge. Since radio buttons often come in a group where the user must choose one, there's a way to semantically show the choices are part of a set. The `fieldset` tag surrounds the entire grouping of radio buttons to achieve this. It often uses a `legend` tag to provide a description for the grouping, which is read by screen readers for each choice in the `fieldset` element. The `fieldset` wrapper and `legend` tag are not necessary when the choices are self-explanatory, like a gender selection. Using a `label` with the `for` attribute for each radio button is sufficient. Here's an example: ```html
``` # --instructions-- Camper Cat wants information about the ninja level of his users when they sign up for his email list. He's added a set of radio buttons and learned from our last lesson to use `label` tags with `for` attributes for each choice. Go Camper Cat! However, his code still needs some help. Change the `div` tag surrounding the radio buttons to a `fieldset` tag, and change the `p` tag inside it to a `legend`. # --hints-- Your code should have a `fieldset` tag around the radio button set. ```js assert($('fieldset').length == 1); ``` The `fieldset` element should have a closing tag. ```js assert( code.match(/<\/fieldset>/g) && code.match(/<\/fieldset>/g).length === code.match(/