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 :
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;
}
1 De Biou -
Pour les boutons qui contiennent une image, tu peux aussi utiliser <input type=”image”>
2 De Franck -
Ah oui c’est aussi une possibilité, merci Biou !
3 De Philippe -
Pas sûr que l’image du fauteuil roulant illustre bien un plugin destiné à prendre en compte un handicap visuel. N’y a-t-il pas une icône plus usitée et appropriée que tu pourrais reprendre ?
J’ai trouvé ça
4 De Franck -
C’est vrai que celle associée aux déficiences visuelles semble plus appropriée !
5 De Llu -
Pour le picto accessibilité/handicap, c’est jamais évident.
Le picto dv ne convient pas complètement. La dyslexie n’est pas une déficience visuelle par exemple.
J’aime assez l’homme de Vitruve (le symbole choisi par Apple pour l’accessibilité notamment), mais le symbole international du handicap que tu as initialement choisi convient également.
Il est imparfait parce qu’on le confond avec handicap moteur mais le picto veut bien dire accessibilité/handicap.
Pour le bouton, si la personne qui gère le blog pouvait avoir le choix, mais j’imagine que ça complique un peu si on veut que ça se fasse bien pour des non techos.
6 De Franck -
Pour le style du bouton, image ou texte, je pense que je laisserai ça au choix de l’administrateur du blog. C’est d’ailleurs pour ça que je n’ai pas inclus ce billet dans la série à propos du développement du plugin.
Quoi que, maintenant que j’y pense… :-)
7 De Franck -
En fait je pourrais laisser le choix entre le symbole chaise roulante, assez parlante, déficience visuelle — même si la dyslexie n’est qu’indirectement liée à ça, ça reste tout de même en lien avec la vision —, et texte.
Donc une petite nouvelle option avec texte (par défaut), image 1 ou image 2, pourrait convenir.
8 De Franck -
Ah et côté taille de bouton je laisse ça au bon soins du thème, avec peut-être une largeur/hauteur min à 2.5em (environ 40px pour un navigateur réglé sur 16px pour la police standard).