ウェブアクセシビリティの達成基準とは？｜Web制作で確認したい対応項目

ウェブアクセシビリティに対応するためには、障害のある方や高齢者を含め、さまざまな利用者が情報を理解し、Webサイトを操作できるようにすることが重要です。

本記事では、デジタル庁の「ウェブアクセシビリティ導入ガイドブック」を参考に、ウェブアクセシビリティで達成すべきことを「非干渉」「基本的に達成」「状況に応じて確認」「導入に慎重な検討が必要」の4つに分け、Web制作で確認したいポイントを具体的に解説します。

なお、ここでは主にJIS X 8341-3:2016の達成基準をもとに解説しています。実際の対応では、対象となるWebサイトやサービスの目的、利用者、コンテンツなどに応じて、必要な達成基準を確認することが大切です。

ウェブアクセシビリティで達成すべきこと【非干渉】

「非干渉」とは、Webページの一部が、利用者によるページ内のほかの部分へのアクセスを妨げないようにすることです。

JIS X 8341-3:2016では、特に重要な達成基準として4つの「非干渉」の達成基準が定められています。

音声を自動再生させない

音声を自動的に再生するコンテンツは、利用者の操作を妨げる可能性があります。
特にスクリーンリーダーなどでWebサイトを利用している場合、自動再生された音声によって読み上げ内容が聞き取りにくくなることがあります。

3秒を超えて自動的に音声を再生する場合は、利用者が音声を停止・一時停止できる操作や、音量を調整できる仕組みを用意するなど、スクリーンリーダーの読み上げを妨げないようにすることが重要です。

一度フォーカスしたら抜け出せないコンテンツを作らない

キーボード操作などでフォーカスを移動した際、特定のコンテンツから抜け出せなくなる状態を作らないようにします。

特にモーダルダイアログや動画プレイヤーなどでは、閉じるボタンを用意するなど、利用者が操作を終了して元のコンテンツに戻れるようにすることが重要です。
モーダルを実装する場合は、開いたときにフォーカスをモーダル内へ移動し、閉じたときには元の操作位置へフォーカスを戻すなど、キーボード操作にも配慮します。

1秒間に3回を超える光の点滅をさせない

光の点滅を繰り返すコンテンツは、光感受性発作などを誘発する可能性があります。

アニメーションや動画などで急激な点滅を繰り返さないようにし、1秒間に3回を超える点滅を避けます。

特に、画面の大部分を占める点滅や、強いコントラストを伴う点滅には注意が必要です。

自動で動き続けるコンテンツを放置しない

スライドショーやカルーセルなど、自動的に動いたり切り替わったりするコンテンツには注意が必要です。

コンテンツが動き続けることで、利用者が文章を読んだり、ほかの操作を行ったりすることを妨げる場合があります。

一定時間以上、自動的に動いたり点滅したりするコンテンツには、一時停止・停止・非表示などの操作を用意するなど、利用者が自分のペースで閲覧できるようにします。

【基本的に達成】の項目

これらは、非干渉ほど重大な影響を及ぼすものではありませんが、Webコンテンツの情報が十分に伝わらなかったり、操作が不完全になったりすることを防ぐため、基本的に達成すべき項目です。

Webサイトを制作・更新する際には、以下の項目を確認しましょう。

画像の代替テキスト

「代替テキスト」とは、画像が示している情報や役割をテキストで伝えるものです。

写真、イラスト、グラフなど、画像によって情報を提供している場合は、画像の内容や役割が利用者に伝わるよう、適切なalt属性を設定します。

ただし、装飾目的の画像など、情報を伝える必要がない画像については、無理に説明文を入れるのではなく、スクリーンリーダーなどで読み上げられないよう適切に扱うことが重要です。

キーボードだけですべての機能を操作できるようにする

Webサイトの機能を、マウスだけでなくキーボード操作でも利用できるようにします。

例えば、Tabキーでリンクやボタンなどの操作対象へフォーカスを移動できることや、Enterキーなどで操作を実行できることを確認します。

特にJavaScriptで独自の操作UIを作成する場合は、キーボード操作でも同じ機能を利用できるか確認しましょう。

操作に制限時間を設けない

閲覧や入力などの操作に、必要以上の時間制限を設けないようにします。

どうしても制限時間が必要な場合は、利用者に事前に知らせたり、制限時間を延長・調整できる仕組みを用意したりするなど、利用者が十分に操作できるよう配慮します。

色・形など単一の表現だけで情報を伝えない

色、形、位置など、1つの視覚的な手がかりだけで情報を伝えないようにします。

例えば、フォームの必須項目を赤色だけで示すのではなく、「必須」という文字も表示するなど、色以外の方法でも情報を判断できるようにします。

