web-dev-qa-db-fra.com

WCAG: Firefox et Edge n'affichent pas de contour sur les éléments d'entrée focalisés lorsque des styles sont appliqués

Je crée un formulaire, qui suit certaines directives WCAG. L'un d'entre eux est:

G165: utilisation de l'indicateur de focus par défaut pour la plate-forme de sorte que les indicateurs de focus par défaut à haute visibilité soient conservés} .

Le résumé de cette règle est:

Les systèmes d'exploitation ont une indication native de focus, disponible dans de nombreux agents utilisateurs. Le rendu par défaut de l'indicateur de mise au point n'est pas toujours très visible et peut même être difficile à voir sur certains fonds. Cependant, de nombreuses plates-formes permettent à l'utilisateur de personnaliser le rendu de cet indicateur de focus. La technologie d'assistance peut également modifier l'apparence de l'indicateur de focus natif. Si vous utilisez l'indicateur de focus natif, tous les paramètres système relatifs à sa visibilité seront reportés sur la page Web. Si vous tracez votre propre indicateur de focus, par exemple en coloriant des sections de la page en réponse à une action de l'utilisateur, ces paramètres ne seront pas reportés et AT ne pourra généralement pas trouver votre indicateur de focus .

_ {(c'est moi qui souligne)} _

Afin de respecter cette règle, je souhaite conserver l'indicateur de focus par défaut du système d'exploitation pour les éléments de formulaire.

Cependant, je suis confronté à différents problèmes ici.

Dans Firefox sur macOS:

Dès que je modifie le style de l'élément (par exemple en modifiant les paramètres de la bordure), le focus par défaut est perdu1.

Cela est étrange, car border et outline sont des attributs de style différents.

Dans Firefox et Edge sous Windows:

Les navigateurs affichent un indicateur de focus constitué uniquement d'une bordure de couleur différente lors de la saisie d'un élément de formulaire, à condition qu'il ne soit pas élégant. Chrome, par contre, a un indicateur en contour - comme sur macOS2.

Voici un extrait pour démontrer le comportement (essayez alternativement ceci fiddle ):

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

Sidenote: Il n’ya pas de différence de comportement si label- éléments sont présents ou non.

Mes questions sont:

  • Pourquoi Firefox et Edge réagissent-ils de la sorte sur macOS et Widnows? Pourquoi utilisent-ils la bordure au lieu du contour du document?
  • Comment puis-je forcer ces navigateurs à afficher les indicateurs de focus par défaut du système d'exploitation même lorsque des styles personnalisés sont appliqués?
  • Lorsque quelqu'un a créé un indicateur personnalisé, sera-t-il toujours affiché dans Firefox et Edge, même si l'indicateur par défaut ne l'est plus?

Avec ces problèmes, je me demande si cette règle est même possible à atteindre. En fin de compte, je dois peut-être définir manuellement outline sur focus pour obtenir le même comportement dans tous les navigateurs et ignorer cette règle.

1 Voici une capture d'écran montrant le problème sur macOS:

2 Voici une capture d'écran montrant le problème sous Windows:

htmlcssfocusoutlinewcag
11
lampshade

Comme vous l'avez déjà noté, l'apparence et le comportement des éléments de formulaire sont basés sur la mise en œuvre et diffèrent d'un navigateur à l'autre. 

Chaque élément de formulaire a son apparence par défaut - un ensemble de styles tels que border, background etc.

Lorsque vous essayez de modifier les styles par défaut, le navigateur peut les remplacer règle par règle (comme Chrome) ou supprimer l'apparence par défaut (comme Firefox).

Donc, si vous voulez avoir la même apparence dans "tous" les navigateurs, vous devez le définir explicitement.

Par exemple.:

.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">

Lire plus ici .

1
Kosh Very

Chaque navigateur a ses propres propriétés. Comme j'ai cherché, vous devriez coder comme ci-dessous:

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

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

Si vous souhaitez en savoir plus sur ce concept, voir Documents MDN à comprendre.

J'espère que ma réponse vous aidera.

0
AmerllicA

La propriété CSS outline existe et vous pouvez l'utiliser comme ceci:

.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">

Si cela ne fonctionne pas ou ne s'affiche pas, cela peut signifier qu'il y a un autre style qui le chevauche afin que vous puissiez le remplacer en ajoutant !important

0
awesomeguy