Aria, accessibilité, image et bouton

a11yConfig : insertion automatique en entête du thème Berlin, déc. 2019

Dans l’optique d’installer le plugin en cours de développement sur mon blog, ici-même donc et probablement ailleurs, j’aimerais assez remplacer le bouton intitulé « Accessibilité » par une image en conservant évidemment ce qu’il faut pour que ce soit lisible pour tous, lecteurs d’écran compris.

Pour l’instant le code HTML du bouton installé par la bibliothèque d’Access42 est le suivant :

<button id="a42-ac-button" data-accessconfig-button="true">Accessibilité</button>

Je suppose qu’on pourrait modifier ça en :

<button id="a42-ac-button" data-accessconfig-button="true"><img src="accessibility.svg" alt="Accessibilité" /></button>

Mais est-ce que ça reste accessible ?

Autre question, est-ce que cette icône est suffisamment « parlante » pour illustrer ce bouton ou pas :

Symbole chaise roulante, déc. 2019


En fait, après avoir relu le code de la bibliothèque d’Access42, je me demande s’il ne vaudrait mieux pas passer du côté CSS pour faire, plutôt que de modifier le markup du bouton.

En stylant le bouton avec quelque chose qui ressemblerait à ça :

#a42-ac-button {
  border: none;
  width: 3em;
  height: 3em;
  background-image: url(index.php?pf=a11yConfig/img/accessibility.svg), none;
  background-size: 3em auto;
  margin: .5em;
  overflow: hidden;
  color: transparent;
}

Ajouter un commentaire

Les commentaires peuvent être formatés en utilisant une syntaxe wiki simplifiée.

Ajouter un rétrolien

URL de rétrolien : https://open-time.net/trackback/14435

Haut de page