「右側のボタン」「赤い文字」など、位置や色だけを手がかりにした説明も避けましょう。

スクリーンリーダーで意味の通る順序にする

スクリーンリーダーでは、HTMLの構造に沿って文章やリンクなどが読み上げられます。

そのため、画面上の見た目だけでなく、HTML上の順序も意味が通るようにすることが重要です。

例えば、文字の間隔を調整するためにスペースを入れると、スクリーンリーダーで意図しない読み上げになる場合があります。

NG：日　時
OK：日時

また、同意事項を確認してから「同意して申し込む」ボタンを押す必要がある場合は、同意事項より前にボタンが配置されていると、読み上げ順序だけでは何に同意するのか分かりにくくなります。

画面上の見た目だけでなく、HTMLの構造と読み上げ順序が一致しているか確認しましょう。

見出し要素でセクションの内容を適切に表現する

見出しは、その下にあるコンテンツの内容が分かるように設定します。

例えば、単に「リスト」とするのではなく、「お菓子のレシピリスト」のように、何についてのリストなのかが分かる見出しにします。

また、以下の点にも注意しましょう。

・h1、h2、h3などの見出しレベルを適切に設定する
・見出し要素を空にしない
・文字を大きくしたり、装飾したりする目的で見出し要素を使用しない

見た目だけでなく、HTMLの見出し構造として適切になっているか確認することが大切です。

文字と背景に十分なコントラスト比を確保する

文字と背景の色には、十分なコントラスト比を確保します。

JIS X 8341-3:2016の適合レベルAAを目標とする場合、通常のサイズのテキストでは4.5:1以上が基準の一つとなります。

例えば、薄いグレーの背景に白い文字を配置すると、文字が読みにくくなる場合があります。

実装時には、コントラスト比を確認できるチェックツールなどを利用して、文字色と背景色の組み合わせを確認しましょう。

文字を200％まで拡大しても情報を読み取れるようにする

ブラウザの文字サイズ変更などによって、文字を200％まで拡大しても、コンテンツの情報を読み取ったり操作したりできるようにします。

そのため、文字サイズやレイアウトを必要以上に固定しないことが重要です。

また、文字を拡大した際に、文字が重なったり、コンテンツが見切れたり、操作できなくなったりしないか確認しましょう。

スマートフォンでの拡大縮小を無効にするためのuser-scalable=noも、利用者による拡大を妨げるため、使用しないようにします。

文字コードやフォントに注意する

Webサイトでは、文字コードとしてUTF-8を使用するのが一般的です。

また、WebフォントをアイコンやUIの表現に利用する場合には注意が必要です。

例えば、特定の文字をアイコンとして表示する方法では、フォントが正しく読み込まれなかった場合に、意図しない文字が表示される可能性があります。

アイコンなどの重要な情報をWebフォントだけに依存しないようにするなど、利用環境によって情報が伝わらなくならない実装を検討しましょう。

ページの内容を示すタイトルを適切に設定する

title要素には、そのページの内容が分かるタイトルを設定します。

例えば、
トマトパスタのレシピ｜○○レシピサイト
のように、ページの内容とサイト名が分かるタイトルにすると、複数のページを開いた場合でも目的のページを判別しやすくなります。

また、ページごとに適切なタイトルを設定し、複数ページで同じタイトルを繰り返さないようにします。

ページタイトルとH1の内容が適切に対応していることも、利用者がページの内容を理解するうえで役立ちます。

リンク先が分かるようにする

リンクテキストだけで、リンク先が分かるようにします。

「詳しくはこちら」のようなリンクを複数設置すると、リンクだけを順番に確認したときに、どこへ移動するリンクなのか分かりにくくなります。

例えば、
NG：詳しくはこちら
OK：粗大ごみの出し方の詳細
のように、リンク先の内容が分かるテキストを設定します。

また、PDFファイルへのリンクや、新しいウィンドウを開くリンクなどは、利用者が予想できるよう、必要に応じて事前に分かるようにします。

ナビゲーションに一貫性をもたせる

複数のページで共通して使用するナビゲーションは、順序や表記を統一します。

例えば、あるページでは「トップ・機能紹介・料金・お問い合わせ」と表示しているのに、別のページでは「ホーム・サービス紹介・プライス・ヘルプ」と表記が変わっていると、利用者が目的のページを探しにくくなる場合があります。

サイト内の共通ナビゲーションは、できるだけ一貫した構成・表記にしましょう。

ウェブアクセシビリティで達成すべきこと【状況に応じて確認】

Webサイトのコンテンツやシステムの仕様によって、対応の必要性や方法を確認する項目です。

特に入力フォームや動画、JavaScriptなどを使用している場合は、利用者が情報を取得したり操作したりできるかを確認しましょう。

入力フォームをさまざまな利用方法に対応させる

