ウェブアクセシビリティって？視認しやすい色についてと画像の説明

ウェブアクセシビリティ改善の第2回です。今回は改善をするにあたってより範囲が広くなりやすい色と画像の改善について解説していきます。

前回の記事はこちら↓

視認しやすい色を使用しているか

色は組み合わせによって視認のしやすさが変わってきます。また、彩度によっても変わってきますので、組み合わせや明暗に気を付けて使用していきましょう。

緑と赤

　緑と赤は「補色」と言って色相環の反対色ですが、ほかの補色と比べると視認がしにくくなる組み合わせです。白い線で囲むなどして色の境界線を明確にしてあげることで使用しやすくなるかと思いますので、調整してみてください。

青と紫

紫色は赤色を認識しにくい人から見ると青色に近い色に見えてしまいます。青い背景に青い文字があっては視認できないように、認識できる色の数が少なくなると同じ色に見えてしまう可能性が高くなるので、使用する際には注意が必要です。

彩度が低い色の組み合わせ

やわらかい印象を与えるために使用しやすい彩度の高い色は背景と文字、両方に使用することで視認がしにくくなってしまうことがあるので、文字として使用する場合は背景を暗めの色に、背景色で使用する場合は文字を暗い色にしてあげるなどメリハリを与えることで視認しやすくなります。

色の組み合わせで視認しやすいかどうかを確認するには、「コントラスト比」を確認するのがわかりやすいです。コントラスト比とは簡単にいうと色の明暗の差です。明暗の差が大きいほど、視認しやすいといわれています。

大きい文字や太字に関しては3以上、小さい文字や通常の文字の場合は4.5以上が基準とされています。コントラスト比を調べるには、ウェブで「コントラスト比チェッカー」と調べて出てくるチェッカーを使用したり、デザインをしている段階であれば、figmaなどでコントラスト比を確認できるようになっているので活用してみてください。

画像の説明が正しくされているか

イメージなどを伝えるために画像を配置したり、ウェブでは表しにくいグラフや表を画像で配置する場合、画像の説明を入れておかないと画像で表示されている部分は目が見えない方などには正しく伝わりません。

どのような意図で画像を配置しているかによって変わりますが、できるだけ同じように情報を伝えるために説明はきちんとするようにしましょう。画像の説明をするときには3通りの方法があります。

imgタグのalt属性を使用する

imgタグで画像を挿入したときに使用するalt属性に画像の説明を入れることでページ上には表示されないけれど読み上げ機能を使用したときに画像の説明を読み上げることができます。キャプションテキストとして表示させたくはないが、説明がないのも困るというときに利用します。

注意点としてはSEO対策としても使用している場合があることです。SEO対策として使用する際には、alt属性に入れる文字数は40文字程度が適切とされています。それ以上を超えても問題はありませんが、文字数が多すぎても伝えたい情報が正しく伝えられなくなる可能性があるので注意しましょう。

 <img src=”画像のパス” alt=”画像の説明（40文字程度）”>

figcaption要素を使用する

figcaption要素は画像の説明をページ上にも表示させることができます。alt属性との違いはページ上に表示させたいかさせたくないかというところが大きいかと思います。こちらも文字数には気をつけて使用しましょう。

また、もう一つ注意すべきはalt属性と同じ内容を入れないことです。同じ内容を入れると同じ説明が２回読み上げられることになってしまうので、これもアクセシビリティ改善としてはあまりよくないです。この場合はalt属性には何も入れずfigcaptionにだけ説明を入れてください。

<figure>
    <figcaption>この画像は〇〇です。</figcaption>
    <img src=”画像のパス” alt=””>
</figure>

そしてfigcaption要素を正しく使用する方法は、figure要素の中に入れることです。figure要素に入っていれば画像の前後どちらにfigcaptionが入っていても問題ありませんが、figure要素の中にないと正しく機能しないので気を付けてください。

また、figcaptionに似たcaption要素もありますが、これはtable要素で使用する子要素になるので要素の入れ間違いには気を付けましょう。

見えない要素を使用する

3つ目は、SEO対策とは別でより詳細な画像の説明を入れたいときに使用する方法です。画像の一番近い位置でpタグなどに画像の説明を入れて、pタグ内にstyleでdisplay:inline-block;width:0;height:0;clip:rect(0,0,0,0);overflow:hidden;を入れます。

こうするとページ上で表示されず読み上げ機能を使用する人には読み上げられる説明を入れることができます。この方法の場合、文字数に制限は特にないので、グラフの説明や組織図など複雑な画像の説明に用いるとよいと思います。

<img src=”画像のパス” alt=”画像の説明（40文字程度）”>
<p style="display:inline-block; width:0; height:0; clip:rect(0,0,0,0); overflow:hidden;">この画像は〇〇です。</p>

最後に

第2回では色の組み合わせと画像の説明の改善方法を解説いたしました。少しでも気にかけていただき、多くの方が利用しやすいウェブサイトが増えることを願っております！

次回はよりHTMLで使用している様々なタグの使い方の理解も深まる、正しい使い方ができているかをメインに解説していきます！