このページは Cloud Translation API によって翻訳されました。

ラベルと代替テキスト

Rob Dodson

スクリーンリーダーで、読み上げられた UI をユーザーに提示するには、意味のある要素に適切なラベルまたはテキスト代替テキストが必要です。ラベルまたは代替テキストは、要素にアクセス可能な名前を指定します。これは、ユーザー補助ツリー内で要素のセマンティクスを表現するための重要なプロパティの一つです。

要素の名前に要素のロールを組み合わせると、操作対象の要素のタイプやページでの表現方法を理解できるよう、ユーザーコンテキストが提供されます。名前が存在しない場合、スクリーンリーダーは要素の役割のみを読み上げます。追加のコンテキストなしでページを移動しようとしたときに、「ボタン」、「チェックボックス」、「画像」といった音声が聞こえる状況を想像してください。そのため、優れたユーザー補助機能には、ラベル付けと代替テキストが不可欠です。

要素の名前を調べる

要素のユーザー補助機能の名前は、Chrome の DevTools を使用して簡単に確認できます。

要素を右クリックして [検証] を選択します。DevTools の [Elements] パネルが開きます。
[要素] パネルで [ユーザー補助機能] ペインを探します。» 記号の後ろに隠れている場合があります。
[計算済みプロパティ] プルダウンで [名前] プロパティを探します。

alt テキストを含む img と label を含む input のどちらを使用している場合でも、要素にわかりやすい名前を付けるという同じ結果が得られます。

名前の欠落を確認する

ユーザー補助機能用の名前を要素に追加するには、そのタイプに応じてさまざまな方法があります。次の表に、ユーザー補助機能用の名前が必要な最も一般的な要素タイプと、その追加方法の説明へのリンクを示します。

要素の種類	名前を追加する方法
HTML ドキュメント	ドキュメントとフレームにラベルを付ける
`<frame>` 要素または `<iframe>` 要素	ドキュメントとフレームにラベルを付ける
画像要素	画像やオブジェクトの代替テキストを含める
`<input type="image">` 要素	画像やオブジェクトの代替テキストを含める
`<object>` 要素	画像やオブジェクトの代替テキストを含める
ボタン	ボタンとリンクにラベルを付ける
リンク	ボタンとリンクにラベルを付ける
フォーム要素	フォーム要素にラベルを付ける

ドキュメントとフレームにラベルを付ける

すべてのページには、ページの内容を簡単に説明する title 要素が必要です。title 要素は、ページにアクセス可能な名前を指定します。スクリーンリーダーがページに入ると、これが最初に読み上げられるテキストです。

たとえば、下のページには「メアリーのメープルバー急速焼きレシピ」というタイトルが付いています。

<!doctype html>
  <html lang="en">
    <head>
      <title>Mary's Maple Bar Fast-Baking Recipe</title>
    </head>
  <body>
    …
  </body>
</html>

同様に、frame 要素や iframe 要素には title 属性が必要です。

<iframe title="An interactive map of San Francisco" src="…"></iframe>

iframe のコンテンツには独自の内部 title 要素が含まれている場合がありますが、スクリーンリーダーは通常、フレームの境界で停止し、要素の役割（フレーム）と、title 属性によって指定されたアクセス可能な名前を読み上げます。これにより、ユーザーはフレームに入るかバイパスするかを決定できます。

画像やオブジェクトの代替テキストを含める

画像にアクセス可能な名前をつけるために、img には常に alt 属性を含める必要があります。画像の読み込みに失敗した場合、alt テキストがプレースホルダとして使用され、ユーザーは画像の内容を理解できます。

適切な alt テキストを記述するにはコツがありますが、次のガイドラインに従ってください。

周囲のテキストを読むのが難しいコンテンツが画像に含まれているかどうかを判断します。
できる限り簡潔に伝えましょう。

画像が装飾として機能し、有用なコンテンツを提供しない場合は、空の alt="" 属性を指定してユーザー補助ツリーから削除できます。

注: 効果的な alt テキストを記述する方法について詳しくは、WebAIM の代替テキストに関するガイドをご覧ください。

