会社の概要やお店のメニュー、サービスの広告、製品の取扱説明など——さまざまな情報に、誰でも・いつでも・どこでもアクセスできるのがWebサイトの強みです。
今では多くの人がスマートフォンを常に持ち歩き、Webサイトを閲覧できるのが当たり前になっています。かつては紙媒体で発信していた情報も、今では「QRコードからWebサイトをご覧ください」というケースが増えています。
そのため、Webサイトは「誰でも・いつでも・どこでもアクセスできるから便利」ではなく、「誰でも・いつでも・どこでもアクセスできなければならない」ものへと変わってきています。
つまり、ウェブアクセシビリティを確保・向上させることが求められているのです。
海外ではウェブアクセシビリティが義務化されている国も多く、中には対応していないことが原因で訴訟に発展したWebサイトも存在します。
日本でも、2024年の『障害者差別解消法』改正によりこれまで事業者に対しては努力義務とされていた「合理的配慮の提供」が法的義務となりました。
2025年現在は、アクセシビリティ自体は義務化はされていないものの、アクセシビリティの重要性は年々高まってきています。
とはいえ、「そもそもウェブアクセシビリティって何？」「対応できているかどうかはどうやって判断するの？」「何をすればいいの？」といった疑問をお持ちの方も多いでしょう。
この記事では、Webに詳しくない方でも理解できるよう、第一歩となるポイントを分かりやすく解説していきます。
ウェブアクセシビリティとは？
「ユニバーサルデザイン」という言葉をご存じでしょうか？
これは年齢・性別・障害の有無にかかわらず、すべての人にとって使いやすいデザインのことです。シャンプーの容器の形状、自動ドア、ピクトグラムなどが代表例です。
ウェブアクセシビリティは、そのWeb版とも言えます。
正確には、「利用者の障害の有無や程度、年齢、利用環境などにかかわらず、すべての人がWebサイト上の情報やサービスを問題なく利用できること、またはその実現度」を指します。
ウェブアクセシビリティを確保するには？
では、ウェブアクセシビリティが確保されているWebサイトとは、どのようなものでしょうか？
デジタル庁が示す具体的な例は以下のとおりです。
- 目が見えなくても情報が伝わること・操作できること。
- キーボードだけで操作できること。
- 一部の色が区別できなくても得られる情報が欠けないこと。
- 音声コンテンツや動画コンテンツで、音声が聞こえなくても話している内容が分かること。
理解はできても、「実際に何をすればいいのか分からない」と感じる方が多いでしょう。
しかも、Webサイトだけでなく動画などのコンテンツにも対応が必要となると、調査や対応にかかる手間も大きくなります。
ですがご安心ください。この記事では、「まずこれを実践すれば大きく改善できる」という第一歩だけをご紹介します。
フォーカス時の表示を確認しよう
Webアクセシビリティ向上の第一歩として大切なのが、フォーカス時の表示を正しく設定することです。
視覚障害がある方や、マウスが使えないユーザーは、キーボード操作に頼ってWebサイトを利用します。その際、どこにフォーカス（選択）が当たっているかが視覚的に分かることが非常に重要です。
まずは、あなたのWebサイトの「フォーカス時の表示」がどうなっているか確認してみましょう。
- キーボード付きのパソコンで対象のWebサイトにアクセスします 。
- 「Tab」キーを押してみましょう
リンクやボタンに枠線が表示されれば、フォーカス時の表示が正しく機能しています。
もし何の変化もなければ、このあと紹介する方法で修正が必要です。
フォーカスって何？
「フォーカス」とは、現在選択している状態のことを指します。キーボード操作では、今どこにいるのかをユーザーに伝える重要な役割があります。
選択された状態（フォーカス状態）で「Enter」キーを押すとリンク先に移動したり、チェックボックスにチェックが入ったりします。「Tab」キーを押すごとに次の要素へ移動します。
これは、ボタンと矢印だけで操作するテレビのリモコンのようなものです。
視覚障害のある方やマウスが使えない方だけでなく、音声読み上げソフトを使うユーザーにとっても、フォーカス表示は操作を助ける大切な要素です。
フォーカス時の表示を正しく設定しよう
実は、フォーカス時の枠線表示はデフォルトで有効になっています。
つまり、フォーカスしても何も表示されないWebサイトは、意図的に枠線を非表示にする設定をしているということです。
多くの場合、見た目の美しさやデザインを優先して、この設定が行われています。
確かに枠線がないとスッキリして見えるかもしれませんが、アクセシビリティの観点から見ると大きなマイナスです。
例えるなら、ゲームでキャラクター選択画面に入ったのに、どのキャラが選ばれているのか分からなかったら困りますよね？
それと同じで、今どこを操作しているのか分からないWebサイトは、使いにくいのです。
解決策は簡単です。枠線を消しているCSSの設定を削除するだけです。
CSSファイルの中に outline: none という記述がある場合、それを削除すれば枠線が表示されるようになります。
フォーカスがうまく表示されないときは？
リンクやボタンがない場所にフォーカスが当たったり、outline: none を削除しても枠線が表示されないことがあります。
特にこの問題が起こりやすいのが、ハンバーガーメニューやアコーディオンメニューなどの表示を切り替えることができる部分です。
そうした場合の対処については、専門的な知識を要してしまいます。
ペタビットではアクセシビリティ適合試験から改善まで行っております。
また、アクセシビリティを意識したサイトにすると、ユーザーがアクセスしやすくなるのはもちろん、
検索エンジンにとっても「読みやすいサイト」になる為SEOにも効果があります。
もし outline: none の削除でも上手くいかない場合や、お困りごとがりましたら、ぜひお問い合わせフォームから気軽にご相談ください！
まとめ
ウェブアクセシビリティへの対応はむずかしく感じるかもしれませんが、まずは「フォーカス表示」を直すといったちょっとした見直しで大きな改善につながり、より多くの人が使いやすいサイトになります。
ウェブアクセシビリティは特別なことではなく、みんなのためのやさしさです。
できることから、少しずつ始めてみましょう！
