フォーカスリングを消さない設計：キーボード利用者12人への聞き取りから

フォーカスリングは「デザインを崩すもの」として消されることが多い。しかし、マウスを使わない人にとっては、画面上で自分がどこにいるかを示す唯一の手がかりになる。

本誌では、日常的にキーボードで操作する12人（運動機能障害のある人、スクリーンリーダー併用者、効率のためにキーボードを好む開発者を含む）に、普段使っているWebサイトを操作してもらいながら聞き取りを行った。

頼りにしているのは「形の変化」

12人中9人が、色の変化よりも「枠が出る」「下線が太くなる」といった形の変化を手がかりにしていると答えた。色だけの変化は、背景との組み合わせによって見落としやすいという。

色が少し濃くなるだけのボタンは、何回Tabを押したか数えながら使っています。

:focus-visibleで両立できる

マウスでクリックしたときにも枠が出るのが嫌、という理由でフォーカス表示を消すケースは多い。:focus-visibleを使えば、キーボード操作時だけ枠を表示できる。主要ブラウザで対応しているので、outline: noneを書く理由はほぼなくなった。

:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; } フォーカスの「移動先」も設計する

聞き取りで多かった不満は、表示よりも移動の順序だった。モーダルを閉じたあとにフォーカスがページの先頭に戻る、ページ遷移後にどこにいるかわからない、といった問題だ。

本誌のサイトでは、ページ遷移後に見出しへフォーカスを移し、スクリーンリーダーにはページタイトルを読み上げさせている。小さな実装だが、聞き取りに協力してくれた人の多くが最初に気づいた改善点だった。

チェックの手順

マウスを机から離し、Tabキーだけでページの主要な操作を終えられるか確認する

フォーカス中の要素が、画面をざっと見て2秒以内に見つかるか確認する

モーダルやメニューを閉じたあと、フォーカスが元の位置に戻るか確認する