Activer: se concentrer uniquement sur l'utilisation du clavier (ou appuyer sur l'onglet)

cet excellent article par Romain Komarov Pose une solution viable pour atteindre styles de mise au point pour clavier seulementboutons,liens et d'autres éléments de conteneur tels que travées ou divs (qui sont artificiellement focusable avec l'attribut tabindex)

le Solution:

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;
}

<h2>Keyboard-only focus styles</h2>

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

<a class="btn" href="#x">
    <span class="btn__content" tabindex="-1">
        I'm a link!
    </span>
</a>

<span class="btn" tabindex="0">
    <span class="btn__content" tabindex="-1">
        I'm a span!
    </span>
</span>

<p>Try clicking any of the the 3 focusable elements above - no focus styles will show</p>
<p>Now try tabbing - behold - focus styles</p>

Codepen

1) envelopper le contenu de l'élément interactif original à l'intérieur d'un élément intérieur additionnel avec tabindex="-1" (voir l'explication ci-dessous)

Donc au lieu de dire:

<button id="btn" class="btn" type="button">I'm a button!</button>

faire ceci:

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

2) Déplacer le style css vers l'élément intérieur ( layout css doit rester sur l'élément extérieur d'origine) - de sorte que la largeur / hauteur de l'élément extérieur venir de l'intérieur etc.

3) supprimer le style de mise au point par défaut des éléments extérieurs et intérieurs:

.btn:focus,
.btn__content:focus {
    outline: none;
}

4) Ajouter le concentrer de style de retour à l'intérieur de l'élément uniquement quand l'extérieur de l'élément a le focus:

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

Pourquoi ce travail?

le truc ici est de définir l'élément intérieur avec tabindex="-1" - MDN:

Une valeur négative (généralement tabindex="-1" signifie que l'élément devrait être focalisable, mais ne doit pas être accessible via un clavier séquentiel navigation...

donc l'élément est focalisable par clics de souris ou par programmation, mais d'un autre côté - il n'est pas possible d'y accéder par des 'onglets'de clavier.

Ainsi, lorsque l'élément interactif est cliqué -intérieur de l'élément obtient la concentration. Aucun Style de mise au point ne sera montré parce que nous les avons enlevés.

.btn:focus,
.btn__content:focus {
    outline: none;
}

Notez que seulement 1 Élément du DOM peut être porté à un moment donné (et document.activeElement retourne cet élément) - l'intérieur de l'élément.

d'un autre côté: lorsque nous tabulons en utilisant le clavier -seulement l'élément extérieur obtenir le focus (rappelez-vous: l'élément intérieur a tabindex= "-1" et n'est pas accessible via la navigation séquentielle au clavier) [notez que pour les éléments externes intrinsèquement non focalisables comme un cliquable <div> - nous devons faire artificiellement leur focusable en ajoutant tabindex="0"]

maintenant notre CSS s'active et ajoute les styles de mise au point pour clavier seulement à the inner element.

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

bien sûr, nous voulons nous assurer que lorsque nous l'onglet et appuyez sur enter - nous n'avons pas brisé notre élément interactif et le javascript s'exécute.

Voici une démo pour montrer que c'est bien le cas, notez cependant que vous ne l'obtenez que GRATUITEMENT (c'est à dire en pressant enter pour provoquer un événement de clic) pour des éléments intrinsèquement interactifs comme des boutons et des liens... pour d'autres éléments tels que les couvre - vous besoin de code manuellement :)

//var elem = Array.prototype.slice.call(document.querySelectorAll('.btn'));
var btns = document.querySelectorAll('.btn');
var fakeBtns = document.querySelectorAll('.btn[tabindex="0"]');


var animate = function() {
  console.log('clicked!');
}

var kbAnimate = function(e) {
  console.log('clicking fake btn with keyboard tab + enter...');
  var code = e.which;
  // 13 = Return, 32 = Space
  if (code === 13) {
    this.click();
  }  
}

Array.from(btns).forEach(function(element) {
  element.addEventListener('click', animate);
});

Array.from(fakeBtns).forEach(function(element) {
  element.addEventListener('keydown', kbAnimate);
});

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;
}

<h2>Keyboard-only focus styles</h2>

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

<a class="btn" href="#x">
    <span class="btn__content" tabindex="-1">
        I'm a link!
    </span>
</a>

<span class="btn" tabindex="0">
    <span class="btn__content" tabindex="-1">
        I'm a span!
    </span>
</span>

<p>Try clicking any of the the 3 focusable elements above - no focus styles will show</p>
<p>Now try tabbing + enter - behold - our interactive elements work</p>

Codepen

NB:

1) bien que cela semble comme une solution trop compliquée, pour une solution non-javascript c'est en fait assez impressionnant. "Solutions" CSS-only impliquant :hover et :active pseudo classe style tout simplement ne pas travail. (à moins, bien sûr, que l'on suppose que l'élément interactif disparaît immédiatement en cliquant comme un bouton dans un say modal)

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

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

.btn:hover, .btn:active {
  outline: none;
}

<h2>Remove css :focus outline only on :hover and :active states</h2>

<button class="btn" type="button">I'm a button!</button>

<a class="btn" href="#x">I'm a link!</a>

<span class="btn" tabindex="0">I'm a span!</span>

<h3>Problem: Click on an interactive element.As soon as you hover out - you get the focus styling back - because it is still focused (at least regarding the button and focusable span) </h3>

Codepen

2) Cette solution n'est pas parfaite: firefox sur windows aura toujours des styles de mise au point pour les boutons sur click - mais cela semble être un bug firefox (voir l'article)

3) lorsque les navigateurs implémentent le : focus-ring pseudo class - il peut y avoir une solution beaucoup plus simple à ce problème - (voir l'article) Pour ce que ça vaut, il y a un polyfill:focus-ring -cet article par Chris DeMars

Une alternative pragmatique à clavier uniquement l'accent styles

il est donc étonnamment difficile d'obtenir des styles de mise au point sur clavier seulement. Une solution de remplacement / solution de contournement qui est beaucoup plus simple et peut à la fois satisfaire les attentes du concepteur et également être accessible de focus style comme style pour le vol stationnaire.

Codepen

donc, bien que techniquement ce ne soit pas la mise en place de styles de clavier seulement, il supprime essentiellement le besoin de styles de clavier seulement.