web-dev-qa-db-ja.com

WCAG：FirefoxとEdgeは、スタイルが適用されたときにフォーカスされた入力要素のアウトラインを表示しません

いくつかのWCAGガイドラインに従ったフォームを作成しています。それらの1つは：

G165：プラットフォームのデフォルトのフォーカスインジケーターを使用して、視認性の高いデフォルトのフォーカスインジケーターが引き継がれるようにします 。

このルールの概要は次のとおりです。

オペレーティングシステムには、多くのユーザーエージェントで利用できるフォーカスのネイティブ表示があります。フォーカスインジケーターのデフォルトのレンダリングは、常に目立つとは限らず、特定の背景に対して見るのも難しいです。 ただし、多くのプラットフォームでは、ユーザーがこのフォーカスインジケーターのレンダリングをカスタマイズできます。支援技術は、ネイティブフォーカスインジケーターの外観を変更することもできます。ネイティブフォーカスインジケーターを使用する場合、その可視性に関するシステム全体の設定はすべてWebページに引き継がれます。たとえば、ページのセクションに色を付けるなどして独自のフォーカスインジケーターを描画する場合ユーザーアクションへの応答では、これらの設定は引き継がれず、ATは通常、フォーカスインジケーターを見つけることができません。

（強調鉱山）

このルールに準拠するために、フォーム要素のOSのデフォルトのフォーカスインジケーターを維持したいと思います。

しかし、私はここでさまざまな問題に直面しています。

macOS上のFirefoxの場合：

要素のスタイルを変更すると（境界線の設定を変更するなど）、デフォルトのフォーカスが失われます1。

borderとoutlineは異なるスタイル属性であるため、これは奇妙です。

FirefoxおよびWindows上のEdgeの場合：

フォーム要素を入力すると、スタイルが設定されていない限り、ブラウザには異なる色の境界線のみであるフォーカスインジケータが表示されます。 Chrome一方、macOSのように、アウトラインとしてインジケーターがあります2。

動作を示すスニペットを次に示します（または、これを試してください fiddle ）：

.b {
  border: 1px solid red;
}
<form>
    <input class="a" type="text">
    <input class="b" type="text">
</form>

補足として：label-要素が存在するかどうかにかかわらず、動作に違いはありません。

私の質問は次のとおりです。

  • FirefoxとEdgeがmacOSとWidnowsでそのように反応するのはなぜですか？ドキュメントのアウトラインの代わりに境界線を使用するのはなぜですか？
  • カスタムスタイルが適用されている場合でも、これらのブラウザにOSのデフォルトのフォーカスインジケータを表示させるにはどうすればよいですか？
  • 誰かがカスタマイズされたインジケーターを作成した場合、デフォルトのインジケーターが表示されなくなっても、FirefoxとEdgeに表示されますか？

これらの問題で、このルールを達成することさえ可能かどうか疑問に思います。結局、すべてのブラウザで同じ動作を取得し、このルールをスキップするには、outlineにfocusを手動で設定する必要があるかもしれません。

1 macOSの問題を示すスクリーンショットは次のとおりです。

2 これは、Windowsの問題を示すスクリーンショットです。

htmlcssfocusoutlinewcag
12
lampshade

すでにお気づきのように、フォーム要素の外観と動作は実装ベースであり、ブラウザごとに異なります。

すべてのフォーム要素には、ブラウザのデフォルトの外観（border、backgroundなどの一連のスタイル）があります。

デフォルトのスタイルを変更しようとすると、ブラウザはルールごとにオーバーライドするか（Chromeのように））、デフォルトの外観をまったく破棄する（Firefoxのように）場合があります。

したがって、「すべての」ブラウザで同じ外観にしたい場合は、明示的に設定する必要があります。

例えば。：

.b {
  border: 1px solid red;
  -moz-appearance: none;
  -webkit-appearance: none;
}

.b:focus {
  outline: none;
  box-shadow: 0 0 2px 2px Lime
}
<input class="a" type="text">
<input class="b" type="text">

続きを読む ここ 。

1
Kosh Very

各ブラウザには独自のプロパティがあります。私が検索したとき、次のようにコーディングする必要があります。

input.b {
  border: 1px solid #f00;
  -webkit-appearance: none;
  -moz-appearance: none;
}

input.b:focus {
  outline: none;
  box-shadow: 0 0 1px 1px #0a0;
}

この概念について詳しく知りたい場合は、 MDN Docs を参照して理解してください。

私の答えがお役に立てば幸いです。

0
AmerllicA

CSS outlineプロパティは存在し、次のように使用できます。

.b {
  border: 1px solid red;
  -moz-appearance: none;
  -webkit-appearance: none;
}

input:focus {
  outline: 2px solid #2772DB;
}
<input class="a" type="text">
<input class="b" type="text">

動作しない、または表示されない場合は、別のスタイルが重複している可能性があるため、!importantを追加してオーバーライドできます。

0
mathmaniac88