ウェブアクセシビリティとは、身体特性や利用環境が異なる人でも、ウェブサイトの情報を受け取り、機能を操作しやすくするための考え方と実践です。
改善の出発点になるのが、画像、操作部品、配色、フォーム、動画、リンクの見直しです。
以下の6項目はHTMLとCSSの基本から着手できますが、実装しただけでサイト全体の適合性が保証されるわけではありません。
設定後にキーボードや読み上げ環境で確かめるところまでを一つの作業として扱います。
1. 画像の目的に合った代替テキストを設定する
代替テキストは、画像が伝える情報や機能を文字で代替する説明です。
画像を見られないときや、スクリーンリーダーでページを読むときに、画像の意味を伝えます。
情報を伝える画像には、見た目を長く描写するのではなく、そのページで必要な意味を簡潔に書きます。
一方、区切りや飾りにすぎない画像には空のalt属性を指定し、読み上げのノイズを増やさないようにします。
<!-- 情報を伝える画像 -->
<img src='sunflower.jpg' alt='青空を背景に咲く黄色いひまわり'>
<!-- 装飾だけを目的とする画像 -->
<img src='divider.png' alt=''>同じ画像でも、掲載目的が変われば適切な代替テキストも変わります。
判断例は代替テキスト（alt属性）の基本と書き方でも確認できます。
W3C WAIの画像チュートリアルも、情報画像、装飾画像、機能を持つ画像を分けて扱っています。
2. キーボードで操作できる部品を使う
マウスを使えない利用者や、キーボード操作を好む利用者のために、リンク、ボタン、フォーム、メニューへキーボードで移動して実行できるようにします。
リンクにはa要素、ボタンにはbutton要素を使うのが基本です。
これらのHTML要素には、役割と標準的なキーボード操作があらかじめ備わっています。
<button type='button'>メニューを開く</button>
<a href='/support/'>サポート情報を見る</a>divやspanにtabindex='0'を付けても、フォーカスを受け取れるようになるだけです。
部品の役割、EnterキーやSpaceキーでの動作、状態の通知までは補われません。
独自部品を作る前に、目的に合う標準HTML要素を使えないか確認します。
実装後はTabキーとShift＋Tabキーで順番に移動し、フォーカス位置が見えること、リンクはEnterキー、ボタンはEnterキーまたはSpaceキーで実行できることを確かめます。
3. 文字と背景のコントラストを測る
コントラスト比は、文字色と背景色の明るさの差を数値で表したものです。
見た目の印象だけで判断せず、測定ツールで実際の組み合わせを確認します。
WCAG 2.2の達成基準1.4.3（レベルAA）では、通常サイズの文字は4.5:1以上、大きな文字は3:1以上が基準です。
ロゴや純粋な装飾などには例外があるため、詳しい条件はWCAG 2.2のコントラスト要件で確認してください。
body {
color: #000000;
background-color: #ffffff;
}本文だけでなく、リンク、ボタン、入力欄の説明、エラーメッセージなど、情報を読むために必要な文字を一通り測ります。
通常時だけでなく、ホバー時やフォーカス時に色が変わる部品も確認対象です。
4. フォームの入力欄とラベルを関連付ける
ラベルは、入力欄に何を入力するのかを示す名前です。
画面に文字を置くだけでなく、label要素のfor属性と入力欄のid属性を同じ値にして、プログラムからも関係を判別できるようにします。
<label for='username'>ユーザー名</label>
<input type='text' id='username' name='username'>関連付けが正しければ、支援技術が入力欄の目的を伝えやすくなり、ラベルをクリックしたときにも対応する入力欄へフォーカスが移ります。
forとidが完全に一致していることに加え、同じページで同一のidを重複させていないかも確認します。
5. 動画の音声情報を字幕で伝える
ここでいう字幕（キャプション）は、会話だけでなく、内容の理解に必要な効果音、音楽、話者の区別も時間に合わせて文字で示すものです。
音声を聞けない環境でも、動画が伝える内容を追えるようにします。
動画配信サービスの字幕機能を使うほか、自前のHTML動画ではWebVTT形式の字幕ファイルをtrack要素で関連付けられます。
<video controls>
<source src='movie.mp4' type='video/mp4'>
<track src='captions-ja.vtt' kind='captions' srclang='ja' label='日本語' default>
</video>公開前に字幕の時刻と音声が合っているかを再生して確かめ、固有名詞、話者名、意味のある効果音に誤りや抜けがないかを見直します。
字幕に含める情報の考え方は、W3C WAIの収録済み動画のキャプション解説で確認できます。
6. リンク先が伝わる文言を付ける
「こちら」や「詳しく見る」だけのリンクが並ぶと、リンクだけを拾って移動する利用者は行き先を区別しにくくなります。
リンクテキストには、移動先の内容または実行される動作が分かる言葉を使います。
<a href='https://www.w3.org/TR/WCAG22/'>WCAG 2.2の基準を確認する</a>前後の文脈と合わせて目的が分かる場合もありますが、リンクテキストだけで判断できる表現にすると、リンク一覧から探すときにも理解しやすくなります。
基準の考え方はW3C WAIのリンク目的の解説に示されています。
公開前に6項目を確認する
コードを追加したら、次の順に実際の表示と操作を確認します。
- 情報画像の意味が代替テキストで伝わり、装飾画像が余計に読み上げられないか。
- Tabキーで操作部品へ移動でき、フォーカスが消えたり途中で閉じ込められたりしないか。
- 本文と各種部品の文字色が、背景色に対して必要なコントラスト比を満たすか。
- フォームのラベルをクリックすると、対応する入力欄へフォーカスが移るか。
- 動画の字幕が音声と同期し、会話以外の必要な音も伝えているか。
- リンク文言から移動先や動作を予測できるか。
チェックツールは候補箇所を見つける助けになりますが、操作順や文言の分かりやすさは人が実際に試す必要があります。
利用できるツールはWebアクセシビリティチェックツールのガイドで比較できます。
6項目に共通するのは、見た目だけに頼らず、情報の意味と操作方法をHTMLで伝えることです。
新しい画像、フォーム、動画、リンクを追加するたびに同じ確認を繰り返すと、改善を保ちやすくなります。
閲覧時の調整機能も検討する場合
当社では、ウェブサイトへ導入できるUUU ウェブアクセシビリティウィジェットツールを提供しています。
HTMLやコンテンツ自体の改善と併せて、導入方法や機能を確認したい方はサービスページをご覧ください。