Webサイトの機能がマウス操作だけに依存していると、キーボードや支援技術を使う人は、リンクを選ぶ、フォームを送信する、メニューを開くといった基本操作を完了できません。
Webアクセシビリティの「操作可能」は、利用者が必要な機能へ移動し、自分に合う方法で操作できるようにUIを設計する考え方です。
この記事では、WCAG 2.2の「操作可能」に関わる実務の入口として、キーボード操作、時間制限、点滅、ナビゲーションの4点を取り上げます。
実装前にそろえる4つの確認領域
「操作可能」は、単にボタンを押せる状態だけを指すものではありません。
移動、実行、待ち時間、画面の変化を含む一連の操作を、利用者が無理なく進められるかを確認します。
| 確認領域 | 避けたい状態 | 実装の方向 |
|---|---|---|
| キーボード操作 | マウスがなければ機能を使えない | Tabキーで移動し、適切なキーで実行できるようにする |
| 時間制限 | 読み終える前や入力中に時間切れになる | 事前に知らせ、必要に応じて延長できるようにする |
| 点滅と動き | 強い点滅や止められない動きが続く | 点滅を避け、必要な動きには停止手段を用意する |
| ナビゲーション | 現在の操作位置や移動先が分からない | 見出し、ラベル、スキップリンク、ランドマークを整える |
キーボードだけで移動して実行できるか
キーボード対応では、操作対象へ移動できることと、移動した先で機能を実行できることの両方を確認します。
リンク、ボタン、入力欄などの操作対象にはTabキーで順番に移動でき、ボタンはEnterキーやSpaceキーで実行できる必要があります。
標準のHTML要素を使う
送信操作には、見た目だけをボタン風にした要素ではなく、HTMLのbutton要素を使うのが基本です。
<button type="button">送信</button>この例では、要素の役割がHTMLから伝わり、キーボードによる基本操作も利用できます。
フォーカスを見える状態にする
フォーカスとは、現在キーボード操作の対象になっている要素を示す状態です。
枠線や背景色などでフォーカス位置を見分けられるようにし、ページ内で操作場所を見失わないようにします。
実装と確認の例は、キーボード操作とフォーカス表示の詳しい確認方法でも解説しています。
時間制限の前に知らせ、延長手段を用意する
入力フォームやログイン後の画面に時間制限があると、読む時間や操作時間を多く必要とする利用者は、作業の途中で時間切れになることがあります。
時間制限が必要な場合は、期限が近いことを事前に伝え、利用者が延長を選べるようにします。
通知と延長ボタンの最小限の構造は、次のように表せます。
<div role="alert">
<p>操作時間が残りわずかです。</p>
<button type="button">時間を延長する</button>
</div>このHTMLは通知と操作部品の構造だけを示しており、実際に時間を延長する処理は別途実装します。
確認時には、通知を読めること、キーボードで延長ボタンへ移動できること、選択後に操作を続けられることまで試します。
強い点滅を避け、動きを止められるようにする
激しい点滅や明滅は、一部の利用者に身体的な負担を与えるおそれがあります。
実装では、1秒間に3回を超える点滅を避けるのが分かりやすい安全策です。
厳密な適合判定では点滅の範囲や色なども確認対象になるため、頻度だけで安全と判断せず、該当コンテンツを個別に検証します。
- 注意を引く目的で高速点滅を使わない。
- 自動で続くアニメーションは必要性を見直す。
- 動きを使う場合は、利用者が停止できる操作を用意する。
- 停止操作そのものもキーボードで利用できるか確認する。
移動先とページ構造を分かりやすくする
ナビゲーションでは、リンク先を予測できる名前と、ページ内の主要領域が分かる構造を用意します。
「詳しくはこちら」のように文脈がなければ意味を判断しにくい名前を避け、「料金プランを見る」「お問い合わせフォームへ進む」のように移動先を具体的に示します。
繰り返し部分を飛ばせるようにする
スキップリンクは、ヘッダーやメニューなどの繰り返し部分を飛ばし、主要コンテンツへ直接移動するためのリンクです。
<a href="#main-content" class="skip-link">メインコンテンツへスキップ</a>
<nav aria-label="メイン">
<ul>
<li><a href="/">ホーム</a></li>
<li><a href="/about/">当サイトについて</a></li>
<li><a href="/contact/">お問い合わせ</a></li>
</ul>
</nav>
<main id="main-content">
<!-- 主要コンテンツ -->
</main>nav要素とmain要素は、支援技術がページの領域を把握する手がかりになります。
同じ種類のナビゲーションが複数ある場合は、aria-labelでそれぞれの目的を区別します。
表示方法を含む実装例は、ブロックスキップとスキップリンクの実装方法で確認できます。
実装後の確認手順
検証ツールは候補となる問題を見つける助けになりますが、操作の流れまですべて判断できるわけではありません。
WAVEなどの検証ツールと、キーボードやスクリーンリーダーを使った手動確認を組み合わせます。
- ページの先頭からTabキーとShiftキーを押しながらTabキーを使い、操作対象を前後に移動する。
- リンクはEnterキー、ボタンはEnterキーとSpaceキーで実行できるか確認する。
- 移動中のフォーカスが見え、画面上の順序と大きく食い違わないか確認する。
- 時間制限の通知を認識でき、延長操作を完了できるか確認する。
- 点滅や自動アニメーションがある場合は、頻度と停止手段を確認する。
- スクリーンリーダーで見出し、リンク名、ボタン名、主要領域が理解できるか確認する。
スクリーンリーダーの仕組みと実装ポイントを先に確認すると、読み上げテストの目的を整理しやすくなります。
操作可能なUIを保つための確認点
キーボードで移動できても、フォーカスが見えない、延長ボタンを押せない、スキップリンクの移動先がないといった欠落があれば、利用者は操作を完了できません。
個々の要素だけでなく、ページを開いてから目的の操作を終えるまでの流れを通して確認してください。
- マウスを使わずに主要機能を完了できる。
- 操作中のフォーカス位置を見失わない。
- 時間切れの前に通知され、必要なら延長できる。
- 強い点滅を避け、継続する動きを停止できる。
- リンク名とページ構造から移動先を判断できる。
当社では、ウェブアクセシビリティ対応を支援するUUU ウェブアクセシビリティウィジェットツールを提供しています。
Webサイトのアクセシビリティ向上を検討している方は、サービスの詳細をご覧ください。