Webアクセシビリティとは、視覚や聴覚、操作方法の違いにかかわらず、必要な情報や機能を利用しやすくする考え方です。
文字が小さくて読めない、マウスを使わないと操作できない、音声だけでは内容が分からないといった障壁は、利用者によって異なります。
この記事では、利用者が自分の見え方や操作方法に合わせて表示や機能を調整できる対応を「要求に応じた変更」と呼びます。
これは一つの機能だけを指す名称ではなく、文字と配色の調整、字幕、キーボード操作、読み上げへの対応などをまとめた実務上の整理です。
「要求に応じた変更」で扱う四つの対応
必要な対応を一括りにすると、どの問題を何で解決するのかが曖昧になります。
まず、利用者が直面する障壁と対応方法を四つに分けます。
| 利用時の障壁 | 主な対応 | 確認すること |
|---|---|---|
| 文字や配色が見えにくい | 文字サイズ、配色、コントラストを調整できるようにする | 拡大や配色変更をしても内容が欠けず、操作できるか |
| 音声を聞けない、または聞き取りにくい | 動画に字幕を付け、音声には文字起こしを用意する | 文字情報だけでも内容を理解できるか |
| マウスやタッチ操作を使いにくい | キーボードだけでも移動、選択、実行できるようにする | 現在の操作位置が見え、順序どおりに移動できるか |
| 画面を目で確認しにくい | 見出し、ラベル、ボタンなどの意味を読み上げソフトに伝える | 情報の順序と各操作の目的が読み上げで分かるか |
たとえば、字幕は音声情報の理解を助けますが、キーボードで再生ボタンを操作できない問題は解決しません。
文字サイズの変更機能も、ボタンの目的が読み上げで伝わらなければ、必要な利用者が操作できない場合があります。
四つの対応は互いに代用できないため、サイトの情報と機能に合わせて組み合わせます。
文字サイズと配色を調整できるようにする
文字サイズや配色を変更するボタンを設ける場合は、変更後も本文、メニュー、ボタンが読める状態を保ちます。
設定ボタンを目立たせるだけでは足りません。
変更した結果として文字が重なる、横にはみ出す、操作項目が隠れるといった問題が起きないかを確認します。
次のマークアップは、表示設定の選択肢を示す例です。
実際のサイトでは、切り替え処理に加えて、選んだ状態が分かる表示と標準設定へ戻す手段も用意します。
<div role="group" aria-label="表示設定">
<button type="button">文字を大きくする</button>
<button type="button">標準に戻す</button>
<button type="button">高コントラスト表示</button>
</div>サイト内の設定だけでなく、利用者がブラウザや端末で行う拡大を妨げないことも確認します。
レイアウトには文字の拡大に追従しやすい相対的なサイズ指定を使い、表示を変えた状態でも一連の操作を試します。
動画と音声に文字情報を用意する
動画には字幕を付け、音声だけのコンテンツには文字起こしを用意します。
字幕を選択できる動画は、HTMLの<track>要素で次のように表せます。
<video controls>
<source src="movie.mp4" type="video/mp4">
<track src="subtitles.vtt"
kind="subtitles"
srclang="ja"
label="日本語字幕">
</video>実装後は、字幕の内容が音声と対応しているか、表示のタイミングが大きくずれていないか、字幕の表示をキーボードでも切り替えられるかを確認します。
動画の情報設計は、字幕、音声解説、操作性を含む動画掲載の確認ポイントも参考にできます。
キーボードだけでも操作できるようにする
マウスを使わない利用者が、キーボードだけでリンクやボタンへ移動し、機能を実行できるようにします。
標準の<button>要素は、独自の見た目を付けた汎用要素よりも、ボタンとしての意味と基本操作を伝えやすい選択です。
<button type="submit">送信</button>要素を置くだけで確認は終わりません。
実際のページをTabキーとShift＋Tabキーで移動し、次の点を確認します。
- 操作する順序が画面の内容と大きく食い違っていない
- 現在フォーカスしている要素を見分けられる
- ボタン、メニュー、ダイアログなどの機能をキーボードで実行できる
- 特定の場所から先へ移動できなくなる状態がない
具体的な試験方法は、キーボード操作とフォーカス表示の整え方で詳しく解説しています。
スクリーンリーダーに意味が伝わる構造にする
スクリーンリーダーは、画面上の文字や操作要素の情報を音声などで伝える支援技術です。
見出しを見出し要素で記述し、入力欄にラベルを付け、リンクとボタンを目的に合ったHTML要素で実装すると、ページの構造と操作の意味が伝わりやすくなります。
アイコンだけのボタンには、操作目的を伝える名前が必要です。
次の例では、ボタンの名前をaria-labelで補い、装飾用のアイコンを読み上げ対象から外しています。
<button type="button" aria-label="検索">
<span aria-hidden="true">🔍</span>
</button>ボタン内に「検索」という目に見える文字を置ける場合は、その文字を名前として使うほうが利用者にも目的が伝わります。
ARIA属性はHTMLの意味を補うために使い、標準の見出し、リンク、ボタン、ラベルを置き換える目的では使いません。
読み上げ環境の基本は、スクリーンリーダーの仕組みと実装ポイントも確認してください。
実装後の確認手順
- 利用者の作業を決める：情報を読む、動画を再生する、フォームを送信するなど、ページで完了すべき作業を洗い出します。
- 表示を変えて試す：文字を拡大し、配色を切り替えた状態で、内容の欠落や操作不能がないかを確認します。
- マウスを使わずに試す：ページの先頭から作業完了まで、キーボードだけで操作します。
- 文字情報を確認する：音声を使わなくても、字幕や文字起こしから内容を理解できるかを確認します。
- 読み上げで確認する：見出しの順序、操作要素の名前、入力欄のラベルが伝わるかを確かめます。
一つのチェック方法だけでは、異なる種類の障壁を見落とします。
表示、操作、代替情報、読み上げの順に分けて確認すると、どの実装を直すべきか判断しやすくなります。
利用者が自分に合う方法を選べるサイトへ
「要求に応じた変更」は、文字を大きくするボタンを追加するだけの対応ではありません。
表示を調整できること、音声の代わりとなる文字情報があること、キーボードで操作できること、ページの意味が読み上げで伝わることを、それぞれ確認する必要があります。
ウェブアクセシビリティ対応を検討している場合は、当社のUUU ウェブアクセシビリティウィジェットツールのサービスページもご覧ください。
機能と導入方法を確認したうえで、サイト自体の設計、実装、試験と組み合わせてご検討ください。