LEARN BY EXAMPLE

2.5.6 入力メカニズムの共存 レベル AAA

タッチ・マウス・キーボードを、利用者が使い分けられるようにする。

概要

端末やブラウザーで利用できる入力方法を、ウェブコンテンツ側で制限しないようにします。制限が必要不可欠な場合、コンテンツのセキュリティを確保するために必要な場合、利用者の設定を尊重するために必要な場合は例外です。

同じボタンを、タッチでもキーでも使い続ける

タッチ対応のPCやスマートフォンで、講座サイトの案内を切り替える場面です。端末で使える入力方法を、途中で変えても使えるかを比べます。

利用者が困る例 タッチ対応なら、タッチだけに制限

使いたい方法で、次の講座へ進めない。
入力方法を一つに絞られ、外付けの機器や別の操作へ切り替えられません。

改善した例 使える方法を制限しない

同じボタンを、クリック・タップ・Enter・Spaceで操作できます。途中で入力方法を変えて試してください。

講座サイト|おすすめの講座

写真入門

構図と光の使い方を学びます。

文章の書き方

伝えたい内容を整理し、読みやすい文章にします。

配色入門

色の組み合わせと、情報の伝え方を学びます。

3つの講座の案内です。

自分に合う方法へ切り替え、続きから使える。
タッチ対応や最初の操作を理由に、ほかの入力を無効にしません。

図:問題側は入力を制限する想定の静止図です。改善側は3つの架空の講座を順に表示し、最後から最初へ戻ります。利用できる入力方法は、実際に閲覧する端末やブラウザーによります。

達成できないと起こる問題の例

手の動きに合わせて入力方法を使い分ける人が、タッチ対応のPCで講座サイトの一覧を見ています。文字を入力するときはキーボード、講座を選ぶときはマウスやタッチを使いたいと考えています。

サイトはタッチ対応を検出すると、タッチ操作だけを受け付けます。マウスやキーボードも端末で使えるのに、一覧を切り替えるボタンがそれらの操作に反応せず、利用者は使いたい方法で講座を探せません。

達成するための改善例

同じ一覧の操作を、タッチ対応という理由だけで制限しないようにします。HTMLのボタンなどを使い、タッチ・マウス・キーボードで同じ操作を続けられるようにします。

利用者は、前の講座へはキーボードで戻り、次の講座へはタッチで進むなど、途中でも方法を切り替えられます。外付けのマウスやキーボードを使うスマートフォンでも、利用できる方法を残します。

図の改善側では、同じ「前の講座」「次の講座」を、クリック・タップ・Enter・Spaceで操作できます。使える方法は閲覧する環境によります。

確認のポイント

  • タッチ対応を検出した後も、マウスやキーボードで操作できますか。
  • 最初に使った方法だけを有効にして、ほかの入力を無効にしていませんか。
  • 一つの操作をした後に別の方法へ切り替えても、続きから使えますか。
  • タッチ対応画面では、キーボードやマウスで使うボタンを隠していませんか。
  • 制限を設ける場合、三つの例外のいずれかに当たる必要性を確認しましたか。

条件と補足

主な入力方法だけに決めつけない

タッチが主な入力方法のスマートフォンでも、外付けキーボードやマウスを使う人がいます。PCでも、タッチ画面とマウス・キーボードを使い分けられる場合があります。

どの方法を使うかは、利用者の状況や操作の内容によって変わります。端末にタッチ画面があることや、最初に触れたことだけから、その後もタッチだけを使うと決めつけないようにします。

この基準は、プラットフォームで使える方法をコンテンツが制限しないことを求めます。端末が対応していない入力機器まで、サイト側で新たに使えるようにする基準ではありません。

制限が認められる三つの場合

例外 当てはまる条件
必要不可欠 制限を取り除くと情報や機能が根本的に変わり、ほかの適合する方法では実現できない
セキュリティ コンテンツのセキュリティを確保するために、その制限が必要
利用者の設定 利用者が選んだ設定を尊重するために、その制限が必要

公式解説は、キーボードのタッチタイピングを教えたり、速さや習熟度を測ったりするアプリを、特定の入力方法が必要不可欠な例として挙げています。通常の講座一覧を切り替える操作は、タッチだけに制限する必要がありません。

利用者の設定を尊重することと、制作者が端末の種類だけで入力方法を決めることは区別します。三つをすべて満たす必要はありませんが、制限する場合は、その根拠を確認します。

実装と確認の方法

タッチ専用のイベント処理だけを登録すると、ほかの入力を受け付けなくなる場合があります。標準のボタンとclickのように入力方法を限定しないイベントを使う方法などで、利用できる操作を残します。

独自の複雑な部品では、キーボードとポインターそれぞれに必要な処理も確認します。特定のイベント名を使っただけで完了とせず、同じ環境で入力方法を切り替えて操作できるか試します。

2.1.1「キーボード」は、キーボードインタフェースで機能を使えることを扱います。2.5.6では、使える入力方法を一つに絞らず、必要に応じて切り替えられることも確認します。

図の操作は3講座の間を順に切り替える見本で、最後の次は最初へ戻ります。実際の機器の接続や音声入力を再現するものではありません。

参照資料

テクニックは方法の例です。出典の最終確認: 2026-11-10。講座サイトは、この教材のために作った架空の例です。