--- id: 587d778b367417b2b2512aa7 title: Envolver botões de opção em um elemento fieldset para melhor acessibilidade challengeType: 0 videoUrl: 'https://scrimba.com/c/cVJVefw' forumTopicId: 301030 dashedName: wrap-radio-buttons-in-a-fieldset-element-for-better-accessibility --- # --description-- O próximo tópico sobre formulários aborda a acessibilidade dos botões de opção (radio buttons). Cada opção recebe um `label` com um atributo `for`, que será vinculado ao `id` do item correspondente, conforme abordado no último desafio. Como os botões de opção geralmente fazem parte de um grupo em que o usuário deve escolher um, há uma maneira de mostrar semanticamente que as opções fazem parte de um conjunto. A tag `fieldset` envolve todo o grupo de botões de opção para fazer isso. Frequentemente, usa-se uma tag `legend` para fornecer uma descrição para o agrupamento, que é lida por leitores de tela para cada opção no elemento `fieldset`. O wrapper `fieldset` e a tag `legend` não são necessários quando as escolhas são autoexplicativas, como uma seleção de gênero. Usar um `label` com o atributo `for` para cada botão de opção é suficiente. Exemplo: ```html ``` # --instructions-- O Camper Cat quer informações sobre o nível ninja dos usuários quando eles se inscrevem em sua lista de e-mail. Ele adicionou um conjunto de botões de opção e aprendeu em nossa última lição a usar tags `label` com atributos `for` para cada opção. É isso aí, Camper Cat! No entanto, o código ainda precisa de uma revisão. Altere a tag `div` ao redor dos botões de opção para uma tag `fieldset` e altere a tag `p` dentro dela para uma `legend`. # --hints-- O código deve ter uma tag `fieldset` ao redor do grupo de botões de opção. ```js assert($('fieldset').length == 1); ``` O elemento `fieldset` deve ter uma tag de fechamento. ```js assert( code.match(/<\/fieldset>/g) && code.match(/<\/fieldset>/g).length === code.match(/

/g).length ); ``` O código deve ter uma tag `legend` ao redor do texto perguntando em que nível ninja o usuário está. ```js assert($('legend').length == 1); ``` O código não deve ter nenhuma tag `div`. ```js assert($('div').length == 0); ``` O código não deve mais ter uma tag `p` ao redor do texto perguntando em que nível ninja o usuário está. ```js assert($('p').length == 4); ``` # --seed-- ## --seed-contents-- ```html

Deep Thoughts with Master Camper Cat

The Garfield Files: Lasagna as Training Fuel?

The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...

Defeating your Foe: the Red Dot is Ours!

Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightning speed. But chin up, fellow fighters, our time for victory may soon be near...

Is Chuck Norris a Cat Person?

Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence that anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...

``` # --solutions-- ```html

Deep Thoughts with Master Camper Cat

The Garfield Files: Lasagna as Training Fuel?

The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...

Defeating your Foe: the Red Dot is Ours!

Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightning speed. But chin up, fellow fighters, our time for victory may soon be near...

Is Chuck Norris a Cat Person?

Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence that anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...

```