アクセシビリティ×SEO対策！マテリアルデザインにおけるalt属性の書き方

Webサイトを運営するにあたってSEO対策は無視できない課題です。今回はマテリアルデザインにおけるalt属性に焦点を当て、SEO対策に効果的なalt属性の設定方法をご紹介します。

マテリアルデザインとは？

マテリアルデザインはGoogleが発表したデザインのガイドライン。

見やすく、ユーザーが直感的に操作できるようなデザインが特徴で、Webサイトやアプリのデザインをより良くしたいと考えている人におすすめのデザインシステムです。

マテリアルデザインを取り入れたい方は、Googleが公開しているガイドラインをご覧ください。（https://m3.material.io/）

alt属性（代替テキスト）のおさらい

サイトに画像を挿入する際おなじみのalt属性。役割は画像の代わりになるテキスト情報を設定する時に使われます。代替テキストとも呼ばれることも多いですね。

目の不自由なユーザーに対しては代替テキストが読み上げられることで画像が見えなくても何の画像か知ることができます。また、何らかの理由で画像が表示されない場合は、画像の代わりにalt属性に設定したテキストがサイトに表示されます。

alt属性の設定のコツ

短いテキストで簡潔に

マテリアルデザインにおいてalt属性の最大文字数は 125文字以内と定められています。

その理由は、画像の代わりに表示される代替テキストは長すぎると切り捨てられる可能性があります。また、代替テキストを読み上げるスクリーンリーダーのほとんどは125文字を超えるとテキストを読み上げません。

前後の文脈に沿ったテキストにできると尚良しです！

○良い例
夜の東京タワーの景色

×悪い例
東京タワーと夜景の画像。2014年に日本を観光で訪れた際に撮影した写真です。東京タワーの近くにある展望台から撮影しました。

キーワードを含める

代替テキストにターゲットのキーワードを含めるとSEO対策に効果があると言われています。ただし闇雲にキーワードを盛り込んだり、ただキーワードを羅列するのはNGです。

あくまで画像を説明するためのものということを忘れず、うまくキーワードを盛り込みましょう。

×悪い例
東京、夜景、東京タワー、タワー、日本、観光地

「～の写真」「〜の画像」を含めない

丁寧に代替テキストを設定する心がけは大切ですが「〜の写真」など余計なテキストは不要です。簡潔に書くことを心がけましょう

×悪い例
東京タワーの画像

画像に重要なテキストが書き込まれている

スクリーンリーダーは画像に書き込まれたテキストを読み上げることができません。画像に重要なテキストが書き込まれている場合はそのテキストをalt属性に設定しましょう。

alt属性は省略できる

画像にalt属性は必ず設定しなければいけないわけではありません。時には省略した方が良い場合があります。

省略するというのはalt属性を書かないというわけではなく、「alt=””」のように書きます。

alt属性をまるごと省略するとPSI（PageSpeed Insights）の減点対象になるから要注意！

隣接テキストと重複する場合

画像の近くにある隣接テキストが画像の説明を含む時、代替テキストと内容が重複してしまうのでalt属性を省略できます。

まとめ

alt属性の設定は以下の点に注意して設定しましょう

• 125文字以内で簡潔に
• 前後の文脈に沿わせる
• キーワードを含める（羅列する書き方はNG）
• 「～の写真」「〜の画像」は省略する
• 画像に書き込まれたテキストはalt属性に設定
• 隣接テキストと重複するときは省略する「alt=””」

参考サイト

https://m2.material.io/design/usability/accessibility.html#writing