Webアクセシビリティとは、利用する端末や操作方法、見え方や聞こえ方などが異なっていても、必要な情報や機能にたどり着きやすくする考え方です。
スクリーンリーダーへの対応やキーボード操作は欠かせませんが、それだけでは、読みにくい文章、色だけで伝える表示、迷いやすいメニューといった問題が残ります。
そこで、支援技術への対応とあわせて確認したい五つの領域を、実際の画面で点検しやすい形に整理します。
まず確認したい5つの領域
| 領域 | 確認すること | 改善例 |
|---|---|---|
| コンテンツ | 文章と見出しから内容を理解できるか | 一文を短くし、情報を見出しや箇条書きで整理する |
| 色とコントラスト | 文字や状態の違いを見分けられるか | 色に加えて、文字や形でも状態を示す |
| 代替手段 | 音声や画像を使えなくても情報が伝わるか | 字幕、テキスト版、適切な代替テキストを用意する |
| 表示と操作の調整 | 利用者の環境に合わせて使えるか | 文字サイズや配色を調整し、キーボードでも操作できるようにする |
| ナビゲーション | 目的の情報まで迷わず移動できるか | メニューを一貫させ、リンク先がわかる文言を使う |
文章と見出しで理解しやすくする
読みやすさは、文字数を減らすだけでは決まりません。
一つの段落に一つの話題を置き、見出しだけを追っても情報の順序がわかるようにすると、必要な部分を探しやすくなります。
- 長い一文は、意味の切れ目で分ける
- 専門用語は避けるのではなく、初めて出す場所で短く説明する
- 手順や並列する項目は、箇条書きにする
- 「こちら」ではなく、「製品の詳細を見る」のようにリンク先を示す
たとえば「ウェブアクセシビリティに関する最新のガイドラインを確認することは重要です」は、「ウェブアクセシビリティのガイドラインを確認しましょう」とすると、読み手が取る行動をつかみやすくなります。
文章を整える際は、見出し、要約、やさしい日本語の整え方も参考になります。
色とコントラストを別々に確認する
背景と文字を見分けやすくすることと、色以外の方法でも意味を伝えることは、別々に確認する必要があります。
コントラストは、単に「派手な色にする」ことではありません。
文字や操作部品が背景に埋もれていないかを、適用する基準や文字サイズに合わせて確認します。
- 本文、ボタン、入力欄などを背景から見分けやすくする
- 選択中、完了、エラーなどの状態を色だけで区別しない
- エラー箇所には、色に加えて内容を説明するメッセージを表示する
たとえば、入力エラーを赤い枠だけで示すと、何を直せばよいのかが伝わりません。
「メールアドレスを入力してください」のような文を添えると、色を見分けにくい場合でも修正箇所と対応がわかります。
音声と画像には代替手段を用意する
動画、音声、画像に含まれる情報は、一つの感覚だけに頼らない形でも届けます。
- 動画には、発話や必要な音の情報がわかる字幕を用意する
- 音声には、内容を確認できるテキスト版を添える
- 情報を伝える画像には、その内容や目的に合う代替テキストを設定する
- 意味を持たない装飾画像は、読み上げの邪魔にならない扱いにする
代替テキストは、画像の見た目を細部まで説明するための欄ではありません。
商品画像なら商品を識別できる情報、リンク画像なら移動先や操作の目的など、その画像がページ内で果たす役割を短く伝えます。
画像、動画、非テキスト情報の代替手段は、コンテンツの役割ごとに考えると整理しやすくなります。
表示調整とキーボード操作を使いやすくする
文字サイズや配色を調整できる機能は、利用者が自分の見やすい状態を選ぶ助けになります。
ただし、調整機能を置くだけではなく、その設定画面自体が読みやすく、操作しやすいことも確認します。
マウスを使わない利用者のためには、主要なメニュー、リンク、ボタン、入力欄をキーボードでたどれるようにします。
独自のショートカットを設ける場合は、利用できるキーと動作を画面上で確認できるようにします。
実装と確認の考え方は、キーボード操作とフォーカス表示の整え方で詳しく解説しています。
迷いにくいナビゲーションを設計する
ナビゲーションは、メニューの見た目だけでなく、目的の情報へ移動するまでの流れとして確認します。
- 主要なメニューの位置と並びをページごとに変えない
- 「お問い合わせ」「会社概要」など、リンク先を予測できる名称を使う
- 同じリンク先には、できるだけ一貫した名称を使う
- キーボードで移動したときに、現在位置を見失わない表示にする
リンクの文言は、前後の文章を読まなくても目的が伝わる形が適しています。
「詳しくはこちら」だけで並べるのではなく、「サービスの機能を見る」「導入について問い合わせる」のように、移動先や行動を示します。
公開前に確認したいチェックリスト
- 文章は短い段落と具体的な見出しで整理されているか
- 文字や操作部品を背景から見分けられ、色だけで状態を伝えていないか
- 動画、音声、画像に、役割に合った代替手段があるか
- 表示を調整でき、主要な機能をキーボードでも利用できるか
- メニューとリンクの文言から、移動先を予測できるか
Webアクセシビリティは、特定の機能を一つ追加すれば完了する取り組みではありません。
支援技術への対応、情報の伝え方、見た目、操作、移動のしやすさを組み合わせて確認することで、利用者が必要な情報や機能にたどり着きやすいサイトになります。
当社では、Webアクセシビリティ対応を支援するUUU ウェブアクセシビリティウィジェットツールを提供しています。サイトのアクセシビリティ向上に関心がある方は、機能と導入方法をご確認ください。