0Pricing
Web Accessibility Academy · レッスン

すべての入力欄に本物のlabelを付ける

ラベルとフィールドを関連付け、タップと読み上げが機能するようにします。

「すべての入力欄に本物のlabelを付ける」はCoddyKit上の無料Web Accessibility Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはWeb Accessibility Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Web Accessibility Academyコースには全4レッスンが含まれています。

ラベルが重要な理由

名前のないフォームフィールドは、何を入力すればよいかわからない箱です。本物のlabelがあれば、視覚の有無にかかわらず、すべてのユーザーに入力内容を正確に伝えられます。🏷️

label要素

label要素は、フィールドに名前を付けるHTML組み込みの方法です。ブラウザー、スクリーンリーダー、タップ領域が標準でそれを理解します。

forとidで関連付ける

最も明確な関連付けは、labelのforをinputのidに一致させる方法です。これで両者が正式に関連付けられます。

<label for="email">Email</label>
<input id="email" type="email">

idは一意でなければならない

指定するidはページ内で一意でなければなりません。2つのinputで同じidを共有すると、関連付けが気付かないうちに壊れます。

囲む方法も使える

inputをlabelの内側にwrapすることもできます。入れ子にすることで関連が明確になるため、idは必要ありません。

<label>Email
  <input type="email">
</label>

クリック領域を広くする

関連付けられたlabelによって、ユーザーが操作できる広いクリック領域が得られます。テキストをタップするとフィールドにフォーカスしたりチェックを付けたりできるため、手元が不安定な場合や小さな画面で役立ちます。

スクリーンリーダーが読み上げる

関連付けられたinputにフォーカスが移ると、スクリーンリーダーはまずlabelを読み上げます。labelがなければ、ユーザーにはフィールドの種類しか聞こえません。

titleだけでは不十分

title属性はホバー時に表示されることがありますが、タッチ操作やキーボード操作では信頼できません。本物のlabelの代わりにはなりません。

チェックボックスにもラベルが必要

チェックボックスやラジオボタンは見た目では明らかに思えても、タップ可能にし、読み上げられるようにするのはlabelです。ラベルなしで配置しないでください。

<input id="terms" type="checkbox">
<label for="terms">I agree</label>

隠すより表示する

可能な限り表示されたラベルを使います。視覚のあるユーザーも、認知的な負荷がある場合にはスクリーンリーダーのユーザーと同じように助けられます。

隠す必要がある場合

検索ボックスにテキストを置く余地がない場合は、display noneではなくvisually-hiddenクラスでlabelを隠します。そうすれば支援技術には届きます。

確認問題

labelは、どのinputに名前を付けるものかをどのように判断しますか。

まとめ

すべてのinputには本物のlabelが必要です。forとidで関連付けるか、labelで囲みます。この習慣だけで、フォームがタップしやすく、読みやすく、明確になります。✅

よくある質問

「すべての入力欄に本物のlabelを付ける」レッスンは無料ですか？

はい。「すべての入力欄に本物のlabelを付ける」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Web Accessibility Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Web Accessibility Academyコースには全4レッスンが含まれています。

「すべての入力欄に本物のlabelを付ける」で何を学びますか？

ラベルとフィールドを関連付け、タップと読み上げが機能するようにします。 ブラウザで直接実行するハンズオンコードでWeb Accessibility Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Web Accessibility Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのWeb Accessibility Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。

「すべての入力欄に本物のlabelを付ける」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このWeb Accessibility Academyレッスンでコードを書いて実行できますか？

はい。すべてのWeb Accessibility Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. すべての入力欄に本物のlabelを付ける
  2. Placeholderはラベルではない
  3. fieldsetとlegendでフィールドをグループ化する
  4. ヘルプテキストと必須フィールドを読み上げさせる
← Web Accessibility Academyに戻る