fieldsetとlegendでフィールドをグループ化する
ラジオボタンのセットなど、関連するコントロールを正しくまとめます。
「fieldsetとlegendでフィールドをグループ化する」はCoddyKit上の無料Web Accessibility Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはWeb Accessibility Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Web Accessibility Academyコースには全4レッスンが含まれています。
このレッスンの一部はまだ翻訳されておらず、英語で表示されています。
Some Fields Belong Together
A set of radio buttons or related checkboxes is one question, not many. The fieldset element groups them as a unit. 🧩
The Group Needs a Name
Each control has its own label, but the whole group needs one too. The legend gives the set a shared question.
legend Goes First
The legend must be the first child of the fieldset. It acts as the caption that screen readers tie to every control inside.
<fieldset>
<legend>Shipping speed</legend>
</fieldset>A Complete Radio Group
Here a fieldset wraps the choices and the legend asks the question. Each radio still keeps its own label.
<fieldset>
<legend>Size</legend>
<label><input type="radio" name="s"> Small</label>
<label><input type="radio" name="s"> Large</label>
</fieldset>What Screen Readers Hear
Moving to a grouped radio, a screen reader announces the legend plus the option, like Size, Small. Context comes for free.
Radios Are the Classic Case
Radio buttons sharing a name are the textbook use. Without a fieldset, users hear options with no idea what they answer.
Checkbox Sets Too
A multi-select list like Choose your interests is also a group. A fieldset ties the checkboxes to one shared prompt.
Split Single Inputs
Address fields broken across multiple inputs benefit too. A legend like Billing address frames the whole section.
Do Not Overuse It
A lone text input does not need a fieldset. Reserve grouping for fields that truly answer one question together.
Styling Is Flexible
The default border looks dated, but you can restyle it freely with CSS. Semantics stay intact no matter how it looks.
ARIA Is the Last Resort
If a real fieldset is impossible, role group with aria-labelledby mimics it. Prefer the native element whenever you can.
Quick Check
What element names a fieldset for assistive tech?
Recap
Wrap related controls in a fieldset and caption them with a legend. Radio and checkbox sets gain context every user can rely on. ✅
よくある質問
「fieldsetとlegendでフィールドをグループ化する」レッスンは無料ですか？
はい。「fieldsetとlegendでフィールドをグループ化する」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Web Accessibility Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Web Accessibility Academyコースには全4レッスンが含まれています。
「fieldsetとlegendでフィールドをグループ化する」で何を学びますか？
ラジオボタンのセットなど、関連するコントロールを正しくまとめます。 ブラウザで直接実行するハンズオンコードでWeb Accessibility Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Web Accessibility Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのWeb Accessibility Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「fieldsetとlegendでフィールドをグループ化する」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このWeb Accessibility Academyレッスンでコードを書いて実行できますか？
はい。すべてのWeb Accessibility Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- すべての入力欄に本物のlabelを付ける
- Placeholderはラベルではない
- fieldsetとlegendでフィールドをグループ化する
- ヘルプテキストと必須フィールドを読み上げさせる