Help us understand the problem. What is going on with this article?

もうalt属性で迷いたくない

More than 1 year has passed since last update.

概要

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属性の付け方・考え方をアップデートさせておくのが良さそうですね。

cloudpack
Amazon Web Services (AWS) の導入設計、環境構築、運用・保守をサポートするマネジドホスティングサービス
https://cloudpack.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした