Rendre votre page accessible

Une page accessible peut être utilisée par tout le monde : les personnes qui utilisent un lecteur d’écran, qui voient mal, qui évitent les mouvements à l’écran, ou qui regardent simplement leur téléphone en plein soleil. LinkHarbor s’occupe de beaucoup de choses automatiquement ; certaines dépendent de vous. Cet article montre à quoi faire attention.

#Ce que LinkHarbor fait automatiquement

• Si un visiteur a activé la réduction des animations dans son système, les vidéos d’arrière-plan ne se lancent pas, et les effets de défilement et de parallaxe ainsi que les animations au survol sont désactivés
• Le bloc « Titre » est rendu comme un vrai titre, qui sert de repère aux lecteurs d’écran
• Les images des blocs « Image » et « Galerie » reçoivent votre texte alternatif comme description
• Si vous n’avez pas choisi de couleur de texte pour les boutons, LinkHarbor en choisit une adaptée à la couleur du bouton

#Textes alternatifs pour les images

Un texte alternatif décrit ce que montre une image. Les lecteurs d’écran le lisent à voix haute, et il s’affiche lorsqu’une image ne se charge pas.

Bloc « Image »

Le champ « Texte alternatif » dans l’éditeur de bloc.

Bloc « Galerie »

Un « Texte alternatif » de 200 caractères au maximum par image.

• Décrivez le contenu, pas le fichier : « Cappuccino avec latte art sur une table en bois » plutôt que « IMG_2041 »
• Pour les images contenant du texte, ce texte doit figurer dans le texte alternatif
• Restez bref – une phrase suffit généralement

Où trouver ces champs est expliqué dans Les blocs gratuits en détail et Blocs de contenu.

#Structurer avec des titres

Divisez les pages longues avec le bloc « Titre » plutôt qu’avec du texte en gros caractères. Les utilisateurs de lecteurs d’écran sautent de titre en titre et trouvent ainsi rapidement ce qu’ils cherchent – comme « Horaires d’ouverture » ou « Contact ».

#Des intitulés de liens clairs

• Chaque lien doit être compréhensible seul : « Menu en PDF » plutôt que « Cliquez ici »
• Évitez les titres identiques pour des cibles différentes
• Les emojis en début de titre sont lus à voix haute ; utilisez-les avec parcimonie

Plus d’infos sur les liens dans Ajouter et styliser des liens.

#Contraste et lisibilité

• Veillez à un contraste suffisant entre le texte et l’arrière-plan, surtout avec les couleurs pastel claires
• Si du texte se trouve sur une image ou une vidéo d’arrière-plan, utilisez l’« Opacité de la superposition » du thème pour qu’il reste lisible
• Pas de texte important uniquement dans une image – les visiteurs avec un lecteur d’écran ne peuvent pas le lire
• Choisissez une police facile à lire et une taille de police pas trop petite pour les blocs de texte

Vous réglez couleurs, arrière-plan et police dans le thème, voir Design.

#Utiliser le CSS personnalisé avec prudence

Avec le CSS personnalisé, vous pouvez modifier presque tout – y compris des éléments importants pour l’accessibilité. Ne masquez pas les contours de focus, ne réduisez pas trop le texte et, après vos modifications, testez aussi la page au clavier. Voir CSS personnalisé.

#Testez vous-même

1. Activez le lecteur d’écran de votre téléphone (VoiceOver sur iPhone, TalkBack sur Android) et écoutez votre page
2. Augmentez la taille du texte dans les réglages système et vérifiez que tout reste lisible
3. Regardez la page en pleine lumière et en mode sombre