WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： mane
カテゴリー： マークアップ >その他

2024年4月から義務化となったウェブアクセシビリティ。
その中でも、今回は「alt属性（オルトぞくせい）」について記載していきます。

alt属性とは

画像の代替となるテキスト情報、それが「alt属性（オルトぞくせい）」です。
下記の様な「imgタグ（イメージタグ）」と呼ばれる画像を呼び出すタグには必ず付ける必要があります。

<img src="画像URL" alt="alt属性" width="000" height="000">

「alt=””」という記述は必ず必要になるのですが、実は中身は空でも問題ないのです。
その理由も含め「alt属性」について説明していきます。

alt属性の役割

• Googleの検索エンジンに評価されやすくなる
• 画像が見えない方、全盲の方もwebページの内容を理解しやすくなる

上記の様な役割があるのですが、今回は「画像が見えない方、全盲の方もwebページの内容を理解しやすくなる」こちらの役割に着目して考えてみましょう。
画像が見えない方、全盲の方は音声読み上げ機能やソフトを使用してページ全体を理解していきます。

下図形式の画像の「alt属性」に「alt=”株式会社 アイ・セプト 山田太郎”」と入力し、音声を読み上げた場合・・・
「株式会社 アイ・セプト 山田太郎（画像に設定したalt属性）株式会社 アイ・セプト 山田太郎（テキストの文章）」
この様に2度、同じ内容が読み上げられる事となります。

ウェブアクセシビリティファーストな書き方

上記の様に、すでに画像の説明がテキスト化されている場合は、alt属性の記述は「空」にするのがよいと考えられます。
WCAG2.0（2.1）では「支援技術が無視すべき画像に対して、img 要素の alt テキストを空にして、title 属性を付与しない」としています。
https://waic.jp/docs/WCAG-TECHS/H67
つまり、装飾のための画像には、「alt属性」の記述は「空」にしても問題ないということです。

終わりに

Apple公式サイトに入るとすぐに製品画像が並び、その下に製品名がテキストで入力されています。
製品画像の「alt属性」を確認してみると、「alt属性」はついているが中身は「空」の状態になっていますね。

ウェブアクセシビリティ義務化に伴い、より多くの人が快適に閲覧できるWebサイトが増えると良いですよね。
私達も常に情報収集を行い、より良いWebサイトを生み出していきます！