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

キーボードのみのフォーカス スタイルを実装する

背景:
デフォルトのフォーカス スタイルは好みではないかもしれません。要素。ただし、キーボードでアクセスできるユーザーにはフォーカス リングを見えるようにしたいと考えます。フォーカス スタイルをカスタマイズしながらアクセシビリティを維持するのは困難な場合があります。この記事では、キーボード使用時のみフォーカス スタイルを有効にする解決策について説明します。

解決策:

1. デフォルトのフォーカス スタイルの削除:

CSS を使用して、フォーカス可能なすべての要素からデフォルトのフォーカス スタイルを削除します。これにより、フォーカスが望ましくない場合に混乱を招くスタイリングを防ぐことができます。

2. カスタムのフォーカス可能な要素を作成します:

span や div などのコンテナ要素の場合は、次を使用します。 tabindex 属性を使用してフォーカス可能にします。

3. Applyカスタム フォーカス スタイル:

a.内部要素フォーカス:

• コンテナ要素内の内部要素にフォーカス スタイルを追加します。
• これにより、複数のレイヤーを持つ要素でフォーカス スタイルが表示されるようになります。

b.外部要素のフォーカス:

• マウスのクリックまたはタッチ時にフォーカス リングを削除するには、外部要素にイベント リスナーを追加します。
• これにより、マウス操作中の不要なフォーカス スタイルを防ぎながら、アクセシビリティが維持されます。インタラクション。

例コード:

<code class="css">button, a, span {
  -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;
}

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

.btn:focus,
.btn__content:focus {
    outline: none;
}</code>

<code class="html"><button id="btn" class="btn" type="button">
    <span class="btn__content" tabindex="-1">
        I'm a button!
    </span>
</button></code>

結論:
ネストされた内部要素にカスタム フォーカス スタイルを実装し、外部要素からデフォルトのフォーカス スタイルを削除することで、次のことが可能になります。キーボードのみのフォーカス スタイルを有効にします。これにより、フォーカスの外観をカスタマイズしながらアクセシビリティを維持できます。

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