ラベルと代替テキスト

Rob Dodson

スクリーン リーダーで音声の UI をユーザーに提示するには、 要素には適切なラベルまたは代替テキストが必要です。ラベルまたはテキスト 代替は、要素にアクセス可能な name を指定します。これは主要なプロパティの 1 つです。 ユーザー補助ツリー内の要素のセマンティクスを表現する。

要素の名前と要素のロールを組み合わせると、 操作している要素の種類を把握できるようにします。 ページ上でどのように表示されるのか 確認できます名前が存在しない場合、 要素の役割のみを読み上げます。ナビゲーションバーを 「ボタン」を聴きながら「チェックボックス」「image」追加する必要はありません。 説明します。だからこそ、ラベル付けとテキストの代替が、優れた 役立ちます。

要素の名前を調べる

Chrome の DevTools を使用すると、要素のアクセス可能な名前を簡単に確認できます。

  1. 要素を右クリックして [検証] を選択します。DevTools が開きます。 [Elements] パネル。
  2. [要素] パネルで [ユーザー補助機能] ペインを探します。非表示になっている可能性があります » 記号の後ろにあります。
  3. [計算済みプロパティ] プルダウンで、[名前] プロパティを探します。
で確認できます。 <ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
</ph> ボタンの計算済み名前が表示されている DevTools のユーザー補助ペイン。
で確認できます。

alt のテキストを含む img を見ている場合でも、テキストである input を見ている場合でも、 label、これらのシナリオはすべて同じ結果になります。 そのアクセス可能な名前を指定します。

名前が入力されていないかどうかを確認する

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

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

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

すべてのページに 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 要素を含めることができますが、 スクリーン リーダーは通常、フレーム境界で停止し、要素の role（フレーム）とそのアクセス可能な名前（title 属性によって指定）この を使用すると、フレームに入るかバイパスするかをユーザーが決定できます。

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

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

優れた alt テキストを書くのは骨が折れますが、いくつかのガイドラインがあります 手順は以下のとおりです。

  1. 他の方法では見つけにくいコンテンツが画像に含まれているかどうかを確認する 周囲のテキストを読んで理解できます
  2. その場合は、内容をできるだけ簡潔に伝えます。

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

リンクで囲まれた画像は、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、 代替テキストも含める必要があります。画像と同様に、このテキストは 要素のレンダリングに失敗した場合に表示されます代替テキストは 通常のテキストでの object 要素（「年次レポート」など）下にあります。

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

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

ボタン

button 要素は、常にその値を使用してアクセス可能な名前を計算しようとします。 テキスト コンテンツです。form の一部ではないボタンの場合は、 アクセスしやすい優れたコンテンツを作成するために必要なものは 表示されます。

<button>Book Room</button>

[Book Room] が表示されているモバイル フォーム] ボタンを離します。

このルールの一般的な例外の 1 つは、アイコンボタンです。アイコンボタンでは ボタンのテキスト コンテンツを指定します。たとえば WYSIWYG（What You See Is What You Get）エディタで使用するボタン テキストは通常、単なるグラフィック記号です。

左揃えのアイコンボタン。

アイコンボタンを使用する場合は、 aria-label 属性を使用してアクセスできる名前。aria-label はいずれかをオーバーライド ボタン内にテキスト コンテンツを配置して、操作の説明を 読み上げることもできます

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

ボタンと同様に、リンクは主にテキストからユーザー補助機能用の名前が付けられています。 説明します。リンクを作成するコツは、最も意味のあるリンクを 「here」のようなつなぎ言葉ではなくテキストをリンク自体に挿入します。または「読む」 続きます。」

説明が不十分
Check out our guide to web performance <a href="/guide">here</a>.
役立つコンテンツ
Check out <a href="/guide">our guide to web performance</a>.

これは、すべての一覧を表示するショートカットが用意されているスクリーン リーダーで特に役立ちます。 ページ上のリンクを確認します。リンクのフィラーテキストが繰り返されている場合、 ショートカットはあまり役に立たなくなり、

<ph type="x-smartling-placeholder">
</ph> 「こちら」と表示された VoiceOver のリンクメニュー。 <ph type="x-smartling-placeholder">
</ph> VoiceOver（macOS 用スクリーン リーダー）の例（移動手段を示す） クリックします。

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

チェックボックスなどのフォーム要素にラベルを関連付ける方法は 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>

チェックボックスに正しいラベルが付けられている場合、スクリーン リーダーは 要素はチェックボックスのロールを持ち、オンになっています。名前は「Receive」 “プロモーションの特典は？”次に例を示します。

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

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