このページは 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>

埋め込みオブジェクト

<object> 要素は、通常は Flash、PDF、ActiveX などの埋め込みに使用されますが、代替テキストも含める必要があります。画像と同様に、このテキストは要素のレンダリングに失敗した場合に表示されます。代替テキストは、下の「年次報告書」のように、通常のテキストとして 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 - 考える力と確認力の評価