Écrire et rendre accessible sur wordpress.

Environ 4% des sites web sont accessibles. En France, 20% de la population est victime d’illectronisme. L’accessibilité est un sujet qui concerne tout le monde. 

Pour participer au changement, je te propose ce petit tuto sur l’écriture accessible.

Travaillons ensemble.

Comprenons de quels outils les utilisateurs ont besoin.

  • Le zoom : il permet d’ajuster à ta guise l’affichage de ton site. C’est à dire d’agrandir ou de réduire le texte. 
  • Le lecteur d’écran : c’est un logiciel PC / Mac / iOS/ Android qui permet de lire le contenu de ton site (d’où l’importance d’avoir une écriture accessible et claire).

La couleur et le contraste pour mettre en lumière ton site.

Cela fait partie du charme de ton site. C’est très important. Si ton fond est foncé et que le texte n’est pas suffisamment  clair, ton contenu ne sera pas lu correctement. 

Et inversement, si ton fond est clair et que le texte n’est pas suffisamment sombre, ton lecteur rencontrera des difficultés et décidera de quitter ton site. 

Comment y remédier ?

  • Définir une couleur de fond pour tes pages. 
  • Utiliser un analyseur de contraste. 
  • Effectuer des tests pour vérifier.

Voici un lien vers un soft qui te permettra d’y voir plus clair. https://www.avh.asso.fr/fr/favoriser-laccessibilite/accessibilite-numerique/outils-utiles

Je te laisse le temps de télécharger le petit soft et ensuite reviens.

Je vais t’expliquer comment l’utiliser. Il n’est pas compliqué à prendre en main. 

Test: trouve le bon ratio de contraste entre ton fond et ton texte. Essaye de faire matcher les deux.

Exemple 1 : 

texte rouge sur fond gris : 

voici le texte

Ce n’est pas idéal à la lecture sur mobile et sur ordinateur. Que la taille de caractère soit plus grande ou non.

Exemple 2 :

Texte blanc sur un fond bleu :

Le contraste entre le fond et la couleur apportera une lecture agréable de ton site.

voici le texte 

Maintenant, c’est a toi de jouer. 

Si le sujet te passionne, il y a le lien ci-dessous mais nous n’avons pas terminé. Tu le regarderas plus tard. 

https://stephaniewalter.design/fr/blog/accessibilite-et-couleurs-outils-et-ressources-pour-concevoir-des-produits-accessible/

J’ai dit plus tard……

La taille, la police et style. Une histoire de rédacteur.

C’est un sujet de taille, sans mauvais jeu de mots. Et oui, la taille compte en accessibilité. 

Les navigateurs, ordinateurs, smartphones, tablettes donnent accès à des fonctions d’agrandissement. Si la taille du texte n’est pas adaptée, l’agrandissement sera dégradé en qualité. Pour être simple, le texte risque d’être une bouillie de pixel.

Il est conseillé de garder une taille de 12pt minimum car plus petit c’est désagréable à utiliser.

Quant à la police de caractère, appelée la typographie, il vaut mieux en choisir une sans-serif (sans empattement) pour apporter une meilleure compréhension et une meilleure lecture à tous.

C’est parti ! Vous pouvez commencer à rédiger mais il faut savoir que rédiger accessible, c’est avoir des notions de sémantique et des notions de structure de texte.

Le rédacteur doit travailler par paragraphe et mettre en place des titres et sous-titres. Il est important de bien les hiérarchiser pour éviter de passer du titre 2 au titre 4 sans aucune raison. 

Il est conseillé d’utiliser des listes ordonnées, ou non ordonnées pour structurer tes idées. 

N’oublie de mettre des accents à tes majuscules.

WordPress met à disposition un éditeur de texte qui ouvre les possibles. Tu peux aller voir mais plus tard,  quand on aura fini le TUTO car il y en encore de choses à voir.

https://wordpress.com/fr/support/editeur-wordpress/

Les liens hypertextes, ce n’est pas toujours important.

Les liens hypertextes permettent de rediriger tes lecteurs vers un complément d’information ou alors, pourquoi pas, ton e-shop. N’oublie pas de le décrire et de l’intituler car « cliquer ici » , « c’est par là ». « lire la suite » ne sont pas forcément des liens accessibles. Il est préférable d’avoir une petite présentation du lien ou alors d’utiliser l’intitulé de la page cible.

Les images, elles ont un truc à dire. 

Les images  sont utilisées pour montrer quelque chose . Si l’image a son importance dans ton article, c’est super, car tu vas l’enrichir. Mais n’oublie pas de décrire ton image en quelques mots.

  •  Sois précis, et concis. 
  •  Utilise les bons mots pour décrire l’image.
  •  Bannir « image de ».

Cela te dit de faire un petit jeu ? Je te partage une image et tu vas essayer de trouver la bonne réponse. Laisse ta réponse en commentaire.

https://cdn.pixabay.com/photo/2017/12/22/08/01/image-3033200_960_720.jpg

Voilà, je t’ai partagé quelques conseils pour  écrire « accessible ». Ces conseils ne sont pas spécifiques à WordPress. Tous les bons CMS te permettront de rendre accessible ton texte.

En résumé :

  • Contraste des couleurs entre fond et texte
  • Police sans-sérif, minimum taille 12 pt
  • Pas trop d’effets de style
  • Des liens hypertexte explicites
  • Des images avec le “Alt” précisé

Alors c’est à ton tour.

Liens vers les références citées : 

http://www.accesbilis.fr/rediger-un-contenu-accessible-sous-wordpress/

https://www.avh.asso.fr/fr/favoriser-laccessibilite/accessibilite-numerique/accessibilite-internet/grand-public#couleurs_contastes

https://wiki.lelutinduweb.fr/ecriture-inclusive/


Couleur contraste 

comprendre de quoi on parler :https://popstartup.fr/choisir-couleurs-site-web/

jouer à l’apprentie chimiste https://www.accede-web.com/notices/fonctionnelle-graphique/couleurs/assurer-un-contraste-suffisant-entre-les-textes-et-larriere-plan/

les règles https://stephaniewalter.design/fr/blog/accessibilite-et-couleurs-outils-et-ressources-pour-concevoir-des-produits-accessible/

assurer un contraste important https://www.accede-web.com/notices/fonctionnelle-graphique/couleurs/

éditeur de texte par block de wordpress https://wordpress.com/fr/support/editeur-wordpress/

Zoubeir Haffez

@ZoubeirH

Documentariste / Auteur sur les nouvelles technologie, l’accessibilité et le handicap.

Linkedin.com/in/zoubeirhaffez

Auteur
zoubeirh

Documentariste / Auteur sur les nouvelles technologie, l’accessibilité et le handicap.

Laisser un commentaire

1 commentaire

Pour aller plus loin

%d blogueurs aiment cette page :