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