みなさん、ウェブサイトで画像を載せるときに代替テキストを設定していますか？
ウェブアクセシビリティを高めるためには代替テキストの設定が必須です。
前回、前々回の記事で代替テキストの基本的な設定方法や、適切に設定するためのポイントをご紹介しました。
今回はこれまでの内容を踏まえ、具体例を挙げながら代替テキストの設定内容について解説していきます。
実務でよく出てくるものをご紹介しますので、ぜひブックマークして何度も見返してみてください！
ここまでの振り返り
前回と前々回においてもご説明しましたが、代替テキストとはウェブサイト上の画像に紐づけて設定するテキストのことを指します。
これは、通信制限や画像の読み込みエラーなどで画像が表示されない状況や、音声読み上げ機能の利用時に画像の代わりに情報を提供する役割を果たし、あらゆる人々にとって重要な情報源となります。
さらに、検索エンジンがウェブサイトに掲載されている画像の内容を理解するための手がかりにもなるため、SEO対策にも有効であると考えられています。
また、前回の記事では代替テキストを適切に設定するために必要な3つのポイントをご紹介しました。
その3つとは以下のとおりです。
- 代替テキストは簡潔にする
- 全ての画像に意味のある代替テキストを設定しない
- 意味のあるテキストを設定しない場合、必ず空のalt属性を設定する
このポイントをおさえずに代替テキストを設定をしてしまうと、かえってウェブサイトの使い勝手が悪くなってしまう可能性があることもお伝えしました。
ここからは、以上の内容を踏まえて具体的な例を見ていきましょう。
具体例解説
ロゴなどの文字画像
ロゴなどの文字画像の場合、基本的には画像に書かれた文字をそのまま代替テキストとします。
【よくあるロゴの場合】
ウェブサイトのヘッダーにこのようなロゴがあるとします。
この場合の代替テキストは「BirdNest nature」とするのが適切でしょう。
ロゴ画像の場合、大切なのはイラストよりも社名やサービス名です。
鳥の巣のイラストが入っていますが、簡潔に会社名、サービス名を伝えるためにも文字をそのまま代替テキストとするのが良いでしょう。
株式会社、有限会社などの法人格については特に決まりがありません。
「株式会社BirdNest nature」のように正式名称にするのか、ロゴに合わせて「BirdNest nature」だけにするのかなど、このあたりは企業ごとに判断が分かれます。
キリンホールディングス株式会社（Kirin Holdings Company, Limited）は、キャッチコピーまで含めて代替テキストを「よろこびがつなぐ世界へ KIRIN キリンホールディングス」と設定しています。
アステラス製薬株式会社（Astellas Pharma Inc.）は、ロゴ画像では「astellas」と表記されているのに対し、代替テキストを「Astellas Pharma Inc.」と設定しています。
【チャコウェブの場合】
チャコウェブのロゴは代替テキストを「チャコウェブ」と設定しています。
画像通りならば「CHACO-WEB」と設定するところですが、社内で相談し「チャコウェブ」にしました。
理由は、テキストリーダーの設定によっては「CHACO-WEB」だと「チャコマイナスウェブ」と読み上げられることがあるからです。
表記の正確性と読み方の正確性を天秤にかけ、弊社では読み方を的確に伝える方を優先しました。
ロゴ以外の文字画像
ロゴ以外の文字画像の場合は、文字として使われているならそのままを代替テキストとします。
装飾として使用されている場合は、代替テキストを空に設定しましょう。
【文字として使用されている場合】
このような画像を見出しとして設定しているウェブサイトがあるとします。
この場合は画像の文字が見出しの役割を果たしているので、代替テキストは「Message」とします。
【装飾として使用されている場合】
上のような、画像とテキストを組み合わせた見出しがあるとします。
「代表挨拶」はテキストで実装されており、「Message」が画像で挿入されている場合、この画像は装飾目的と言えます。
代替テキストは空にするのが適切でしょう。
ちなみに、「Message」という代替テキストをこの画像に設定したらどうなると思いますか？
正解は、テキストリーダーを使用したときに「Message 代表挨拶」と読み上げられます。
1か所だけならそれほど違和感を感じないかもしれませんが、他の部分も同じように設定したとすると「Service サービス」「Price 料金」「Voice お客様の声」「Message 代表挨拶」「About 会社概要」「Contact お問い合わせ」のように読み上げられてしまいます。
少し雑多な感じがしませんか？
「サービス」「料金」「お客様の声」「代表挨拶」「会社概要」「お問い合わせ」のように読み上げをすっきりさせるためにも、装飾として使用されている文字画像の代替テキストは空にした方が良いでしょう。
装飾的な画像
次に、文字画像以外の装飾的な画像について見ていきましょう。
文字画像以外の装飾的な画像というのは、ラインや仕切りとして使用されている画像、背景として使用されている画像のことなどです。
これらは視覚的に装飾を施しているものの特に読み上げる必要はないので、代替テキストは空で問題ないかと思います。
【区切りに画像を使用している場合】
セクションとセクションの区切りとして、このような画像が挿入されているとします。
この場合、この画像は装飾的な画像となるので、代替テキストは空にします。
アイコン
アイコンはテキストと一緒に使用されているか、単体で使用されているかで対応が分かれます。
【テキストと一緒に使用されている場合】
上のようなボタンがあった場合、虫眼鏡アイコンの横に「検索」という文字が入っているため、これが検索ボタンであることが分かります。
この場合、虫眼鏡アイコンは検索ボタンを装飾しているアイコンなので、代替テキストは空にするのが適切です。
【単体で使用されている場合】
上のように、虫眼鏡アイコンだけのボタンがあったとします。
この場合、これが検索ボタンであることを視覚的に伝えることはできますが、テキストリーダに伝えることはできません。
そういった場合は、アイコンの代替テキストを「検索する」などにしてテキストリーダーにも検索ボタンであることを伝える必要があります。
注意する点は「虫眼鏡のアイコン」としないようにすることです。
虫眼鏡のアイコンが伝えたいことは「虫眼鏡のアイコンである」ということではなく「検索ボタンである」ということです。
同様に、「手紙のアイコンをクリックするとお問い合わせフォームへ飛ぶ」というリンクを設置した場合、「手紙のアイコン」ではなく「お問い合わせはこちらから」などとする方が適切です。
説明を補足する画像
説明を補足する画像の場合、画像に含まれる情報と同じような情報が画像前後の文章に含まれていないかをまず確認しましょう。
以下はブログ記事を想定した例です。
【画像の情報が本文から得られる場合】
上の例では、画像に含まれている「3匹のコーギーが並んでいて、名前はムギ、ココ、モカである」という情報を本文中から得ることができます。
ですので、この場合の代替テキストは空にしてしまうか、もしくは「3匹のコーギーの写真、詳細は上記」というような軽い説明で問題ないかと思われます。
【画像の情報が本文から得られない場合】
この場合、画像に含まれている情報を本文中から得ることができません。
ですので、この場合の代替テキストは画像の情報をしっかりと補足する必要があります。
「3匹のコーギーの写真、名前は左からムギ、ココ、モカ」といった感じの代替テキストを設定すれば適切かと思います。
イメージ画像
イメージ画像は、伝えたいイメージを代替テキストに設定するか、もしくは空にします。
レストランのホームページを想定した例を見てみましょう。
この場合、代替テキストは空にするか「ゆったりとした店内で食事を楽しむ様子」といった雰囲気を伝える文言にするのがおすすめです。
注意しなければいけないのは、写真の内容を事細かに説明しすぎないことです。
なぜなら、写真の内容を説明しすぎてしまうと、伝えたいイメージが伝わらなくなってしまう可能性があるからです。
例えば、上の写真の代替テキストを「テーブルの上にパスタとサラダが3セット置いてあり、ソファに座った3人はグラスを持って乾杯している」としてみましょう。
こうすると、最初の「ゆったりとした店内で食事を楽しむ様子」としたときよりも画像の情報を伝えることができています。
ですが、画像の雰囲気が上手く伝わっているのは最初の方ではないでしょうか？
イメージ画像の場合は情報を正確に伝えるよりも、どんなイメージ、雰囲気なのかを伝えた方が効果的かと思います。
あくまでイメージ画像のときの話ですので、画像の情報を正確に伝える必要がある場面との使い分けに注意です。
まとめ
この記事では、具体例を挙げながら代替テキストの付け方をご紹介しました。
代替テキストを付けるとなると、どういった内容が適切か悩む場面が多くあると思います。
実際のホームページやブログで多く出てくるパターンをご紹介しましたので、この記事を参考にぜひ考えてみてください！
