洗練されたユーザーエクスペリエンスを作成するには、:hover
が必要であることは誰もが知っています。これにより、ユーザーは要素のクリックオプションを認識できます。
ボタンに:focus
はどのような値を追加しますか?ユーザーは、実際にボタンを押したというフィードバックを受け取ります。しかし、私のすべてのプロジェクトは通常、「読み込み中」、「送信中」など、アクションが実行中であることを示す他のインジケーターを表示します。
ボタンの:focus
は通常、ほんの一瞬だけ表示されるため、本当に必要ですか?
誰もがマウスを使用するわけではありません。
フォーカスは、フォーム/ページのインタラクティブな要素間を移動するためにTabキーを押す必要があるユーザーにとって不可欠です。ボタンの:focusスタイルを作成すると(理想的には、他の要素の:focusと同様)、ユーザーはテキスト入力を入力しなくなったこと、およびReturnキーを押すと送信ボタンがアクティブであることを確認できます。
マウスを使用しているユーザーでも、Tabキーを押して入力フィールドを移動し、Enterキーを押してフォームを送信できると便利です。多くの場合、データ入力に携わる人々は、1日に数百回入力されるフォームのtype-Tab-type-Tab-Enterのようなパターンを作成します。便利な:focusスタイルを使用すると、適切なタイミングでEnterキーを押していることがわかります。
フォーカスはフォーム要素に使用されます。これは、たとえばテキスト入力ボックスをクリックしたことを示しており、その要素が選択されている限り、onFocusのままです。
編集:送信ボタンの場合、マウスボタンを押している間は、「ハイライト」または表示するために何をしても:focusが存在します。これの使用例はより制限されています。
編集2:(コードをコメントに入れることができませんでした)
ボタンに:focusを使用できます。
<style>
input:focus {
background-color: #FFCC00; // yellow
</style>
<input type="text">
<input type="text">
<input type="submit">
Nathan Rabeの回答に記載されているのと同じ理由で使用します。古いスタイルのDOSタブに慣れ、インターフェースに入り、新しいインターフェースに慣れる習慣を持っている人がたくさんいます。