多様なデバイスを意識した操作方法とは

2026年4月15日 更新

さまざまな「操作」の形

ウェブページを操作する方法は、私たちが想像する以上に多様です。代表的なものだけでも、これだけの違いがあります。

• マウス：クリック、ダブルクリック、右クリック、ドラッグ、ホバー（マウスオーバー）など
• キーボード：Tabキーでのフォーカス移動、EnterやSpaceキーでの実行など
• タッチデバイス：シングルタップ、ダブルタップ、ピンチイン/アウト、スワイプなど
• 支援技術：スクリーンリーダー（音声読み上げ）、音声入力、スイッチコントロール、視線入力など

これらの操作のうち、「どのデバイスでも共通して実行できるもの」はどれでしょうか。

多くの操作は「デバイス依存」である

実は、私たちが当たり前のように使っている操作の多くは、特定のデバイスに依存しています。たとえば、マウスの操作をとりあげると、以下のようにキーボードやタッチデバイスで何かしら対応する操作が欠けていることがわかります。

• ダブルクリック：タッチデバイスでは「ダブルタップ」として再現できますが、キーボード操作で「1つのキーを高速に2回叩く」という操作方法は一般的ではありません。
• 右クリック：キーボードによってはコンテキストメニューを呼び出す専用キーがありますが、すべてのキーボードに存在するわけではありません。タッチデバイス（スマホなど）では「長押し」などの代替操作が必要になり、直感的ではありません。
• ホバー（マウスオーバー）：タッチデバイスによってはスタイラスなどを利用してホバーすることができますが、スタイラスのないデバイスなど、デバイスによってはホバーできません。キーボードでも「フォーカス」などと連動させない限り、ホバーはできません。

「ボタンを押す」こそが最強の操作手段

多くの操作は特定のデバイスに依存しており、あるデバイスではできてもあるデバイスではできないという状態になりがちです。

しかし、多様なユーザーが確実に行える操作がひとつあります。それは、「（シングルクリックなどで）ボタンを押す」というシンプルな実行操作です。

マウスの場合

シングルクリックで「ボタンを押す」ことができます。

キーボードの場合

Tabキーでボタンにフォーカスを移動し、SpaceキーやEnterキーで「ボタンを押す」ことができます。

タッチデバイスの場合

シングルタップでボタンを押すことができます。

支援技術の場合

多くの支援技術はキーボード操作をエミュレート（再現）しています。したがって、キーボードで「ボタンを押す」ことができれば、スクリーンリーダーや音声入力、スイッチコントロールでも「ボタンを押す」ことができます。

つまり、「（シングルクリックなどで）ボタンを押せる」ことを念頭に操作を設計することは、多様なユーザーが確実に操作できる環境を提供することと同義なのです。

今までの操作を整理してみると、以下の表のようになります。○は「実行できる、代替手段がある」、？は「実装方法やデバイスによっては実行できない」ことを表します。

操作方法をアクセシブルにするためにできること

もし、あなたのサイトで「ボタンを押す」以外の特殊な操作の導入を検討しているなら、以下の2点を意識してみてください。

1. ボタンを押す操作に置き換える

操作をアクセシブルにする最もよい方法は「ボタンを押す」という操作に置き換えることです。たとえば、「ダブルクリックで編集」ではなく「編集ボタン（シングルクリック）を押す」設計にすることで、一気にアクセシブルになります。

2. ボタンを押す操作もあわせて提供する

もうひとつの方法は、デバイスに依存した操作に加えて「ボタンを押す」操作もあわせて提供することです。たとえば、「ドラッグ＆ドロップでファイルをアップロード」する機能を作るなら、必ず「ファイルをアップロードするボタン」も配置します。これにより、ドラッグ＆ドロップができないユーザーも、ボタンを押すことでファイルをアップロードでき、アクセシビリティを確保できます。

おわりに

「一番アクセシブルな操作」とは、高度な技術を駆使したものではなく、誰もが知っている「ボタンを押す」という最もシンプルな形に集約されます。

逆にいえば、「ボタンを押す」以外の操作方法を提供している場合は、なにかしらアクセシビリティの課題があるはずです。アクセシビリティを損なわないように、操作方法を慎重に選択されることをおすすめします。