--- id: 587d778b367417b2b2512aa7 title: Зберігайте радіокнопки в елементі fieldset для кращої доступності challengeType: 0 videoUrl: 'https://scrimba.com/c/cVJVefw' forumTopicId: 301030 dashedName: wrap-radio-buttons-in-a-fieldset-element-for-better-accessibility --- # --description-- Наступна тема стосується доступності радіокнопок. Кожній опції надається мітка `label` з атрибутом `for`, прив'язаним до `id` відповідного об'єкта, як пояснюється в останньому завданні. Оскільки радіокнопки часто знаходяться в групі, де користувач має обрати лише одну, існує спосіб семантично продемонструвати, що вибір є частиною набору. Для цього всю групу радіокнопок оточує теґ `fieldset`. Він часто використовує теґ `legend`, щоб забезпечити наявність опису групи кнопок, який фіксують зчитувачі з екрана для кожної опції в елементі `fieldset`. Обгортання `fieldset` і теґ `legend` не є обов'язковими у використанні, коли опції зрозумілі самі по собі, наприклад, як вибір статі. Достатньо використовувати `label` з атрибутом `for` для кожної радіокнопки. Наприклад: ```html
Choose one of these three items:

``` # --instructions-- Camper Cat хоче отримувати інформацію про рівень ніндзя користувачів на його сайті, коли вони підписуються на електронну розсилку. Він уже додав набір радіокнопок, а на попередньому уроці навчився використовувати теґи `label` з атрибутами `for` для кожної опції. Вперед, Camper Cat! Однак його код усе ще потребує допомоги. Замініть теґ `div`, що оточує радіокнопки, на теґ `fieldset`, а потім замініть теґ `p` усередині нього на `legend`. # --hints-- Ваш код має містити теґ `fieldset` навколо набору радіокнопок. ```js assert($('fieldset').length == 1); ``` Елемент `fieldset` повинен мати кінцевий теґ. ```js assert( code.match(/<\/fieldset>/g) && code.match(/<\/fieldset>/g).length === code.match(/
/g).length ); ``` Ваш код має містити теґ `legend` навколо тексту із запитанням про рівень ніндзя. ```js assert($('legend').length == 1); ``` Ваш код не повинен містити жодних тегів `div`. ```js assert($('div').length == 0); ``` Ваш код уже не має містити теґ `p` навколо тексту з запитанням про рівень ніндзя. ```js assert($('p').length == 4); ``` # --seed-- ## --seed-contents-- ```html

Deep Thoughts with Master Camper Cat

Sign up to receive Camper Cat's blog posts by email here!

What level ninja are you?



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

Sign up to receive Camper Cat's blog posts by email here!

What level ninja are you?

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?...

```