：focusと：hoverのスタイルは同じにする必要がありますか？
私はクロスアプリケーションスタイルガイドを再定義している最中です。コントラスト比、テキストサイズ、フォーカス状態など、デザインのアクセシビリティを考慮していることを確認したいと思います。私を悩ませている1つの問題は、ボタンや入力などの：focus状態をマウスの：hover状態と同じにする必要があるか、またはレイヤー化できるように区別する必要があるかどうかです。それらを分離する必要がある、または分離してはならない理由をいくつか教えてください。
フォーカス状態はホバー状態よりも明確である必要があります
マウスオーバーまたは:hover状態は、より直接的な相互作用です（つまり、ユーザーはクリックしたいボタンの上でマウスカーソルを直接制御しています）
一方、:focus状態では、現在ターゲットになっているコンポーネントを特定するために、ページ全体を個別にスキャンする必要があります。たとえば、ユーザーがTABキーを数回押して、フォーカス四角形がアクセスしたいリンク、ボタン、またはその他の入力に到達するか、ENTERキーを押して「クリック」します。ユーザーがTABキーの押下をいつ停止するかを認識し、フォーカスされたターゲットと自信を持って対話できるように、現在フォーカスがあるアイテムは明確である必要があります。ユーザーが見つけやすいフォーカスされたボタンの周りにある種の長方形を配置するのが一般的です。
ホバーイベントの場合、マウスカーソル自体がこの役割を果たすため、フォーカスの四角形は必要ありません。
以下は、Gmailのさまざまなボタンの状態を示す例です...
正直なところ、あなたの：hover状態と：focus状態が、どのアイテムにアクションが実行されるかを正確に示している限り、それらを個別にスタイルする理由はわかりません。 ：focusは基本的にキーボードホバーです。
：focus要素の周りにはボックスを含める必要があると前の答えは正解ですが、outlineプロパティが非表示になっていない限り、問題にはなりません。
個別にスタイリングする価値があるのは、ユーザーが直接操作せずにアイテムに自動フォーカスしている場合のみです。
すべての視覚的状態をマトリックスで組み合わせることができます。確かに、フォーカスはホバーよりも区別が必要ですが、フォーカスされた要素の上にホバーするときに組み合わせることもできます。
これらの状態は、選択されていない項目と選択された項目に結合することもできます。
