Saviez-vous que les sites web qu’en France il existe des référentiels Accessiweb et RGAA 3.0 (Référentiel Général d’Accessibilité pour les Administrations). Dans ces référentiels vous trouvez les règles d’accessibilité pour les sites web du service public (ministères, collectivités locales, etc), obligatoires par la loi du 11 février 2005 pour l’égalité des droits et des chances, la participation et la citoyenneté des personnes handicapées. Probablement pas. Je n’y pensais pas non plus au quotidien. Je n’ai pas fait beaucoup plus que d’ajouter du texte alternatif aux images. Et pourtant, un site web accessible est bien plus que cela. Tout ce que vous pouvez lire ci-dessous. Et oui, c’est une longue article, mais je vous ai préparer une liste de contrôle pratique.

Un exemple réel

J’ai été contacté par Tatjana Wehrmann et Sander Smale de Pilot Radio. Ils avaient entendu dire que je créais des sites web. Ils avaient besoin d’un site web pour leur station de radio numérique. J’ai pensé que ce serait un beau défi, quelque chose de différent des sites web que j’ai récemment eu le plaisir de créer pour des hébergements touristiques.

Le plus important de tous : l’accessibilité

Le défi s’est avéré un peu plus grand. Tatjana et Sander sont aveugles / malvoyants. Il était donc extrêmement important que le site web soit également accessible via un lecteur d’écran. Et que les fonctionnalités ajoutées leur conviendraient également. Il est donc allé un peu plus loin que l’ajout de textes alternatifs aux images. Mais c’était un défi que j’ai accepté avec plaisir. Le résultat était le site Web de Pilot Radio. Ce site est actuellement hors ligne ; Tatjana et Sander se concentrent davantage sur leurs blogs consacrés à l’accessibilité.

Différents éléments pour un site web accessible

Pour un site web accessible, vous devez tenir compte des éléments suivants :

• Images
• Animation & transformation
• Audio & video
• Formulaires
• Géo-information
• Navigation
• Fichier PDF
• Tableaux
• Technique & code
• Texte
• Conception

Images

Les lecteurs d’écran lisent tout ce qui se trouve sur un site web. Y compris les images. Du moins, lorsque le texte alternatif est saisi. Ce texte alt doit décrire ce que vous pouvez voir dans une image. Je travaille avec le thème Divi d’Elegant Themes et en construisant ce site, j’ai découvert que Divi n’acceptait pas toujours les textes alternatifs saisis dans la bibliothèque de médias ! Il l’a fait dans les albums de photos, mais pas dans les autres modules. Là, j’ai dû ajouter à nouveau manuellement les textes alternatifs sous Attributs dans l’onglet Avancé. Et même cela n’a pas toujours fonctionné ! C’est pourquoi j’ai également ajouté un lien textuel sur la page Podcast afin que les boutons d’abonnement soient faciles à lire pour les lecteurs d’écran également.

Google examine également ces textes alternatifs. Cela signifie que les internautes peuvent également arriver sur votre site web via des images. Les images font donc également partie de l’optimisation des sites web pour les moteurs de recherche !

Animation & transformation

L’animation sur un site web peut aider à attirer l’attention sur quelque chose ou à bien l’expliquer quelque chose. Mais les éléments tape-à-l’œil peuvent aussi provoquer des problèmes de santé, comme des crises d’épilepsie chez certaines personnes. Par conséquent, ne les utilisez jamais. Les autres animations doivent toujours pouvoir être arrêtées manuellement. Un diaporama ou un carrousel de photos est également une forme d’animation et l’obligation pour le visiteur de pouvoir l’arrêter s’applique également. Pour les flashs, le Three Flashes or Below Threshold s’applique, c’est-à-dire pas plus de trois flashs par seconde.

Audio & video

Encore une fois, vous devez toujours ajouter des alternatives pour les utilisateurs qui ne peuvent pas voir ou entendre les images et/ou les sons. En outre, la lecture de l’audio et/ou de la vidéo ne doit pas commencer automatiquement et les visiteurs doivent toujours pouvoir arrêter le fragment.

