キーボードのアクセシビリティを維持しながらフォーカス スタイルを無効にするにはどうすればよいですか?

不要なときはフォーカスを無効にできますか?

フォーカスがあるときのナビゲーションの見た目が気に入らないため、不要なときにフォーカスを無効にしたいと考えています。その上で。 .active と同じスタイルを使用しているため、混乱を招きます。ただし、キーボードを使用する人にとっては、このクラスを取り除く必要はありません。

問題は解決される可能性があります

一部の投稿者は、:focus-visible 疑似クラスについて言及していますが、現在はこのクラスが使用されています。適切なブラウザサポートがあります。仕様に従い、ブラウザは、ユーザーがキーボードやその他の非ポインティング デバイスを介してページを操作するときなど、ユーザーにとって有益な場合にのみフォーカスを示す必要があります。

これは、ほとんどの場合、ブラウザでは、ユーザーがボタン (または別のフォーカス可能な要素) をクリック/タップすると、ボタンにフォーカスがあってもユーザー エージェントはフォーカス リングを表示しません。この場合、フォーカス リングはユーザーにとって役に立たないからです。

下位互換性

このように :focus-visible を使用すると考えられる問題は、これをサポートしていないブラウザではデフォルトのフォーカス リングが表示されることです。

元の回答

:focus-visible ソリューションでは下位互換性が十分でない場合は、ボタン、リンク、その他のコンテナ要素に対してキーボードのみのフォーカス スタイルを実現できます。次の解決策:

button {
  -moz-appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  outline: none;
  font-size: inherit;
}

.btn {
  all: initial;
  margin: 1em;
  display: inline-block; 
}

.btn__content {
  background: orange;
  padding: 1em;
  cursor: pointer;
  display: inline-block;
}


/* Fixing the Safari bug for `<button>`s overflow */
.btn__content {
    position: relative;
}

/* All the states on the inner element */
.btn:hover > .btn__content  {
    background: salmon;
}

.btn:active > .btn__content  {
    background: darkorange;
}

.btn:focus > .btn__content  {
    box-shadow: 0 0 2px 2px #51a7e8;
    color: lime;
}

/* Removing default outline only after we've added our custom one */
.btn:focus,
.btn__content:focus {
    outline: none;
}

この手法では、すべてのスタイルがコンテナの内部要素に配置され、マウスの使用時にフォーカス スタイルが表示されなくなります。

以上がキーボードのアクセシビリティを維持しながらフォーカス スタイルを無効にするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。