ウェブアクセシビリティとは、障害の有無や利用する入力機器にかかわらず、ウェブ上の情報や機能を利用できるようにする取り組みです。
運動障害のある人に配慮するには、見た目を単純にするだけでは足りません。
小さな操作対象、マウスでしか使えない機能、短い時間制限など、操作を妨げる条件を一つずつ取り除く必要があります。
運動機能の制約がウェブ操作に与える影響
運動障害には、手や指を細かく動かしにくい、筋力が弱い、震えがあるなど、身体の動きに関するさまざまな制約が含まれます。
同じ人でも、マウス、キーボード、スイッチ、視線入力、音声入力など、使いやすい操作方法は異なります。
- ポインター操作：小さなリンクを選ぶ、近接したボタンを押し分ける、スクロール位置を細かく調整するといった操作が負担になる場合があります。
- キーボード操作：複数のキーを同時に押す操作や、何度もキーを押す操作が難しい場合があります。
- 時間のかかる操作：フォーム入力や確認中に時間切れになると、作業を完了できません。
- 連続した細かな操作：ドラッグやスワイプだけで項目を移動する設計では、代替入力を利用する人が操作できない場合があります。
したがって、特定の障害名に合わせて機能を足すのではなく、同じ目的を複数の方法で達成できる設計が必要です。
設計時に確認したい障壁と対策
| 起こりやすい障壁 | 設計で確認すること |
|---|---|
| 操作対象が小さい、または隣接している | 押せる範囲を広げ、隣の操作対象との間隔を確保する |
| マウスでしか操作できない | キーボードでも同じ機能を利用できるようにする |
| ドラッグが必須になっている | ボタンや選択肢による代替操作を用意する |
| 入力中に時間切れになる | 不要な制限をなくし、必要な場合は通知と延長手段を用意する |
| 自動で動く表示を止められない | 一時停止、停止、非表示などの操作を用意する |
操作対象を選びやすくする
ボタンやリンクは、表示されている文字だけでなく、その周囲を含めて押せるようにします。
押せる範囲が十分でも、別のボタンがすぐ隣にあれば誤操作が起きやすいため、操作対象同士の間隔も必要です。
固定の大きさだけを当てはめるのではなく、実際の押せる範囲、周囲との間隔、画面幅が変わったときの配置を一緒に確認します。
詳しい基準を確認する場合は、ターゲットサイズの考え方も参考になります。
色だけで操作の意味を伝えない
重要な操作は、色だけで区別せず、「送信」「閉じる」のような具体的なラベルと一貫した配置で示します。
アイコンだけのボタンを使う場合も、支援技術が操作の目的を読み取れる名前を付けます。
意図しない移動を起こさない
ページが勝手にスクロールしたり、フォーカスしただけで表示位置が大きく変わったりすると、操作対象を見失う原因になります。
自動で動く表示が必要な場合は、利用者が止めたり再開したりできる操作を用意します。
マウス以外でもすべての機能を使えるようにする
リンク、ボタン、入力欄などは、まずHTMLの標準要素を適切に使います。
標準要素には基本的なキーボード操作が備わっているため、見た目だけをボタンに似せた独自部品よりも、操作方法を伝えやすくなります。
- TabキーとShift＋Tabキーで、操作対象を論理的な順序で移動できるようにする。
- 現在選ばれている要素を、見えるフォーカス表示で示す。
- モーダルやメニューに入った後も、キーボードだけで閉じたり次へ移動したりできるようにする。
- マウスで使える機能を、EnterキーやSpaceキーなどでも実行できるようにする。
実装例と確認方法は、キーボード操作とフォーカス表示の実務解説で詳しく紹介しています。
ショートカットキーは追加する前に影響を確認する
ショートカットキーは、一部の利用者の操作を減らせる一方、音声入力や別の支援機能と衝突することがあります。
特に文字キーだけで起動する独自ショートカットは一律に追加せず、必要な場合は無効化や変更の方法を用意します。
ARIAはHTMLを補うために使う
ARIAは、HTMLだけでは伝えにくい部品の役割や状態を支援技術へ伝えるための仕組みです。
ARIAを追加すれば自動的に操作しやすくなるわけではなく、キーボード操作やフォーカス移動は別に実装して確認する必要があります。
たとえば、<nav>要素はそれ自体がナビゲーション領域を表すため、通常は同じ意味のrole="navigation"を重ねて指定する必要はありません。
ドラッグや連続操作に代替手段を用意する
項目の並べ替え、ファイルの移動、スライダーの調整などをドラッグだけで行う設計は、細かなポインター操作が難しい人を妨げます。
たとえば、並べ替えには「上へ」「下へ」ボタンを併設し、スライダーにはキーボード操作や数値入力など、同じ結果に到達できる方法を用意します。
代替手段は、画面の端から端までポインターを動かし続けなくても完了できる形にします。
時間制限と自動で動くコンテンツを見直す
入力や確認に必要な時間は利用者によって異なるため、フォームや予約画面に不要な時間制限を設けないようにします。
時間制限をなくせない場合は、終了前に知らせ、簡単な操作で延長できるようにします。
フォームの入力支援全般は、使いやすいフォームとエラー設計の基本でも確認できます。
カルーセル、スクロール表示、動画や音声などが自動で始まる場合は、一時停止、停止、非表示、再生の操作を分かりやすい位置に用意します。
停止ボタン自体も、キーボードや支援技術から操作できなければ代替手段になりません。
音声入力やスイッチなどの支援技術に対応する
運動障害のある人のために、サイト独自の音声コマンドを必ず実装する必要はありません。
音声入力を利用する人は画面に見えるラベルを読み上げて操作することがあるため、ボタンに表示した文言と支援技術が読み取る名前を一致させます。
スイッチや視線入力など、キーボードに似た信号で操作する機器もあるため、キーボード対応は複数の入力方法を支える土台になります。
シンプルな配置に加えて、意味のあるHTML、予測できるフォーカス順序、具体的な操作ラベルをそろえることが必要です。
実装後の確認リスト
- マウスを使わずに、主要なページや機能を最後まで操作する。
- フォーカスが常に見え、固定ヘッダーやダイアログに完全に隠れないことを確認する。
- 小さなボタンや近接したリンクがなく、意図した対象を選びやすいことを確認する。
- ドラッグ、スワイプ、複雑なジェスチャーに代替操作があることを確認する。
- 時間切れになる前の通知と延長手段が使えることを確認する。
- 自動で動く表示や再生コンテンツを止められることを確認する。
- 見えるラベルと支援技術が読み取る名前が一致していることを確認する。
運動障害に配慮した設計の要点
運動障害に配慮したWebサイトは、特別な入力方法を一つ追加するだけでは実現できません。
操作対象を選びやすくし、マウス以外の経路を用意し、ドラッグや時間制限を避け、支援技術に意味が伝わるHTMLを使うことで、利用できる人の範囲が広がります。
設計段階のチェックに加えて、実装後にキーボードや代替操作で一連の流れを確かめることが、見落としを減らします。
当社では、ウェブアクセシビリティへの対応を支援するUUU ウェブアクセシビリティウィジェットツールを提供しています。
自社サイトのアクセシビリティ向上を検討している方は、サービスの詳細をご覧ください。