これは何

alt属性の好ましい指定方法をまとめた記事です。
嘘か真か、Appleやディズニーのサイトでaltがしっかりしてなかったので訴えられた例があるそうです。
親切なalt属性の指定をしたら、ハッピーな人が一人でも増えないかなと思い記事にしました。

対象読者

デザイナー
スタイルのコーディングをするエンジニア
記事を書くときに img タグなどをさわることがある人

alt属性の役割

alt属性の役割は大きく分けて3つです。

画像が表示されないときの代替テキスト
- 画像を読み込めなかった時
- モバイルのデータローミングをOFFにしている
- 画像を非表示設定している
- 身近な例だとTeamで貼り付けた画像をSlackでは展開しないので代替テキスト表示
スクリーンリーダーなどでの読み上げ
検索エンジン最適化（SEO）

alt属性を適切に書く

通常の場合

記事内などで書くときは下記のようなパターンが推奨されています。
例えば下記の画像が、記事内に掲載されたとします。

Bestな例

<img width="300" alt="快晴の雪山で着ぐるみを着てスノーボードをしている人" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/215239/c75f36f3-f4dd-6b94-3221-1e3897c1e03e.png">

Betterな例

<img width="300" alt="着ぐるみでスノーボード" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/215239/c75f36f3-f4dd-6b94-3221-1e3897c1e03e.png">

Badな例

<img width="300" alt="IMG_5704.JPG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/215239/c75f36f3-f4dd-6b94-3221-1e3897c1e03e.png">
<img width="300" alt="着ぐるみ、メラルー、スノボ、スノーボード、雪山、レジャー" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/215239/c75f36f3-f4dd-6b94-3221-1e3897c1e03e.png">

SEOのためにalt属性にキーワードを詰め込むとUXが低減して逆効果だという説があります
- スクリーンリーダーで単語の羅列を読み上げられても嬉しくはないですね

より詳しいパターンはこちらを御覧ください
https://www.w3.org/WAI/tutorials/images/informative/

あえてalt属性を空にする場合

<img src="画像のURL" alt="">

あえて空にすることで、スクリーンリーダーに読み上げをさせません。
クローラーは前後の文章から画像を判断するそうなので、問題ないです。

こんな場合が想定されます

装飾的な画像の場合

ページデザインの一部として使用される
- ボーダー用の画像など

例

テキストリンクの一部としての装飾画像
- Qiitaのユーザーアイコンとユーザー名がセットになっているリンクなど

例

代替テキストが隣接する画像
- Qiita 募集ページで、サムネイルのすぐ横にタイトルがあるなど
- note.comの記事一覧など

例

雰囲気を伝えるだけのアイキャッチで使用される画像

前後に情報が充実している場合

代替テキストが隣接する画像に近いイメージです

alt属性を書かないとどうなる？

コードで表現すると下記の状態です。

<img src="画像のURL">

この時、最初に紹介したalt属性の役割に照らし合わせると…

画像が表示されないとき
- 何も表示されません
スクリーンリーダーなどでの読み上げ
- ファイル名が読み上げられることが多いようです
検索エンジン最適化（SEO）
- 評価されません（は言いすぎかもしれませんが）

一番問題なのは2のスクリーンリーダーです。
私達は日本語を使っているので、画像名が何かしら意味のある英語だったとしても、いきなり英語になったらちょっとびっくりします。
Qiitaなどでは、ユーザーが自由に画像名をつけられるので、最適な文字列とは限りません。
note.comの事例もありますので後述します。

alt属性の読み上げが必要ないときは、alt属性を抜くのではなく、alt="" と明示的に空にすると親切です。

アクセシビリティも達成できる

WCAGではalt属性について下記の要件があります。
適切なalt属性を書くだけで、それなりの量を達成できると思いませんか？

検証方法はこの辺です↓

note.comは昔alt属性がなかった

有名なnoteでは、2019/9/18からalt属性を挿入できるようになったそうです。
アクセシビリティ対応の一環で、より多くの方がみなさんの記事を読めるように、ファイル名がaltに挿入されるようになりました。音声読み上げブラウザなどで読み上げられます。（※新規投稿記事のみの対応となります｜note公式｜note

それまでの記事はどうだったの？というと、下記の状態です。

<img src="画像のURL">

noteの画像ってランダムな文字列に変換されるので、画像名が無意味な文字列として読まれて、意味不明になってしまいます。
2018年に投稿された記事の画像を拝借いたしました
※今でもランダムな文字列に変換されます。

<img src="https://assets.st-note.com/production/uploads/images/7187785/picture_pc_ef5203c969f90a6168a0b37f8bec6182.jpg?width=800" width="1400" height="3541" class="is-slide lazyloaded" style="width: 372px; height: 939px;" data-src="https://assets.st-note.com/production/uploads/images/7187785/picture_pc_ef5203c969f90a6168a0b37f8bec6182.jpg?width=800">

noteのCXOの深津さんはこんな記事を書いています。
noteにおける画像ALT情報について｜深津貴之 (fladdict)｜note

noteの画像ALT情報の件に関しては、土下座しかありません。

で始まります。
かなり衝撃的なフレーズだと私は感じました。

こういう検証をしている人もいました。
noteの新機能「ファイル名がalt属性に挿入」はどのように読み上げられるか｜Hiroki Tani｜note

Qiitaとかどうなの？

回線が遅い国とかは、画像が表示されるまでは代替テキストが表示される
Qiitaも一応全世界に影響あるサービスだから、自分なりに書いてあるとよさそう
- ユーザー投稿型だと、どうユーザーに委ねるか考えるの難しそう
- 記事は各ユーザーの持ち物と考えると、その他のQiitaが提供しているUIは責任をもってやっていきたい

まとめ

親切なalt属性の指定するサイトが少しでも増えて、ハッピーな人が一人でも増えたら幸いです。

参考

https://www.w3.org/WAI/tutorials/images/
https://www.w3.org/WAI/tutorials/images/informative/
https://www.w3.org/WAI/tutorials/images/decorative/
https://note.com/fladdict/n/n3c4b172c4e2c
https://waic.jp/docs/UNDERSTANDING-WCAG20/Overview.html
https://note.com/haiji505/n/n8037ca0b4f93

親切なalt属性の指定ってどんなのだろう