入力フォームでは、利用者が入力内容を理解し、エラーが発生した場合にも適切に修正できるようにします。

例えば、以下のような点を確認します。

・ラベルとフォームコントロールを適切に関連付ける
・入力形式や文字数などの制限がある場合は、事前に説明する
・エラーが発生した項目を明示する
・エラーの内容や修正方法を分かりやすく伝える

HTMLのlabel要素を適切に使用するなど、見た目だけでなく、スクリーンリーダーでも入力項目とラベルの関係が分かるようにします。

音声・映像コンテンツに代替コンテンツを付与する

動画や音声を掲載する場合は、利用者がその存在や内容を把握できるようにします。

例えば、動画にはキャプション（字幕）を付けることで、音声を聞くことができない利用者にも、会話や重要な音声情報を伝えられます。

また、コンテンツの内容に応じて、音声解説やテキストによる代替コンテンツなどを用意することも重要です。

動画や音声を掲載する際には、どのような情報を伝える必要があるのかを確認し、適切な方法で補足しましょう。

コンテンツの変化をスクリーンリーダーでも分かるようにする

JavaScriptなどによって画面の一部が動的に変化する場合、その変化がスクリーンリーダーを利用している人にも伝わるようにします。

例えば、検索結果が読み込まれた場合や、フォームのエラーが表示された場合など、画面上では変化していても、その変化がスクリーンリーダーに伝わらなければ、利用者が状況を把握できないことがあります。

また、モーダルダイアログを開いた場合はフォーカスを適切に移動し、閉じた場合は元の操作位置へフォーカスを戻すなど、キーボード操作との関係にも配慮します。

ウェブアクセシビリティで導入に慎重な検討が必要なもの

アクセシビリティ向上を目的とした機能であっても、実装方法や利用環境によっては、かえってアクセシビリティを損なう場合があります。

そのため、単純にプラグインや追加機能を導入するのではなく、本当に必要な機能なのか、既存のWebサイトの実装で適切に対応できないかを検討することが重要です。

アクセシビリティ・オーバーレイなどのプラグインに頼りすぎない

アクセシビリティ・オーバーレイは、Webサイトにスクリプトなどを追加し、文字サイズ変更や配色変更などの機能を提供する仕組みです。

しかし、こうした機能の中には、OSやブラウザなどに標準搭載されている機能や、利用者が普段使用している支援技術によって実現できるものもあります。

また、オーバーレイを導入するだけで、HTMLの文書構造や画像の代替テキストなど、Webサイトそのものに存在するアクセシビリティ上の問題を解決できるわけではありません。

そのため、オーバーレイを導入する場合も、サイト本体のHTML構造やコンテンツなどのアクセシビリティ対応を別途行うことが重要です。

文字サイズ変更・読み上げプラグインの導入を慎重に検討する

Webサイトに文字サイズ変更や配色変更、読み上げなどの機能を追加するプラグインがあります。

しかし、利用者が普段使用しているOS、ブラウザ、スクリーンリーダーなどの支援技術を利用できる環境を整えることも重要です。

Webサイト独自の支援機能を追加するだけでは、ほかのWebサイトで同じ機能を利用できるわけではありません。

そのため、こうした機能を導入する場合は、本当に必要なのかを検討したうえで、まずはHTMLの構造やコンテンツそのものを適切にすることを優先しましょう。

まとめ：ウェブアクセシビリティ対応でWeb制作者が確認したいポイント

ウェブアクセシビリティへの対応では、特別な機能を追加することだけが重要なのではありません。

HTMLを適切に記述する、画像に代替テキストを設定する、キーボード操作に対応するなど、日々のWeb制作における基本的な実装がアクセシビリティにつながります。

特に、以下の項目はWebサイト制作・更新時に確認しておくとよいでしょう。

・画像に適切な代替テキストを設定している
・キーボードだけでも操作できる
・フォーカスが操作不能な場所に閉じ込められない
・自動再生する音声が読み上げを妨げない
・自動で動くコンテンツを必要に応じて停止できる
・色だけで情報を伝えていない
・十分なコントラスト比を確保している
・文字を200％まで拡大しても情報を読み取ったり操作したりできる
・見出しを適切な階層で使用している
・スクリーンリーダーで意味の通る順序になっている
・リンク先が分かるリンクテキストになっている
・ページタイトルが内容を適切に表している
・入力フォームのラベルと入力欄が関連付けられている
・フォームエラーの内容や場所が分かる
・動画・音声に必要な代替コンテンツを用意している
・動的に変化する情報が利用者にも伝わる

ウェブアクセシビリティは、一度対応すれば終わりではありません。

新しいページやコンテンツを追加するときにも、利用者が情報を理解し、操作できる状態になっているかを継続的に確認することが大切です。