MeetUp BarCamp #18 – Accessibilité, le web pour tous.

Par Marc | 5 mai 2017 |

Pour le 18ème MeetUp BarCamp, le second organisé dans les locaux de notre nouveau partenaire, le Remix Coworking, l’amie Claire Bizingre qui œuvre de longue date à rendre le web accessible au plus grand nombre avec Accesbilis, nous a mitonné un atelier aux petits oignons et nous a enseigné moult techniques fort utiles.

A11Y Kézaco ?

Les initiés de l’accessibilité (accessibility comme dirait Shakespeare), utilisent un jargon curieux : A11Y, c’est à dire un « A », puis 11 lettres, puis un « Y ». Si vous cherchiez des noms pour votre robot, ça peut donner des idées. Maintenant que vous êtes initiés, voyons un peu ce qu’on peut faire pour rendre accessibles nos sites à celles et ceux qui ont des perceptions différentes ou empêchées.

Les internautes concernés par une meilleure accessibilité

Toute une population qui vit parmi nous (et vice-versa) a besoin qu’on construise des sites web en pensant à eux : les malvoyants, les daltoniens, les non-voyants, les malentendants et les sourds, les handicapés moteurs des membres supérieurs, les dyslexiques, les personnes atteintes de handicap mental, les plus tout jeunes…
On tend à obtenir une accessibilité universelle.

Quelques techniques et outils à utiliser en général dans la construction d’un site web

Garder présente à l’esprit l’accessibilité à chaque étape : cahier des charges, conception éditoriale et rubriquage, charte graphique, intégration, développement, rédaction des contenus.
Se servir des outils disponibles pour vérifier le niveau d’accessibilité de son site. Par exemple les check-lists Opquast.
Ne plus souligner ses textes, sauf en cas de liens hypertextes.
Ne plus justifier au pavé les textes, privilégier les fers à gauche, à droite ou aligner au centre.
On a le droit d’accentuer les majuscules.
Faire attention au contraste des couleurs. On peut utiliser des outils comme Colour Contrast Analyser.
Respecter la hiérarchie des titres : H1 pour la page, H2 pour des titres de paragraphe, H3 pour des titres de paragraphes secondaires, etc.
Renseigner correctement l’attribut ALT des images, faites preuve d’empathie et soyez descriptifs.
Préciser dans le title des liens s’il s’ouvrira dans une nouvelle fenêtre.
Indiquer le format et le poids des fichiers en téléchargement.

Quelques techniques et outils à utiliser avec WordPress dans la construction d’un site web.

Les techniques indiquées au paragraphe précédent s’appliquent bien sûr quand on fabrique un site avec WordPress, mais voici des indications spécifiques à notre outil préféré.

Insérer des caractères majuscules accentués grâce à l’outil (Oméga) « caractère spécial » de l’éditeur wysiwyg.
Envisager de supprimer l’éditeur de couleur de texte de l’éditeur wysiwyg.
Envisager de supprimer le choix Titre 1/H1 de l’éditeur wysiwyg.
Logo «Apparence», attention à l’alternative vide.
Pour les plus avancés, des modifications du code permettent d’améliorer l’accessibilité des widgets, des unités utilisées pour la taille du texte, les nuages de tags (balises), commentaires, etc.
Développer vos propres thèmes pour intégrer l’A11Y : https://anybodesign.com/coder-propre-theme-wordpress/
Si vous cherchez des thèmes, utilisez le filtre «accessibility ready»

Quelques liens utiles

Le diaporama du meetup

Vous pouvez télécharger les diapos du meetup avec le lien ci-dessous :

A11Y-et-WordPress (PDF – 915 ko)

Merci d’avoir lu mon article, faites de beaux sites (accessibles)

Marc Saffar

Publié dans Meetup