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.

1!e Meetup WordPress Paris Claire parle d'accessibilité

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 la balise 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

1 commentaire

  1. Photo du profil de Sergio Sergio sur 11 mai 2017 à 21:04

    Merci Marc . Très bon article. Très utile. Je vais ranger dans mon dossier « Very important matters »

Laissez un commentaire