リンクと入力としての画像

リンクをラップした画像では、img の alt 属性を使用して、ユーザーがリンクをクリックしたときに表示される移動先を記述する必要があります。

<a href="https://en.wikipedia.org/wiki/Google">
  <img alt="Google's wikipedia page" src="google-logo.jpg">
</a>

同様に、<input type="image"> 要素を使用して画像ボタンを作成する場合は、ユーザーがボタンをクリックしたときに発生するアクションを説明する alt テキストを含める必要があります。

<form>
  <label>
    Username:
    <input type="text">
  </label>
  <input type="image" alt="Sign in" src="./sign-in-button.png">
</form>

埋め込みオブジェクト

通常、Flash、PDF、ActiveX などの埋め込みに使用される <object> 要素にも代替テキストを含める必要があります。画像と同様に、このテキストは要素がレンダリングに失敗した場合に表示されます。代替テキストは、以下の「年次報告書」のように、通常のテキストとして object 要素内に挿入されます。

<object type="application/pdf" data="/report.pdf">
Annual report.
</object>

ボタンとリンクにラベルを付ける

ボタンとリンクは多くの場合、サイトのエクスペリエンスに不可欠な要素であり、どちらにもわかりやすい名前を付けることが重要です。

ボタン

button 要素は常に、テキストコンテンツを使用してアクセス可能な名前を計算しようとします。form に含まれないボタンの場合は、テキストコンテンツとして明確なアクションを記述するだけで、わかりやすい名前を作成できます。

<button>Book Room</button>

[部屋を予約] ボタンを備えたモバイルフォーム。

このルールの例外としてよくあるのは、アイコンボタンです。アイコンボタンでは、画像またはアイコンフォントを使用してボタンのテキストコンテンツを提供できます。たとえば、WYSIWYG（What You See Is What You Get）エディタでテキストの書式設定に使用されるボタンは、通常はグラフィック記号です。

アイコンボタンを操作する場合は、aria-label 属性を使用して、アイコンにわかりやすい名前を明示的に付けると便利です。aria-label は、ボタン内のテキストコンテンツをオーバーライドして、スクリーンリーダーを使用するすべてのユーザーに操作を明確に説明できるようにします。

<button aria-label="Left align"></button>

リンク

ボタンと同様に、リンクは主にテキストコンテンツからユーザー補助機能用の名前を取得します。リンクを作成する際は、「こちら」や「もっと読む」などのつなぎ言葉ではなく、最も意味のあるテキストをリンク自体に含めることをおすすめします。

説明が不十分

Check out our guide to web performance <a href="/guide">here</a>.

役立つコンテンツです。

Check out <a href="/guide">our guide to web performance</a>.

これは、ページ上のすべてのリンクを一覧表示するショートカットを提供するスクリーンリーダーで特に役立ちます。リンクに繰り返しのフィラーテキストがたくさんあると、次のショートカットの有用性が大幅に低下します。

VoiceOver のリンクメニュー。「here」という単語が入力されています。 — macOS のスクリーンリーダーである VoiceOver の例。リンクによるナビゲーションメニューが表示されています。

フォーム要素にラベルを付ける

ラベルをチェックボックスなどのフォーム要素に関連付ける方法は 2 つあります。どちらの方法でも、ラベルテキストはチェックボックスのクリックターゲットにもなります。これは、マウスやタッチスクリーンのユーザーにも役立ちます。ラベルを要素に関連付けるには、次のいずれかを行います。

入力要素をラベル要素内に配置する

<label>
  <input type="checkbox">Receive promotional offers?</input>
</label>

または、ラベルの for 属性を使用して、要素の id を参照します。

<input id="promo" type="checkbox"></input>
<label for="promo">Receive promotional offers?</label>

チェックボックスのラベルが正しく設定されていれば、スクリーンリーダーは、次の VoiceOver の例のように、要素にチェックボックスの役割があり、オンの状態であること、名前が「プロモーションの特典を受け取る」になっていることをレポートできます。

「プロモーションの特典を受け取りますか？」という VoiceOver のテキスト出力

TODO: DevSite - 思考とチェックの評価