適切な代替テキストの書き方
Oct 06, 2021この記事はSupercoolのブログ: How To: Write Good Alt Textの翻訳転載です。著者ケイティ・パリーさんの許可を得て公開しています。
代替テキストとは何か、なぜ重要なのか？
代替テキストとは、何らかの理由で画像を表示できない場合に、その画像の意味を理解してもらうための短い説明文です。
適切に記述された代替テキストは、ウェブサイトのアクセシビリティや検索エンジン最適化（SEO）にとって重要です。
アクセシビリティ
- 画像の代わりにスクリーンリーダーで読み取ることができるため、目の不自由な方や視覚障がいのある人でも画像コンテンツにアクセスできます。
- 特定の感覚処理や学習障害をお持ちの方に便利です。
- 画像ファイルが読み込まれていない場合や、ユーザーが画像を表示しない設定にしている場合に、ブラウザで画像の代わりに表示されます。
SEO対策
適切な代替テキストは、画像に意味と説明を与えるので、検索エンジンが検索結果を返す際に使われます。これを逆に考えると、適切な代替テキストは、検索エンジンに、あなたのウェブサイトをランク付けするための、より多くの、より良い情報を与えることになります。
ユーザーフレンドリーで親切な説明をすればするほど、検索エンジンのロボットにもコンテンツを理解してもらいやすくなります。
ご存知でしたか？
画像の代替テキストを管理できるのは、あなたのウェブサイトだけではありません。Twitterにアップロードした画像にも代替テキストを追加できます。
代替テキストはツイート自体には表示されませんが、スクリーンリーダーや点字ディスプレイなどの支援技術を使っている人は、文字による説明にアクセスできます。これは素晴らしいアクセシビリティ機能ですが、この業界ではあまり使われていないようです。
（Twitterの画像に代替テキストがあるかどうかは、コードを調べることで確認できます🤓）
適切な代替テキストを書くためのヒント
画像に実用的な代替テキストを追加することは、ウェブサイトをよりアクセシブルにする最も簡単な方法の1つです。しかし、これは必ずしも簡単なことではなく、下手をするとアクセシビリティに悪影響を及ぼす可能性があります。多くの場合、代替テキストがない方が、ひどい（迷惑な、意味のない）代替テキストよりも良いのです。
ここでは、正しい方法で代替テキストを作成するためのヒントをご紹介します。
1. 具体的かつ簡潔に
画像の内容を論評せずに説明します。民族や性別、写真の外で起こっていること、被写体の動機などを推測せず、見たままを伝えましょう。
私が聞いた中で最も良い提案は、電話で画像を簡単に説明する方法を考えることです。
通常は数語で十分ですが、時には一文が必要な場合もあります。なお、スクリーンリーダーでは、代替テキストが125文字程度でカットされることがありますので、その制限内に収めるようにしましょう。
2. 「〜の画像」や 「〜の写真」で締め括らない。
アクセスしているものが代替テキストであることは、人にも機械にも明らかでしょう。
画像を多用したページでスクリーンリーダーを使ったときに、次のように読まれたらどれほどイライラするか想像してみてください。「劇場の画像」「フロントエリアの画像」「外壁のサインの画像」「ボックスオフィスチームの画像」「オーディトリアムの画像」「ステージの画像」.....ゲーッ!
しかし、文脈を理解してもらうのは良いことなので、顔写真、イラスト、チャート、スクリーンショットなど、画像の種類を説明するのは有効です。
3. キーワードは控えめに
画像を説明する際に、1つまたは2つの検索上位キーワードを適切に組み込むことができれば、素晴らしいことです。これはSEOにも役立ちます。しかし、それは事実に基づいて、控えめに行われた場合のみです。
検索エンジンは、文脈的にひどい（つまり役に立たない）代替テキストを認識することはできませんが、キーワードを詰め込んだ場合には検索順位が下がる可能性があることを、Googleは知っています。そのため、代替テキストを必要とする画像については、具体的かつ簡潔に記述することを第一に考えてください。
4. 画像の一部にテキストを入れる
画像の一部にテキストが含まれている場合は、説明の一部として必ず転記してください。繰り返しにならない限り...。
5. 同じことを繰り返さない
代替テキストは、すでにページに記載されている内容を繰り返す場合には必要ありません。例えば、画像のすぐ近くに書かれるキャプションなどです。あるいは、オンラインイベントの「画像」がデザイン性の高いタイトル処理で、あなたがすでにイベントのページにいる場合、代替テキストとしてプレゼンテーションのタイトルを追加する必要はありません。なぜでしょう？それは、ページの見出しにすでにあるからです。
6. 装飾的な画像には代替テキストを追加しない
イメージ画像は、会場の写真やショーの報道写真のようなものです。これらの画像は、文脈に沿って情報を伝えるのに役立ちます。
装飾画像は、ページの仕切り線やブランドのグラフィックなどのことです。見栄えを良くしたり、ページ内のコンテンツを視覚的に分割したりします。これらの画像は、文脈上の重要性や意味を持たないため、代替テキストが付けられても、ページの理解を深める助けにはなりません。
装飾画像は、「コンテンツ」として追加するのではなく、コード内に含めるのが理想的です。しかし、画像としてアップロードする必要がある場合は、代替テキストを追加しなくても問題ありません。スクリーンリーダーは単にスキップするだけなので、狙い通りになります。
代替テキストをテストする
画像の説明文を、そのページの他のコンテンツの文脈の中で、声に出して読んでみてください。意味があり、何か役に立つことがあれば、それは良い代替テキストです。
代替テキストの例
BAD：グリズリーと呼ばれることもあるヒグマの顔がズームアップされ、遠くを見つめています。お腹が空いているのか、それとも何か脅威を見つけたのか。
ここまで言う必要がある場合は、ページのテキストの一部として追加しましょう。代替テキストは短くしてください。そして忘れてはいけないのが、仮定の話をしないことです。
BAD：クマ、ヒグマ、グリズリー、グリズリーベア、哺乳類、肉食動物
声に出して読んでみてください。これでは参考になりません。Googleにも嫌われます。
OK：ヒグマ
これはいいのですが、イメージをもっと明確に表現できます。
OK：クマの顔のアップ
数語で何が写っているのかを明確に理解することができ、仮定ではない。(これがどんな種類の熊なのかは全くわかりませんが。)
BAD：看板
これは本当に役に立ちません。「看板」とは何を意味するのでしょうか？広告の看板？プラカード？代替テキストがないほうが、これよりはマシでしょう。
NG：お持ち帰り、テイクアウェイ、フィッシュアンドチップス、フィッシュ、チップス、ショップ、フード、ファーストフード
キーワードの詰め込みはやめてください。
GOOD：お待ち帰りの看板
悪くはないけれど、もっと良いものができるはずです...。
GOOD：「フィッシュ＆チップスのお持ち帰り」の看板
「看板」のテキストを含めて、画像を明確に説明しているが、過剰で役に立たないような事細かな説明はありません。画像を明確に理解するための「他にもたくさんの食べ物や飲み物があります」というような追加のテキストは必要ありません。
窓辺の観葉植物
BAD：窓辺の観葉植物
これのどこがいけないのでしょうか？説明的で、明確で、短い......？いいえ、キャプションを繰り返しています。必要ありません。
GOOD：（何も書かない）
キャプションですでに適切に説明されているので、この画像の代替テキストは「なし」が正解です。
