0Pricing
HTML Academy · レッスン

aria-label aria-labelledby aria-describedby

要素にアクセシブルな名前と説明を提供します

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

アクセシブルネームが重要な理由

すべてのインタラクティブ要素にはアクセシブルネームが必要です。これは、支援技術が要素を識別するために使用するテキスト文字列です。アクセシブルネームがないと、スクリーンリーダーはボタンや入力が何をするものかユーザーに伝えられません。

aria-label

aria-labelは、要素に直接テキストのアクセシブルネームを指定します。

<button aria-label="Close dialog">×</button>
<!-- The × character has no accessible meaning
     aria-label provides the name: 'Close dialog, button' -->

<input type="search" aria-label="Search products">
<!-- No visible label — aria-label provides the accessible name -->

aria-labelledby

aria-labelledbyは、別の要素をアクセシブルネームとして参照します。

<h2 id="section-title">Billing Information</h2>
<form aria-labelledby="section-title">
  <!-- Form's accessible name is 'Billing Information' -->
</form>

<!-- Multiple id references: -->
<button aria-labelledby="action-verb object-name">
  Delete
</button>
<span id="object-name" hidden>User Account</span>
<!-- Screen reader: 'Delete User Account, button' -->

aria-describedby

aria-describedbyは、補足となる詳細な説明を提供します。

<label for="pwd">Password</label>
<input
  type="password"
  id="pwd"
  aria-describedby="pwd-hint"
>
<p id="pwd-hint">Must be 8+ characters with one uppercase letter and one number.</p>
<!-- Screen reader: 'Password [input]' then reads the description on focus -->

ラベルと説明

アクセシブルネームと説明の違い：

  • アクセシブルネーム — 要素を識別します（aria-label、aria-labelledby、またはlabel要素）
  • 説明 — 追加のコンテキストで名前を補足します（aria-describedby）
  • スクリーンリーダーは、名前、ロール、ステートの順にアナウンスし、その後で説明を読み上げます

ランドマークのaria-label

同じ種類のランドマークが複数ある場合は、aria-labelで区別します。

<nav aria-label="Primary">...</nav>
<nav aria-label="Breadcrumb">...</nav>

<!-- Screen reader landmark list:
     'Primary, navigation'
     'Breadcrumb, navigation' -->

<!-- When only one nav, aria-label is optional but still helpful -->

セクションのaria-labelledby

スクリーンリーダーにコンテキストを提供するため、セクションを見出しに関連付けます。

<section aria-labelledby="about-heading">
  <h2 id="about-heading">About Our Team</h2>
  <p>We are a team of passionate developers...</p>
</section>
<!-- Screen reader: 'About Our Team, region' when entering section -->

aria-labelと表示テキスト

aria-labelは表示テキストを上書きするため、注意が必要です。

<button aria-label="Delete account permanently">
  Delete
</button>
<!-- Screen reader hears: 'Delete account permanently'
     Sighted user reads: 'Delete' -->

<!-- Best practice: visible text and aria-label should agree
     If possible, include extra context in visible text too:
     <button>Delete account permanently</button> -->

<!-- aria-label should start with the visible text when possible
     for speech recognition users who use voice commands -->

エラーのaria-describedby

エラーメッセージを対応する入力に関連付けます。

<label for="email">Email</label>
<input
  type="email"
  id="email"
  aria-describedby="email-error"
  aria-invalid="true"
>
<span id="email-error" role="alert">
  Please enter a valid email address.
</span>
<!-- When input receives focus, screen reader reads:
     'Email [field], invalid. Please enter a valid email address.' -->

複数のaria-describedby参照

aria-describedbyでは、複数の要素を参照できます。

<input
  type="password"
  aria-label="New password"
  aria-describedby="pwd-hint pwd-strength"
>
<p id="pwd-hint">Must be 8+ characters.</p>
<meter id="pwd-strength" aria-label="Password strength" value="2" max="4">Medium</meter>
<!-- Both elements are announced as the description -->

表示ラベルと非表示ラベル

表示ラベルを配置できない場合は、sr-onlyクラスを使用します。

<label for="search" class="sr-only">Search</label>
<input type="search" id="search" placeholder="Search...">

/* Visually hidden but in accessibility tree: */
.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;
}

確認

aria-labelとaria-labelledbyの違いは何ですか。

まとめ：ARIAラベル

アクセシブルネームの指定で重要な点：

  • aria-label — 表示ラベルがない要素にインラインで指定するテキスト名
  • aria-labelledby — idで既存の表示テキストを参照する
  • aria-describedby — 補足となる説明（名前の後に読み上げられます）
  • 表示ラベルとネイティブHTMLのlabel要素を優先する
  • ランドマークのaria-labelで、同じ種類の複数の領域を区別する

よくある質問

「aria-label aria-labelledby aria-describedby」レッスンは無料ですか？

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

「aria-label aria-labelledby aria-describedby」で何を学びますか？

要素にアクセシブルな名前と説明を提供します ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「aria-label aria-labelledby aria-describedby」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

  1. ARIAとネイティブHTMLの使い分け
  2. role button alert dialog landmark
  3. aria-label aria-labelledby aria-describedby
  4. aria-hiddenとaria-live
← HTML Academyに戻る