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

ラベルと代替テキスト

Rob Dodson

スクリーンリーダーが音声 UI をユーザーに提示するには、意味のある要素に適切なラベルまたは代替テキストが必要です。ラベルまたはテキストオルタナティブは、要素にユーザー補助機能用の名前を指定します。これは、ユーザー補助ツリーで要素のセマンティクスを表現するための重要なプロパティの 1 つです。

要素の名前と要素のロールを組み合わせると、ユーザーにコンテキストが提供され、操作している要素のタイプと、ページ上でどのように表現されているかを理解できます。名前が指定されていない場合、スクリーンリーダーは要素のロールのみを読み上げます。ページを操作しようとしていて、追加のコンテキストなしで「ボタン」、「チェックボックス」、「画像」と聞こえたとします。そのため、ユーザー補助に優れた優れたエクスペリエンスには、ラベル付けとテキストの代替が不可欠です。

要素の名前を検査する

Chrome の DevTools を使用すると、要素のユーザー補助名を簡単に確認できます。

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

alt テキストを含む img でも、label を含む input でも、これらのシナリオはすべて同じ結果になります。つまり、要素にアクセス可能な名前が付けられます。

名前が不足しているかどうかを確認する

アクセス可能な名前を要素に追加する方法は、そのタイプによって異なります。次の表に、アクセス可能な名前と、追加方法の説明へのリンクを必要とする最も一般的な要素タイプを示します。

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

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

すべてのページには、ページの内容を簡単に説明する title 要素が必要です。title 要素は、ページにユーザー補助機能用の名前を指定します。スクリーンリーダーがページに移動すると、最初に読み上げられるテキストです。

たとえば、以下のページのタイトルは「Mary's Maple Bar Fast-Baking Recipe」です。

<!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 のリンクメニュー。 — リンクによる移動メニューが表示されている 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 - 考えると確認する評価