2016年4月に施行された障害者差別解消法により、ウェブアクセシビリティを確保することは努力義務となりました。
そして2024年4月1日に改正障害者差別解消法の施行があったことで、ウェブアクセシビリティへの関心は高まっています。
そこで今回はウェブアクセシビリティについて解説します。
もくじ
◆Webアクセシビリティとは
Webアクセシビリティとは、ウェブサイトやウェブアプリケーションが、障害を持つ人々や、さまざまな状況下にある人々にとって利用しやすいかどうかを示す概念です。
ここで勘違いしないように注意したいのが、「障害者限定」ではなく、「障害者を含む、あらゆる状況下の人々」が利用しやすかどうかという点です。
あらゆる状況下とは、なんらかの事情によりマウスが使えなくなってしまったユーザーでもキーボードだけで操作できるようにすることなどを指します。
障害の有無に関わらず、Webを利用する全ての人が簡単に情報を得られるようなサイトづくりをすることが重要と言えます。
◆ウェブアクセシビリティの基準について
「誰もが利用しやすいサイト」と言っても、明確な基準がなければ制作者の主観になってしまいかねません。誰もが利用しやすいサイトを誰もが作れるように、ウェブアクセシビリティには「WCAG（Web Content Accessibility Guidelines）、JIS X 8341-3:2016、ISO/IEC 40500:2012」という3つのガイドラインがあります。
ウェブアクセシビリティを向上させるためには、これらの規格を基準にしましょう。ウェブアクセシビリティについて触れてこなかった企業の方は、まず最初にウェブアクセシビリティについて深く知る必要があります。ガイドラインにはどのようなことが書かれているのか、具体的にどのようなことを実行すればいいのかを確認するところから始めてみましょう。
また、自社Webサイトを持っている企業の方は、自社サイトがウェブアクセシビリティの基準をしっかりと満たせているか確認してみましょう。
◆ウェブアクセシビリティを向上させる例
ここでは、ウェブアクセシビリティを向上させるためにほぼ共通して行われる例を紹介します。
画像や動画のalt属性
Webサイトには視覚障害者のために読み上げ機能が拡張機能などでありますが、非テキストコンテンツである画像や動画は、テキストではないため、どのような画像なのかを読み取ることができません。
そこで設定するのが、画像のalt属性です。alt属性とは画像に設定できる代替テキストのことで、その画像が何を伝えるための画像なのか、テキストを入れることで読み上げソフトが感知してくれます。
なお、alt属性はSEOの観点でも非常に重要な要素です。Webサイトに画像や動画を利用する際は忘れずに設定しましょう。
※alt属性を設定しなくてもいい例もあります。例えば、「インスタグラム」の文字の横にアイコン画像を置き、alt属性に「インスタグラム」と設定したとします。そうすると、謎にインスタグラムの名前を2回読み上げることになってしまうためかえって不自然になってしまう…というケースもあることを覚えておきましょう。
色のコントラスト
視覚障害者の中には色の違いを認識しにくい方がいます。
Webにおいて、文字色と背景色などの隣り合っている色のコントラスト比は、4.5:1以上というガイドラインの基準があります。しっかりと基準を満たして誰でも文字やコンテンツを読み取りやすいWebサイトにしましょう。
見出し
ページに見出しがある場合は、見出しのレベルごとに適切なデザインやマークアップを施しましょう。決して派手なデザインにすることで目を引かせるということではなく、本文の内容が何かを伝えるような見出しにすることが重要です。
キーボード
Webサイトをマウス操作前提で実装しないようにしましょう。全てのユーザーがマウスを操作ができるとは限らないためです。キーボード操作でもマウスと同じような操作ができるようにしましょう。
◆まとめ
今回はウェブアクセシビリティについて紹介しました。
ウェブアクセシビリティは全てのユーザーがサイトを利用しやすくするために必要な基準であり、UI/UXにも関わってくる大変重要な内容です。
絶対にやらなければならないというわけではありませんが、利用しやすいサイトはSEOの向上にもつながるため、ウェブアクセシビリティを意識したサイト構築を心がけましょう。