Ce que vous pouvez faire afin de rendre votre site web accessible :

• Fournir une bonne alternative textuelle. C’est comparable aux textes alternatifs des images. La description audio et le sous-titrage conviennent pour les courts extraits. Si vous allez sous-titrer, vous ne le faites pas seulement pour le texte parlé, mais vous décrivez aussi d’autres choses qui peuvent être entendues. Pensez à la sonnerie d’un téléphone, aux rires et, lorsque le locuteur n’est pas à l’écran, à l’identité de ce dernier.
• Vous avez quand même un sujet long ? Demandez-vous si une version plus courte ne serait pas plus conviviale.

Formulaires

Saviez-vous que de nombreuses personnes n’utilisent pas leur souris mais leur clavier pour remplir un formulaire ? Je fais partie de ces personnes. Sur un site web accessible je m’attends à pouvoir utiliser la touche Tab pour passer d’un champ à l’autre et la touche Espace pour cocher ou décocher quelque chose. Cela fait également partie d’un site web accessible.

Mais il est également important de signaler correctement les erreurs. Si quelqu’un commet une erreur en remplissant le formulaire, indiquez clairement dans le texte où se trouve l’erreur et quelle est sa nature. Il ne sert à rien de mettre une cadre en rouge, car tout le monde ne voit pas le changement de couleur et les lecteurs d’écran ne peuvent pas non plus l’utiliser.

Géo-information

De nos jours, de nombreux sites web disposent d’une carte indiquant l’emplacement de l’entreprise. Les cartes ne sont généralement pas accessibles aux lecteurs d’écran, mais vous pouvez proposer une alternative. Une solution simple consiste à faire figurer vos coordonnées sur la page.

Navigation

La navigation sur un site web accessible ne se limite pas au menu. Car les liens, le fil d’Ariane et les boutons d’appel à l’action font également partie de la navigation. En ce qui concerne les liens, le texte doit indiquer clairement où va le lien. « Cliquez ici » est un exemple de ce qu’il ne faut pas faire. Non seulement pour les visiteurs du site, mais aussi pour Google. En effet, les moteurs de recherche utilisent les textes des liens pour mieux comprendre le contenu de la page à laquelle ils renvoient.

Vous voulez que votre menu principal soit le même sur toutes les pages. Ainsi, les visiteurs ne seront pas désorientés. Et n’oubliez pas que tout le monde n’arrivera pas sur votre site web via la page d’accueil. Veillez à ce que les gens sachent toujours où ils se trouvent dans votre site web.

Si une image est également un lien, le texte alt doit indiquer où le visiteur atterrit lorsqu’il clique sur l’image.

Fichiers PDF

En fait, j’ai toujours déconseillé l’utilisation de fichiers PDF sur les sites web. Pourquoi utiliser des fichiers PDF alors que vous pouvez généralement mettre tout sur une page web ? Pourquoi voudriez-vous détourner les visiteurs de votre site web en leur demandant d’ouvrir un fichier PDF dans un programme ? Pourquoi feriez-vous attendre vos visiteurs plus longtemps ? L’ouverture d’un fichier PDF prend souvent plus de temps que celle d’une page web. Il faut également tenir compte du fait qu’aujourd’hui, plus de 50 % des visiteurs de sites web ne consultent pas un site web sur un ordinateur. Afficher un PDF sur l’écran d’un téléphone est peu pratique !

Si vous utilisez un PDF, les mêmes exigences s’appliquent que pour les sites web accessibles : bon contraste, texte alternatif pour les images, bonne utilisation des liens, formulaires faciles à remplir, etc.

Tableaux

Les tableaux sont généralement faciles d’accès en utilisant le code correct pour les colonnes et pour les lignes. Toutefois, il peut être utile de fournir des tableaux avec une légende et un résumé. Ainsi, un visiteur ne doit pas essayer de lire tout le tableau avant que son objectif ne soit clair.

