freee Accessibility Training

キーボードで操作してみよう

マウスやトラックパッドでの操作が困難な事情があって、キーボードによる操作で Web を閲覧している場合は多くあります。

そのため、Web ページ上のすべての操作をキーボードで完結できるようにしてください。

キーボードによる主な操作方法

  • Tabキーを押してフォーカスを移動(Shift+Tab キーで逆順に移動)

    • リンク、ボタン、入力フォームなどにフォーカスが移動していく
    • Safari を使用している場合は、設定によってはOption キーを押しながら TabキーやShift+Tab キーを押さないと、リンクなどにはフォーカスが移動しない場合があります
  • Enterキーを使ってリンクやボタンをクリック

  • , , , キーや PageUp, PageDownキーでスクロール

  • チェックボックスはSpaceキー、ラジオボタンは, , , キーで選択状態を変更する

  • アプリケーションによっては上記の操作に加えて、いろいろなキー操作が実装されていることもある

このページでは、キーボードでしか操作できない(マウスポインタでの操作ができない)状態を体験するために、マウスポインタを無効にする機能を実装してあります。 キーボード操作により Web を閲覧する体験をするためには、ぜひ有効にしてみてください。

(マウスポインタを元に戻す場合は、チェックボックスにフォーカスをあわせてSpaceキーを押すか、ページを再読み込みしてください)

キーボード操作を試してみよう

性別

フォーカス・インジケーター

Tab キーを押してフォーカスを移動していくとき、フォーカスしている場所を枠線などで表現しているものを フォーカス・インジケーター と呼びます。

フォーカス・インジケーターがどんな見た目で表示されるかは、ブラウザにより異なります。また、ページの製作者側で定義した見た目にすることもできます。 見た目を変更する場合はフォーカスの位置がユーザーに伝わるようにしてください。「見た目がかっこ悪い」からといって、フォーカス・インジケーターを非表示にするのはやめてください。

以下の例では、TabキーやShift+Tabキーでフォーカスを移動させ、Enterキーでボタンを押してみてください。

良い例: ブラウザのフォーカス・インジケーターを使用している

悪い例: フォーカス・インジケーターが表示されていない

良い例: フォーカス・インジケーターを自分で指定している

関連するチェック