CSSカスタムプロパティを使用したフォーカススタイルの標準化

プロジェクトをすばやくテストします。ブラウザを開き、タブキーのみを使用し、ボタン、リンク、フォーム要素などのインタラクティブな要素間でナビゲートしてみてください。

あなたが通常のビジョンを持つユーザーである場合、フォーカスがDOM要素間でジャンプするときに視覚的な変化を見ることができるはずです。しかし、視覚的な変更がない場合、または変更が最小限である場合は、訪問者に大きな違いを生む方法を見つけることができます。

この記事では、CSSカスタムプロパティを使用してより効率的にプロジェクトフォーカススタイルをより効率的に管理し、最新のCSSフォーカスセレクターを学習する手法を紹介します。まず、目に見えるフォーカススタイルが非常に重要である理由を理解しましょう。

WCAGフォーカススタイルの標準を満たしてください

目に見えるフォーカスステータスは、Webコンテンツアクセシビリティガイドライン（WCAG）成功標準2.4.7に準拠しています。フォーカスが表示されます。 2.4.7の「理解」文書は、この標準の意図を次のように述べています。

この成功基準の目的は、ユーザーがどの要素がキーボードに焦点を合わせているかを理解できるようにすることです。複数の要素のどの要素がキーボードに焦点を合わせているかをユーザーに知らせることができなければなりません。

今後のWCAG 2.2では、「フォーカスインジケーターがどれほど明白であるべきか」を明確にするために、新しい標準が追加されます。まだドラフトステージにいる間、ガイドを2.4.11で慣れさせて適用することは、間違いなく、今日取ることができるフォーカススタイルを改善するための積極的なステップです。

CSSカスタム属性を使用してフォーカススタイルを管理します

今年使用し始めた手法の1つは、カスケードスタイルシートのメインインタラクティブな基本要素に、できるだけ早く次の設定を含めることです。

 <code>:is(a, button, input, textarea, summary) { --outline-size: max(2px, 0.08em); --outline-style: solid; --outline-color: currentColor; } :is(a, button, input, textarea, summary):focus { outline: var(--outline-size) var(--outline-style) var(--outline-color); outline-offset: var(--outline-offset, var(--outline-size)); }</code>

これにより、カスタムプロパティが添付され、必要に応じてアウトラインスタイルの特定の部分を柔軟にカスタマイズして、要素のコンテキストが変更されたときに焦点が表示されるようになります。

--outline-sizeの場合、 max()を使用して、少なくとも2pxの値を確保しながら、コンポーネント（タイトル内の大きなボタンまたはリンクなど）に基づいて0.08emに基づいてスケーリングを許可します。

ここでよく知られていない可能性のあるプロパティは、要素とアウトラインの間の空間を定義するoutline-offsetです。アウトラインを埋め込むための負の数を提供することもできます。これは、フォーカススタイルのコントラストを確保するのに非常に役立ちます。ルールセットでは、このプロパティを設定して、オプションのカスタムプロパティ--outline-offset --outline-size受け入れて、必要に応じてカスタマイズできるようにします。

輪郭外観の改善

私のキャリアの中で、私は輪郭を削除するように頼まれ、また「見苦しい」と見なされているので、自分で輪郭を削除しました。

現在、輪郭を削除すべきではない理由が2つあります（アクセシビリティ効果を除く）：

1. Chromium and Firefoxでは、 outlineがborder-radiusに続きます！これはbox-shadowを使用してシミュレートするなど、使用したハックを削除することを検討できることを意味します。
2. :focus-visibleでは、目に見えるフォーカスを必要とする入力パターンが検出された場合にのみ、ブラウザにヒューリスティックを使用してフォーカススタイルを表示するように依頼できます。要するに、これは、クリック時にマウスユーザーが表示されないことを意味し、タブキーが動作するときにキーボードユーザーが引き続き表示されます。

フォーム要素は常にフォーカススタイルを表示することに注意する必要があります。これらは:focus-visible動作によって制限されていません。

それでは、ルールセットを強化し、以下を追加して以下に追加しましょ:focus-visible 。最初のブラウザが失われない場合に備えて、古いブラウザ向けに定義したFOCUSスタイル:focusスタイルを保持します。

 <code>:is(a, button, input, textarea, summary):focus-visible { outline: var(--outline-size) var(--outline-style) var(--outline-color); outline-offset: var(--outline-offset, var(--outline-size)); }</code>

ブラウザが理解していないセレクターを処理する方法により、これらのルールを分離する必要があります。たとえ同じアウトラインプロパティを定義していても、それらを結合することはできません。

最後に、この奇妙な外観:focus:not(:focus-visible) :focus-visibleも必要です。

 <code>:is(a, button, input, textarea, summary):focus:not(:focus-visible) { outline: none; }</code>

ChromiumとFirefoxの最新のバージョンが使用に切り替えたことは注目に値します:focus-visibleインタラクティブな要素にフォーカススタイルを適用するデフォルトの方法として、最近WebKitのデフォルトの方法として有効になっているため、Safari Stableバージョンで間もなく登場するはずです。アウトラインの外観をカスタマイズしているため、ルールはまだ有効です。

目に見えるフォーカススタイルに関する詳細なガイダンスについては、今後の2.4.11標準を考慮に入れるため、Sara Soueidanのフォーカスインジケーターに関する素晴らしい包括的なガイドをお勧めします。

フォーカススタイルのデモンストレーション

この例は、これらのインタラクティブな要素のそれぞれと、暗いモードの変更を含むカスタムプロパティを使用してカスタム設定を適用する方法を示しています。ブラウザのサポートに応じて、TABキーを使用しない限り、フォーカススタイルが表示さ:focus-visibleない場合があります。

最後に：フォーカススタイルの観点から、 button特に色のみに依存する場合、状態間に追加の考慮事項があるため、ユニークなインタラクティブな要素です。ヘルプのために、私のプロジェクトButtonBuddy.devでパレットジェネレーターを使用してみてください。

以上がCSSカスタムプロパティを使用したフォーカススタイルの標準化の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。