N’oubliez jamais qu’un tableau doit être facile à lire, même sur le petit écran d’un téléphone portable. Si vous utilisez trop de colonnes, même si le tableau est réactif, ce n’est souvent pas le cas. Essayez de construire la table différemment ou évitez d’utiliser une table. Par exemple, les tarifs des logements de vacances peuvent également être affichés sous forme de lignes de texte.

Technique & code

Un site web est constitué de code HTML. Par exemple, pour un paragraphe, le code <<p>> sera utilisé et pour un entête un <h1> jusqu’au <h6>. Le code H1 ne doit être utilisé qu’une seule fois par page, pour le titre de la page. Ainsi, les lecteurs d’écran et Google savent de quoi parle la page. Pour les entêtes, utilisez le code H2.

J’ai déjà conseillé à tout le monde d’utiliser régulièrement des entêtes. Cela permet de rendre une page web plus facile à lire. Tatjana m’a appris qu’elle parcourt un site web à l’aide des entêtes, tout comme les visiteurs voyants.

Vous voulez en savoir plus sur le HTML ? Et s’entraîner avec ? Alors, allez sur la page web de w3schools sur le HTML. W3schools est pour moi la référence lorsque je veux savoir comment faire quelque chose en HTML. Parce que le HTML n’est en fait qu’un langage, avec des règles, comme dans les autres langues.

Texte

Les textes d’un site web ont une certaine structure : titre, entêtes, paragraphes, citations, listes, etc. Cette structure est fournie par le code HTML du site web.

Le texte en gras est souvent utilisé pour mettre en valeur une section du texte. Cela fonctionne bien pour les personnes qui voient le site web devant elles. Mais certains lecteurs d’écran ignorent ce code <b>, ainsi que le code <i> pour le texte en italique. Par conséquent, au lieu d’utiliser <b> vous pouvez utiliser <strong> et le code <em> au lieu de <i>.

Dans tous les cas, choisissez un caractère facile à lire. Depuis 2020, il existe une nouvelle police spéciale pour les personnes souffrant de déficiences visuelles : Luciole.

Pour en savoir plus sur la police Luciole, lisez mes conseils & astuces de Buro RaDer Un beau caractère pour les malvoyants. Le site web de Buro RaDer utilise cette police.

Conception d’un site web accessible

Ici aussi, il faut tenir compte de quelques éléments pour rendre un site web accessible. Soyez cohérent, par exemple. Affichez les éléments de menu sur toutes les pages dans le même ordre et au même endroit. Et veillez à ce qu’il y ait un bon contraste entre le fond et le texte. Si vous montrez du texte dans une photo, choisissez une photo où vous pouvez montrer le texte dans un morceau de ciel bleu, par exemple.

Des tests, des tests et encore des tests

Au cours du développement du site web de Pilot Radio, j’ai effectué de nombreux tests pour obtenir un site accessible. Tatjana et Sander voulaient pouvoir chatter avec les auditeurs. Le plugin Live Chat de Tidio que j’ai installé n’a pas fonctionné pour eux. De chatfunctie was zichtbaar, maar de chats zelf niet, omdat deze in een pop-up scherm openden welke niet voor de schermlezer toegankelijk was.

Finalement, j’ai installé le plugin Click to Chat for WhatsApp qui était accessible sans aucun problème.

Le même problème d’écran pop-up non visible pour les lecteurs d’écran s’affichait avec le plugin Podcast Subscribe Buttons. La solution ? Créer mes propres boutons d’abonnement pour le podcast.

L’expérience d’autres personnes

Pendant que je travaillais sur ce site, une de mes clientes a ajouté une fonctionnalité de calendrier à son site. Avoir un site web accessible est également importante pour ce client ; je sais maintenant que l’outil calendrier Calendly est accessible aux lecteurs d’écran.

Liste de contrôle pratique pour un site web accessible

Comme je l’ai écrit dans l’intro, j’ai créé une liste de contrôle gratuite pour vérifier si votre site web est accessible. Vous pouvez lire tout cela sur la page Liste de contrôle site web accessible.

Je publie régulièrement des blogs et des Conseils & astuces. Voulez-vous être tenu au courant de ces conseils et de mon blog ? Inscrivez-vous ici.