label要素とアクセシビリティ
スクリーンリーダーをサポートするため、labelを入力欄に関連付けます。
「label要素とアクセシビリティ」はCoddyKit上の無料HTML Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML Academyコースには全4レッスンが含まれています。
ラベルが重要な理由
<label>要素は、フォームコントロールにテキストの説明を関連付けます：
- スクリーンリーダーは、入力欄にフォーカスが移動したときにラベルを読み上げます
- ラベルをクリックすると、関連付けられた入力欄が有効になります
- ラベルがないと、スクリーンリーダーのユーザーはそのフィールドの目的を把握できません
forを使った明示的なラベル
for属性は、idによってラベルと入力欄を関連付けます：
<label for="email">Email address</label>
<input type="email" id="email" name="email">
<!-- for="email" matches id="email" -->
<!-- Clicking "Email address" moves focus to the input -->
<!-- Required for proper accessibility -->暗黙的なラベル（内包）
入力欄をラベルの内側に配置すると、暗黙的な関連付けが作成されます：
<!-- No for/id needed — input is inside label -->
<label>
Email address
<input type="email" name="email">
</label>
<!-- Works fine but explicit association is more robust
(especially when label and input are far apart in the DOM) -->ラベルと入力欄を分離する
ラベルと入力欄を隣接させられない場合は、aria-labelledbyを使用します：
<h2 id="section-title">Billing Details</h2>
<input type="text" name="name" aria-labelledby="section-title">
<!-- The heading serves as the accessible label for the input -->代替手段としてのaria-label
視覚的なラベルを用意できない場合は、aria-labelを使用します：
<!-- Search form with icon button -->
<form>
<input type="search" name="q" aria-label="Search the site">
<button type="submit" aria-label="Submit search">
<svg><!-- magnifier icon --></svg>
</button>
</form>入力欄ごとに1つのラベル
各入力欄には、必ず1つだけラベルを付けてください。複数の入力欄には、それぞれ別のラベルが必要です：
<!-- BAD: one label for multiple inputs -->
<label>First and last name
<input type="text" name="first">
<input type="text" name="last">
</label>
<!-- GOOD: separate labels -->
<label for="first">First name</label>
<input type="text" id="first" name="first">
<label for="last">Last name</label>
<input type="text" id="last" name="last">必須フィールドの表示
必須フィールドはアクセシブルな方法で示します：
<!-- Visual + accessible required indicator -->
<label for="email">
Email address
<span aria-hidden="true">*</span> <!-- visual asterisk -->
<span class="sr-only">(required)</span> <!-- screen reader text -->
</label>
<input type="email" id="email" name="email" required>グループにはfieldsetとlegendを使う
関連する入力欄を<fieldset>と<legend>でグループ化します：
<fieldset>
<legend>Shipping address</legend>
<label for="addr-street">Street</label>
<input type="text" id="addr-street" name="street" autocomplete="address-line1">
<label for="addr-city">City</label>
<input type="text" id="addr-city" name="city" autocomplete="address-level2">
</fieldset>ラジオボタングループのfieldset
ラジオボタンのグループには、必ずfieldsetとlegendが必要です：
<fieldset>
<legend>Preferred contact method</legend>
<label>
<input type="radio" name="contact" value="email"> Email
</label>
<label>
<input type="radio" name="contact" value="phone"> Phone
</label>
<label>
<input type="radio" name="contact" value="text"> Text message
</label>
</fieldset>プレースホルダーはラベルではない
プレースホルダーはユーザーが入力すると消えるため、ラベルの代わりにはなりません：
<!-- BAD: placeholder used as a label -->
<input type="email" placeholder="Email address">
<!-- Screen readers may announce the placeholder, but many skip it -->
<!-- User cannot see the field purpose while typing -->
<!-- GOOD: -->
<label for="email">Email address</label>
<input type="email" id="email" placeholder="you@example.com">視覚的に非表示のラベル
デザイン上、表示できるラベルがない場合は、スクリーンリーダー向けに残したまま視覚的に非表示にします：
<label for="search" class="sr-only">Search</label>
<input type="search" id="search" placeholder="Search...">
/* sr-only utility class: */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}確認問題
明示的な関連付けを使って、ラベルと入力欄をどのように関連付けますか？
まとめ：labelのアクセシビリティ
ラベルの要点：
- すべての入力欄には、必ずラベルが必要です
<label for="id">で明示的に関連付けます- 入力欄をラベル内に配置すると、暗黙的に関連付けられます
aria-labelledbyでは、idによって任意の要素と関連付けられます- 表示テキストのないアイコンのみのボタンには
aria-labelを使用します - グループ化したコントロールには
<fieldset>と<legend>を使用します
よくある質問
「label要素とアクセシビリティ」レッスンは無料ですか？
はい。「label要素とアクセシビリティ」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML Academyコースには全4レッスンが含まれています。
「label要素とアクセシビリティ」で何を学びますか？
スクリーンリーダーをサポートするため、labelを入力欄に関連付けます。 ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
HTML Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのHTML Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「label要素とアクセシビリティ」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このHTML Academyレッスンでコードを書いて実行できますか？
はい。すべてのHTML Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- form要素：action、method、enctype
- 入力タイプ：text、password、email、number、tel
- label要素とアクセシビリティ
- button要素：submit、reset、button