キーボード操作・音声入力対応で実現するユーザーフレンドリーなWeb設計

（2025.6.9）

キーボード操作・音声入力対応で実現するユーザーフレンドリーなWeb設計：目次

Webサイトの利用方法は人によってさまざまです。視覚や運動に制限がある方はもちろん、怪我や環境によって、マウスを使わずにキーボードや音声でWebサイトを操作する人もいます。さらに、スマートフォンや音声アシスタントなど、多様なデバイスで利用する人もいます。『マウスがなくても困らない設計』は、すべてのユーザーにとって使いやすいWebサイトの第一歩です。

キーボード操作への配慮

マウスが使えないユーザーは、TabキーやEnterキーなどを使ってページを操作します。そのときに困るのが、『どこにいるかわからない』『移動できない』『閉じられない』といった問題です。

メニューなどリンク機能

DIVやSPAN等のタグを使った、見た目はボタンだけど意味を持たないHTMLの記述は好ましくありません。その場合は、BUTTONタグなど正しいHTML要素を使い、キーボードでも正しく動くように設計します。見た目だけでなく、適切なHTMLタグを使うことがアクセシビリティ対応の基本となります。

現在地のフォーカス

キーボードで操作しているとき、ユーザーは自分が今どの位置にいるか把握できなくなることがあります。そこで『今どのボタンやリンクが選ばれているか目で見てわかるようにする』必要があります。例えばTabキーで移動した際、リンクやボタンに枠線や背景色がつきフォーカスすることでユーザーは現在地を把握することができます。ブラウザのデフォルトの機能にも搭載されていますが、CSSでoutlineやbox-shadowなどを使って、ユーザーに操作中の位置を示すのが一般的です。移動の際に明示的にフォーカスされないと、画面上どこにも反応が見えず『何も動いていない』と誤解されてしまいます。

Escキーで閉じられる設計

モーダルウィンドウ（ポップアップ）やドロップダウンメニューなどを開いたときに、Escキーを押すだけでかんたんに閉じられるようにします。具体的には、キーボードを使っているユーザーが『今の操作をキャンセルしたい』『元の画面に戻りたい』と思ったとき、マウスを使わずにEscキーひとつで閉じられるようにJavaScriptで対応しておくことが必要です。

例）
document.addEventListener('keydown', (e) => {
  if (e.key === 'Escape') {
    closeModal(); // モーダルを閉じる関数
  }
});

移動順の一致

Tabキーを押して移動する順番が、画面の見た目の並びと一致するよう配慮します。例えば、画面上で『左から右』や『上から下』にボタンが並んでいるのに、Tabキーを押すとフォーカスされる順番がバラバラだと、ユーザーは混乱してしまいます。HTMLの記述順がTabキーの移動順なので、見た目のレイアウトとコードの順序を揃えることが大切です。どうしても揃えられない場合は、tabindex属性で調整することもできますが、多用はなるべくさけたいところです。

配慮のポイント
  • すべての操作がキーボードで可能に
  • 現在地を把握できるよう、フォーカスを視覚的に
  • メニューやモーダルなどは、Escキーで閉じられる設計に
  • Tabキーでの移動順は、視覚的な順番と一致させる

音声入力との親和性

音声入力や読み上げソフトを使って操作するユーザーは、ボタンやリンクに適切なラベルがついていないと音声操作で迷ってしまいます。『何ができるのか』を示す適切なラベル付けとセマンティックなHTMML構造が“伝わる”操作を支えています。

ボタンやリンクのテキスト

例えば、ボタンに『詳しくはこちら』とだけ書かれていても、どこに移動するのか分からない場合があります。特にスクリーンリーダーを使っている人は、リンクテキストだけを一覧で聞くことが多く、「詳しくはこちら』ばかりだとリンク先を判断することができません。ボタンやリンクのテキストは、明確でわかりやすい必要があります。

ARIA属性（WAI-ARIA）を使う

ボタンやリンクのテキストだけでは、リンク先の内容を明示できない場合はARIA属性（WAI-ARIA）を使います。

aria-label

見た目にラベルがない要素に説明を追加する属性です。

アイコンのみのボタン

アイコンボタン：ゴミ箱アイコンだけで意味が不明な場合。

例）
<button aria-label="削除する">
  <i class="icon-trash"></i>
</button>

見た目にはアイコンだけ。でもスクリーンリーダーには『削除する』と読み上げられます。

aria-labelledby

他の要素のテキストをラベルとして参照します。

別要素の意味合いを連結

図表のタイトルと説明が別要素にある場合

例）
<div role="region" aria-labelledby="title1">
  <h2 id="title1">売上グラフ</h2>
  <p>このグラフは2024年の月別売上を示しています。</p>
</div>

スクリーンリーダーは『売上グラフ』と読み上げてから対象の領域に入ります。

正しくHTML記述する

