これは何
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属性を書くだけで、それなりの量を達成できると思いませんか？
- ガイドライン 1.1: すべての非テキストコンテンツには、拡大印刷、点字、音声、シンボル、平易な言葉などの利用者が必要とする形式に変換できるように、テキストによる代替を提供すること。
- 1.4.5 文字画像: 使用している技術で意図した視覚的提示が可能である場合、文字画像ではなくテキストが情報伝達に用いられている。ただし、次に挙げる場合を除く: (レベル AA)
- 1.4.9 文字画像 (例外なし) : 文字画像は、純粋な装飾に用いられているか、テキストの特定の提示が伝えようとする情報にとって必要不可欠である場合に用いられている。 (レベル AAA)
検証方法はこの辺です↓
- H37: img 要素の alt 属性を使用する
- G94: 非テキストコンテンツに対して、それと同じ目的を果たし、かつ同じ情報を示す、簡潔なテキストによる代替を提供する
- H67: 支援技術が無視すべき画像に対して、img 要素の alt テキストを空にして、title 属性を付与しない
- H2: 同じリソースに対して隣接する画像とテキストリンクを結合する
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