MeetUp BarCamp #18 – Accessibilité, le web pour tous.
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
- @accesbilis
- http://www.accesbilis.fr/
- https://www.linkedin.com/in/claire-bizingre
- @WPAccessibility
- https://make.wordpress.org/accessibility/
- http://checklists.opquast.com/fr/
- https://core.trac.wordpress.org/focus/accessibility
- https://a11y.nicolas-hoffmann.net/
- https://van11y.net/fr/
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)
Merci Marc . Très bon article. Très utile. Je vais ranger dans mon dossier « Very important matters »