制約が無いと自分の都合よくデザインして終わりにしてしまいますが、制約を付け加えると知識が必要になります。
ValidationすればわかりますがこのページはW3Cのページよりも優れてます。
CSSのoutlineプロパティは、borderのようにスペースを持たないので都合が良さそうですが、レイアウト崩れを防ぐためにデザインで利用するものではありません。
:focus状態の要素に表示されるアウトラインで、キーボードフォーカスにより要素をユーザーが知るのを助けてくれます。
* macOSのみです。*Braveも対応していたのでChromiumベースは対応してます。
これはカーソルを使用できるもので、キーボードでの操作を想定したものですがfocusしていくのとはちょっと違う。カーソルキーを使って操作できますが、どこにあるか多少選択しながらでないとわからないです。
focusしてくれればキーボード操作での要素確認はわかりやすくなります。
outline style
W3C WAI-AIRAのページを見たのがきっかけです。ValidationすればわかりますがこのページはW3Cのページよりも優れてます。
CSSのoutlineプロパティは、borderのようにスペースを持たないので都合が良さそうですが、レイアウト崩れを防ぐためにデザインで利用するものではありません。
Keyboard users, in particular people with disabilities who may not be able to interact with the page in any other fashion, depend on the outline being visible on elements in the :focus state, thus authors must not make the outline invisible on such elements without making sure an alternative highlighting mechanism is provided.CSS Basic User Interface Module Level 3 (CSS3 UI)
:focus状態の要素に表示されるアウトラインで、キーボードフォーカスにより要素をユーザーが知るのを助けてくれます。
まともに機能するのはChromeだけ
[TAB] キーでリンクをフォーカスしてくれるのはChromeだけでした。* macOSのみです。*Braveも対応していたのでChromiumベースは対応してます。
Firefox キャレットブラウズモード（caret browse）
「設定」 > 「一般」の下のほうにブラウズ設定があります。これはカーソルを使用できるもので、キーボードでの操作を想定したものですがfocusしていくのとはちょっと違う。カーソルキーを使って操作できますが、どこにあるか多少選択しながらでないとわからないです。
