キーボード操作の基本操作

キーボードで操作できることは、アクセシビリティを担保する上で非常に重要

GUIにおいて、悪い例

目と手を連動させないと使用できないポインティングデバイス
理由: 画面を見ることができないユーザーには使用できない
代替: スクリーンリーダーなどのキーボード操作をメインとする支援技術を用いてWebを操作する

「キーボードとマウスの持ち替え」の負担は、支援技術ユーザーにとっては、辛い

支援技術などでは、画面上の特定の位置をクリックするよりもキーボードの操作をエミュレートしたほうが容易な場合がある

また手や指先が正確に動かせない場合、入力候補をクリックするよりも、キーボードで対象を選んで実行するほうが正確に操作ができる。

結論

テキスト入力とUI操作の切り替えがしばしば発生するアプリケーション（経理の帳簿入力やテキストエディタ）においても、キーボードで操作が完結できることは非常に有用でしょう。

よくある事例から見る課題一覧

ここからは、よくあるアクセシブルでない事例をもとに、アクセシブルでなくなってしまう原因とそのチェック方法、そして改善の仕方を解説していきます。

事例1. キーボードで操作できない--インタラクティブ要素を用いていない

これらの原因

適切なHTMLの要素を使用していないことによって生み出されます

href属性を持つa要素

button要素

type属性の値がhiddenではないinput要素

select要素

textarea要素

controls属性を持つvideo要素やaudio要素

details要素（実際にフォーカスがあたるのは子のsummary要素）

dialog要素

事例1の解決策

インタラクティブ要素を使用して、キーボード操作を可能にする
フォーカスを受け取り、キーイベントで実行できるようにする

事例2. キーボードで操作できない──インタラクティブ要素を隠している

たとえば見た目を変更するためにinput要素をdisplay:noneで隠してCSSや画像でチェックボックスを描画している場合、マウスではlabel要素をクリックすれば、関連付けられたinput要素を操作できます。一見問題ないように見えますが、display:noneで隠した要素はフォーカスを受け取ることができないため、キーボードでは操作できません。

原因例

CSSのdisplay: noneで非表示にしている場合

事例2の解決策

キーボード操作でフォーカス可能なまま、インタラクティブ要素を隠す

見た目のためにインタラクティブ要素を隠す場合は、フォーカスをあてられる隠し方を選択しましょう。キーボード操作ができない例では、display:noneで隠していました。display:noneで要素が隠されると、キーボードで操作できません。visibilityプロパティでも同様です。

事例3. キーボードで操作できない──マウスでしか表示されないUI

マウス操作のみで表示できる領域内にUIがある場合も、そのUIをキーボードで操作することはできません。

<div class="VideoPlayer">
    <video src="/movie/sample.mp4">
    </video>
    <div class="VideoPlayer__controls" role="group">
        <button type="button">
        一時停止</button>
        <button type="button">
        再生</button>
    </div>
</div>
>

事例3の解決策

マウスイベントとキーボードイベントを併用し、キーボード操作で表示させる

マウスでしか表示されないUIを改善するには、マウス操作をトリガーするイベントとキーボードイベントを併用します。

事例4. キーボード操作の現在位置がわからない

キーボードで操作するためには、フォーカスがどの要素にあたっているかわかることが重要です。

現在選択しているものがわからなければ、ユーザーは何が起こるかわからないので実行はできません。

デフォルトでは、要素にフォーカスするとそれを示すフォーカスインジケーターが表示されます

事例4の解決策

適切なフォーカスインジケーターを表示する

大きな理由がなければ、ブラウザのデフォルトのフォーカスインジケーターをそのまま表示するとよい

必要なときだけフォーカスインジケーターを表示する

フォーカスインジケーターはデフォルトで表示されます。非表示にしてしまうのはキーボードでの操作を想定していないため、フォーカスインジケーターは意味のないものと認識されているからかもしれません。たとえばボタンをクリックしたとき、ブラウザによってはボタンにフォーカスがあたり、フォーカスインジケーターが表示されます。このことはマウスでの操作には不要な強調表示のように見えてしまうかもしれません。しかし、マウス操作に不要だからといってすべてのフォーカスインジケーターを消してしまうと、キーボードでの操作が著しく不便になります。

まとめ

キーボードで操作することを前提に考える

create by naruogram