『ボタン』や『チェックボックス』などの役割が正しく伝わるマークアップは、見た目だけでなくHTMLの構造でも要素の機能が明示されています。例えば、DIVタグではなくBUTTONタグを使えば、スクリーンリーダーが『ボタン』と認識して読み上げてくれます。CSSを使い、『チェックボックス』のカスタムUIを使う場合も、role="button"やaria-checkedなどのARIA属性を使うことで、正しい役割を伝えることができます。これは操作のわかりやすさに直結します。ただし、元々機能が定められているブラウザのUIに対してカスタムUIの利用は極力避けることをおすすめします。

✅ 良い例（正しい役割が伝わる）
<button type="submit">送信</button>

これは『ボタン』という役割が明確なので、音声読み上げでも『送信 ボタン』と伝わる。

悪い例（見た目だけボタン）
<div onclick="submitForm()">送信</div>

見た目はボタンでも、スクリーンリーダーには『送信』とただのテキストとして認識さてしまう。

UIの状態を示す

状態（選択中／未選択など）を伝えるためには、aria-pressedやaria-checkedといったARIA属性を使います。この属性は、スクリーンリーダーが『押されている』『チェックされていない』などの状態を読み上げ、ユーザーに正確な状況を伝えることができます。例えば、トグルボタンにはaria-pressedを使い、ON/OFFの状態を示すことができます。

トグルボタン（押すとON/OFFが切り替わる）
（例 
<button aria-pressed="true">お気に入り</button>

スクリーンリーダーは『お気に入り 押されているボタン』と読み上げます。

配慮のポイント
  • 明確でわかりやすいテキストラベル
  • 意味や役割を補足する配慮
  • 役割が正しく伝わるマークアップ記述
  • UIの状態（選択中／未選択など）を示す

モバイルユーザーにも優しい設計

現代社会では、webサイトユーザーの多くがスマートフォンからアクセスしています。しかしながら、PC画面だけを前提に作られたWebサイトでは、スマホで見ると『押せない・読めない・操作できない』と感じる場面が少なくありません。

操作しやすいスマホサイト

PC画面を前提に作られたWebサイトは、スマートフォンで閲覧すると文字が小さく読みづらかったり、操作しにくい場面が多く見られます。特に、ボタンやリンクが小さいとタップしにくく、誤操作の原因にもなります。こうした設計は、高齢者や障害のある方にとって大きな負担となるため、アクセシビリティの視点からも見直しが必要です。『誰にとっても使いやすい設計』を意識することが、これからのWebに求められています。

配慮のポイント
  • テキストが小さくて読みにくい
  • 横スクロールは発生させない
  • タップしやすいボタンデザイン

※スマホでは指先で操作するため、44px以上のタッチ領域が必要です。小さすぎると押し間違いの原因になることも。

スムーズに情報にアクセス

スマホではマウスの“ホバー操作”ができないため、PC用に作られたメニューや説明が表示されず、必要な情報にたどり着けないことがあります。操作できないボタンや閉じられないポップアップも、ユーザーを行き止まりにしてしまいます。こうした状況は、視覚や操作に制限のある人だけでなく、誰にとっても不親切であり、アクセシビリティの観点からも改善が必要です。

配慮のポイント
  • ホバー操作以外のアクションを用意する
  • 全てのデバイスでメニューが等しく機能する
  • ストレスないモーダル・ポップアップ設計をする

※マウスを当てないと開かないメニューは、スマホでは開けないまま放置されることも。

ストレスフリーのスマホサイト

文字だけに頼らずアイコンや見た目に工夫を取り入れ、スムーズに操作できるUI/UXを設計することは、アクセシビリティにも直結します。操作に迷う・情報が見つからないといった体験は、ユーザーのストレスとなり離脱の原因となります。操作に迷うwebサイトは、とくに高齢者や障害のある方には深刻な壁になります。誰でも直感的に使えるデザインこそが、アクセシブルでやさしいWebの第一歩です。

配慮のポイント
  • アイコンを配置しUIの機能を明示する
  • スムーズなUI/UXで閲覧モチベーションを上げる
  • 入力しやすいフォーム設計は成果に直結する

※スマホサイトは『使いにくい＝古い・不親切』と感じられやすくイメージダウンにつながることも。

キーボード操作・音声入力対応で実現するユーザーフレンドリーなWeb設計のまとめ

webサイトを閲覧するのに、ユーザーがマウスを使えない、あるいは使いにくい状況は誰にでも起こり得ます。もちろん、スマートフォンサイトでもマウスを使うことは出来ません。そんなときでもスムーズに使えるWebサイトは、多くの人にとって“やさしい設計”となります。

今日ご紹介した配慮は、特別な対応ではなく『すべてのユーザーのUXを底上げする基本』です。まずは一度、Tabキーだけであなたのサイトが利用できるか？ぜひ確認してみてください。

私たちは、WEBサービスのアクセシビリティ対応のご相談はもちろん、御社のWEB戦略パートナーとしてお役に立てるご支援をしています。いつでもお気軽にお問い合わせください。

※本情報はページ公開時のものです。情報は常に更新され掲載内容と異なる場合がございます。

アクセシビリティ対応の基本と実践ポイント [質問箱 (FAQ)] では、
WEB担当者のみなさまの悩みに、一問一答形式でお答えしています！！