概要
img要素の中のalt属性＝画像の代替テキストの書き方にもう悩みたくなかったのでウェブアクセシビリティイニシアチブ（WAI）のサイトよりAn alt Decision Tree （「alt属性決定木」）を翻訳しました。
このような技術的なテキストを翻訳した場合、いかにも翻訳調のかたい文章になりがちなので、あえて意訳をした部分もある点をご了承ください。
とはいえ、明らかな誤訳があった際にはコメントでご教示いただけると助かります。随時修正します。
Alt属性決定木
| その画像は文字を含んでいますか？ | |
|---|---|
|
いいえ: ↓ 次の質問へ |
はい: …文字を含む画像のすぐそばに「本当の」テキストもある alt属性は空にしておきましょう。詳しくは Decorative Imagesを参照。 |
|
はい: …画像は純粋に視覚的な装飾目的である alt属性は空にしておきましょう。詳しくは Decorative Imagesを参照。 |
|
|
はい: …画像には固有の機能がある 例：アイコン alt属性にはその画像の機能を伝える言葉を入れましょう。詳しくは Functional Imagesを参照。 |
|
|
はい: …その画像は他の何ものも表わさない文字そのものである その文字画像に書いてあるテキストをそのままalt属性に書きましょう。詳しくはImages of textを参照。 |
|
| その画像はリンクまたはボタンで、その画像がないとリンク/ボタンを押すのが困難ですか？ | |
|---|---|
|
いいえ: ↓ 次の質問へ |
はい: …alt属性にはリンク飛び先ページの情報、またはボタンを押したときに何が起きるか（「リセット」「送信する」etc.）を書きましょう。詳しくは Functional Imagesを参照。 |
| その画像はそのページや、書いてある文脈に意味を与えていますか？ | |
|---|---|
|
いいえ: ↓ 次の質問へ |
はい: …アイキャッチ目的の画像やイメージ写真である alt属性にはその画像の意味を伝える簡単な説明書きを入れましょう。詳しくは Informative Imagesを参照。 |
|
はい: …グラフや複雑な情報を表している その画像が表す情報を集約してalt属性にまとめるようにしましょう。詳しくは Complex Imagesを参照。 |
|
|
はい: …その画像を表す「本当の」テキストが近くに書いてあり、altまで書くと蛇足かもしれないとき alt属性は空にしておきましょう。詳しくは Decorative Imagesを参照。 |
|
| その画像はユーザーに何かを指示したりしておらず、純粋に装飾だけが目的ですか？ | |
|---|---|
|
いいえ: ↓ 次の質問へ |
はい: alt属性は空にしておきましょう。詳しくは Decorative Imagesを参照。 |
| その画像は上記のいずれにも当てはまらない。 |
|---|
| この決定木が全てのケースを網羅できているわけではありません。画像の代替テキストについてのもっと詳しい情報は Image Concepts Pageを参照してください。 |
所感
こうしてみると意外とalt属性は空っぽでいいパターンが多かったですね。
「いやしかしSEO的にはちゃんとalt属性にテキストを入れたほうが強いし…」という声が聞こえてきそうですが、2017年12月に改定されたGoogleの検索エンジン最適化（SEO）スターター ガイドには「alt テキストにキーワードを並べたり、文章全体をコピー＆ペーストしたりする」や「スパムと見なされるような長すぎる alt テキストを記述する」ことは避けるべき方法と明記されています。アクセシビリティの観点はもちろんのこと、SEOの観点でもalt属性の付け方・考え方をアップデートさせておくのが良さそうですね。