コーダーの100%がご存知であろう、HTMLの<img>に指定するalt属性。
SEO対策にも必須な属性なので、絶対入力するもの！
と、思っていた時期がありましたが、そうではないようです。
実は、未入力状態や属性の有無にもちゃんと意味があるようです。
さとみパターン別に、各入力例を解説いたします！
意味を正しく理解・設定することにより、
2024年4月1日施行のウェブアクセシビリティ義務化によるサイト改善に直結します。
視覚障害者にとって利便性が高くSEO改善に繋がるので、ぜひ覚えて帰りましょう。
そもそも「alt属性」とは？
alt（オルト）属性とは、ブラウザで画像が表示されないときに、代わりに表示するテキストを指定する属性です。
スクリーンリーダーや音声ブラウザが代替テキストを読み上げるので、目の見えない方の助けになります。
HTMLの<img>タグに下記のように記述します▼
<img src="画像パス" alt="ここに代替テキスト">【パターン別】代替テキストの考え方と具体例
画像が代替テキストに置き換えられてもコンテンツの意味が変わらないように設定しましょう。
よくわからない方は、下記のポイントを押さえつつ、徐々に理解を深めていけば自然とわかるようになっていきます。
alt属性は画像の説明でなはいので、「〜の写真」「〜の様子」はNG- 視覚に障害のあるユーザーのために、音声だけでページ内容を理解できる違和感のない文章構成を意識する
→音声では、ベタテキストと代替テキストが続けて読み上げられます。 - 本文などのベタテキストで画像の意味が説明されている場合、altは空欄でOK
【王道】代替テキストを入力するパターン
おもな使用箇所
- ロゴ
- 画像化されたテキスト
- 名前の記載がないプロフィール写真
- メニュー名のないアイコンボタン
「意味があるのに説明のない画像」の場合、代替テキストに置き換わっても内容が伝わる文章を入力します。
前述のポイントにも書かれている通り、画像の説明にならないよう注意！
間違った書き方
<img src="logo.png" alt="ロゴ">正しい書き方
<img src="logo.png" alt="Webデザインアトリエ">画像を開発者ツール（[F12]）で選択いただくとaltを確認できます。
あえてalt属性を空欄にするパターン
おもな使用箇所
- 装飾用の画像
- 名前の記載があるプロフィール写真
- メニュー名のあるアイコンボタン
本文などで意味が明確になっている画像は、あえて未入力状態にします。
代替テキストが必要ない、つまり、テキストに置き換える必要ありませんよ〜という意味合いになります。
注意点としては、空っぽ状態にすることに意味がありalt属性自体は必要だということです。
間違った書き方
<figure>
<img src="usako.jpg" alt="うさ子">
<figcaption>うさ子</figcaption>
</figure>正しい書き方
<figure>
<img src="usako.jpg" alt="">
<figcaption>うさ子</figcaption>
</figure>画像を開発者ツール（[F12]）で選択いただくとaltを確認できます。
文章を設定するパターン
おもな使用箇所
- 本文中の挿絵
本文と物語が繋がるよう、文章を書きましょう。
スクリーンリーダーや音声ブラウザを活用しているユーザーが「なんか文脈おかしくない？」と違和感を感じないよう、本を執筆する気持ちで設定してください。
間違った書き方
<p>突如、モンスターと遭遇しました。
<img src="yusya.png" alt="剣を握っている勇者">
仲間と協力し、見事にモンスターを打ち破りました。</p>正しい書き方
<p>突如、モンスターと遭遇しました。</p>
<p><img src="rpg.png" alt="勇者は剣を握り、モンスターと戦いました。"></p>
<p>仲間と協力し、見事にモンスターを打ち破りました。</p>画像を開発者ツール（[F12]）で選択いただくとaltを確認できます。
突如、モンスターと遭遇しました。
仲間と協力し、見事にモンスターを打ち破りました。
アイコンボタン（テキストなし）
何度も同じことを言ってしつこいかと思いますが、alt属性は画像の説明ではなく代替テキストを記入する属性なので、アイコン画像に「アイコン」と入れるのは×です。
間違った書き方
<button><img src="ico.png" alt="ホームアイコン"></button>正しい書き方
<button><img src="ico.png" alt="ホーム"></button>画像を開発者ツール（[F12]）で選択いただくとaltを確認できます。
アイコンボタン（テキストあり）
アイコン画像に代替テキストがなくても何のボタンかがわかるので、あえて空の属性を設置し、代替テキストが必要ないことを示します。
間違った書き方
<button><img src="ico.png" alt="ホーム">ホーム</button>正しい書き方
<button><img src="ico.png" alt="">ホーム</button>画像を開発者ツール（[F12]）で選択いただくとaltを確認できます。
【特別編】わけあってaltがつけられないパターン
おもな使用箇所
- SNSなどのサービスに投稿した画像
これは、altを付けたくても付けられない状態を指します。
（コードをいじれない時点で、属性の有無も設定できないかもですが…）
普通にコーディングする分には、あまりこのようにすることはないかもですね。
<img src="sns.jpg">まとめ
- 属性の有無だけで意味合いが変化する
- 未入力状態にも意味がある
- 代替テキストに置き換わっても違和感のない文章構成になるように記入する
- すでに文章で伝えたいことを書いている場合は、
alt属性にもう一度書く必要はない
難しく考えずに、画像が表示されていない状態をイメージすると理解しやすいかと思います。
中には「altの空欄は許さない。なんでもいいから絶対入れて！」という要求をするクライアントもいらっしゃいますが、念のためSEO観点の説明を簡単にしてあげるとご納得いただけるかもしれません。
この機会に正してコーディングの品質を上げちゃいましょう！
コメント