Webアクセシビリティ入門：「要求に応じた変更」で見やすさと操作性を整える

Webアクセシビリティとは、利用者の身体的な特性、利用環境、操作方法などが異なっていても、Web上の情報や機能を利用しやすくする考え方です。
本記事で扱う「要求に応じた変更」とは、文字の大きさや配色などを、利用者が必要に応じて調整できるようにすることを指します。

ただし、アクセシビリティ対応は、画面に設定ボタンを追加することだけではありません。
キーボードで操作できること、スクリーンリーダーに情報が正しく伝わること、動画や音声に文字による代替手段があることも、利用方法の違いを受け止めるために必要です。

「要求に応じた変更」が必要な理由

同じ表示や操作方法が、すべての利用者にとって使いやすいとは限りません。
小さな文字が読みにくい人は拡大を必要とし、マウスを使いにくい人はキーボードで操作し、音声を聞き取りにくい人は字幕や文字起こしを利用します。

そこで、Webサイト側が一つの使い方を固定するのではなく、利用者が自分に合う方法を選べる余地を残します。
この余地が、情報へ到達しやすく、操作を完了しやすいWeb体験につながります。

利用者の選択と代替手段を分けて考える

アクセシビリティ対応は、次の二つに整理すると理解しやすくなります。

• 利用者が表示を調整する仕組み：文字サイズの変更、画面の拡大、配色やカラーテーマの切り替えなどです。
• 別の方法で情報や機能に到達する仕組み：キーボード操作、スクリーンリーダーへの対応、字幕、文字起こしなどです。

後者は、必ずしも画面を「変更する機能」ではありません。
しかし、視覚、聴覚、操作方法の違いによって情報や機能が使えなくなる状況を減らすという点で、前者と同じ目的を持ちます。

対応を考える五つのポイント

文字の拡大を妨げない

文字が小さいと感じる利用者は、ブラウザなどの拡大機能を使う場合があります。
拡大したときに文字が重なる、内容が画面外にはみ出す、ボタンが押せなくなるといった問題が起きないかを確認します。

サイト独自の文字サイズ変更ボタンを設ける場合も、標準の拡大操作を妨げない設計にします。
機能を追加しただけで対応が終わったと考えず、変更後も情報と操作が保たれているかを確かめることが大切です。

文字と背景を見分けやすくする

文字色と背景色の違いが小さいと、内容を判別しにくくなります。
通常の配色そのものを見やすくしたうえで、必要に応じて配色やカラーテーマを選べるようにします。

色だけで状態や意味を伝えると、その違いを認識しにくい利用者へ情報が届かないことがあります。
色の変化に加えて、文字、形、ラベルなどでも違いが分かるようにします。

キーボードで操作できるようにする

マウスを使わない利用者が、リンク、ボタン、入力欄などへ順番に移動し、必要な操作を完了できるようにします。
現在どこを操作しているかを示すフォーカス表示も、見失わないために必要です。

キーボード操作とフォーカス表示の確認ポイントでは、設計と運用で見落としやすい点を詳しく解説しています。

読み上げに伝わる構造を作る

スクリーンリーダーは、画面上の文字や操作項目などを音声や点字で利用できるようにする支援技術です。
見出し、段落、リスト、リンク、ボタンなどを内容に合ったHTMLで表すと、ページの構造や操作の意味が伝わりやすくなります。

画像で伝える情報には、画像の目的や内容に合った代替テキストを設定します。
スクリーンリーダーの仕組みと実装上の配慮は、スクリーンリーダーの基本と実装ポイントも参考になります。

動画や音声に文字の選択肢を用意する

動画や音声だけで情報を伝えると、音を聞き取りにくい利用者は内容を把握できない場合があります。
動画には字幕を、音声には内容を文字で読める文字起こしを用意します。

字幕は会話を文字にするだけでなく、内容を理解するうえで必要な音の情報も伝えられる形に整えます。
文字起こしは、音声を再生できない環境で内容を確認したい場合にも役立ちます。

実装方法と役割

CSS、HTML、ARIA、JavaScriptは役割が異なります。
一つの技術だけで対応を完結させようとせず、解決したい問題に合わせて使い分けます。

アクセシビリティ対応で使う技術の役割

技術	主な役割	確認すること
HTML	見出し、リスト、リンク、ボタンなど、内容と操作の意味を構造として表す	見た目だけでなく、要素の役割と順序が内容に合っているか
CSS	文字サイズ、配色、フォーカス表示などの見た目を整える	拡大やテーマ変更の後も、文字と操作項目が見えて使えるか
ARIA	標準のHTMLだけでは意味を十分に表しにくい操作部品を補足する	支援技術へ伝える名前、役割、状態が実際の動作と一致しているか
JavaScript	利用者の選択に応じて表示や状態を切り替える	切り替え後もキーボード操作と読み上げが機能し、選択した状態が分かるか

公開前に確認したい項目

• 文字を拡大しても、内容が重ならず、操作できるか。
• 配色を変えても、文字、リンク、ボタン、状態の違いを判別できるか。
• キーボードだけで主要な情報と機能へ移動できるか。
• フォーカスがどこにあるか、画面上で確認できるか。
• 見出しの順序が内容のまとまりを正しく表しているか。
• 画像の代替テキストが、画像の目的に合っているか。
• 動画や音声の内容を、字幕や文字起こしでも確認できるか。

個々の機能を設置しただけでは、利用者が実際に使えるかどうかは分かりません。
表示を変更した後、キーボードで移動したとき、読み上げで確認したときというように、利用方法を変えて一連の操作を試すことが欠かせません。

利用者が選べるWeb体験へ

「要求に応じた変更」の目的は、すべての利用者に同じ画面や操作を押し付けることではありません。
表示を調整できることと、別の方法でも情報や機能に到達できることを組み合わせ、利用者が自分に合う方法を選べるようにすることです。

当社では、Webサイトの表示を調整する機能を導入できるUUU ウェブアクセシビリティウィジェットツールを提供しています。
アクセシビリティ向上に関心のある方は、サービスの詳細をご覧ください。