Accessibilité technique
Ce chapitre concerne les répondantes et répondants informatiques. Garantir l’accessibilité technique implique le respect des « directives pour l’accessibilité des contenus web » (WCAG).
- Utiliser un balisage sémantique correct : Les balises HTML comme <header>, <main>, <footer>, <nav>, <article>, et <section> aident à structurer le contenu de manière claire et compréhensible pour les lecteurs d’écran.
- Utiliser des titres hiérarchisés : Utiliser les balises de titre dans l’ordre (<h1> pour le titre principal, suivi de <h2>, <h3>, etc.). Cela aide à naviguer facilement dans le contenu.
- Utiliser des listes bien structurées : Les balises <ul>, <ol>, et <li> doivent être correctement utilisées pour représenter les listes.
- Ajouter des descriptions alternatives aux images : chaque image doit avoir un attribut alt décrivant ce qu’elle représente. Cela permet aux lecteurs d’écran de décrire les images aux utilisateurs malvoyants.
- Décrire les images décoratives : elles doivent également avoir un attribut alt vide (exemple : <img src=" image.jpg" alt=" Un chat assis près d’une fenêtre">)
- Utiliser des étiquettes explicites : chaque champ de formulaire doit avoir une étiquette (<label>). Cette étiquette doit être liée au champ à l’aide de l’attribut for (exemple : <label for=" email">Adresse e-mail : </label> <input type=" email" id=" email">
- Avertir l’utilisateur en cas d’erreur : les messages d’erreur doivent être clairs et faciles à comprendre. Par exemple, en cas d’erreur de saisie, indiquez clairement où et comment la corriger.
- Assurer un contraste suffisant : assurez-vous que le contraste entre le texte et l’arrière-plan soit suffisant pour les utilisateurs malvoyants (ratio de contraste recommandé : au moins 4.5 : 1 pour le texte normal).
- Ne pas se fier uniquement à la couleur : ne basez pas les informations importantes uniquement sur la couleur. Utilisez également des icônes, des symboles ou des libellés textuels pour signaler des actions ou des statuts.
- Utiliser des liens explicites : les liens doivent avoir des descriptions claires sur leur destination (exemple : <a href="/inscription">Inscrivez-vous à notre newsletter</a>). Évitez les termes vagues comme « Cliquez ici ».
- Garantir la navigation au clavier : assurez-vous que toutes les actions importantes (navigation, soumission de formulaires, etc.) puissent être effectuées uniquement avec un clavier, sans souris.
- Afficher un focus visible : les éléments interactifs (boutons, liens, etc.) doivent afficher un état de focus visible lorsque l’utilisateur navigue avec le clavier.
Accessibilité éditoriale
- Ajouter des sous-titres et transcriptions : les vidéos doivent avoir des sous-titres pour les personnes malentendantes. Fournissez des transcriptions pour les contenus audios.
- Ajouter des descriptions audios : pour les vidéos contenant des informations visuelles importantes, proposez des descriptions audios supplémentaires.
- Éviter les animations et clignotements : les éléments animés ou clignotants doivent être évités ou une option pour les désactiver doit être offerte, car ils peuvent provoquer des crises chez les personnes photosensibles ou être distrayants pour les personnes atteintes de troubles de l’attention.
- Offrir un temps de lecture suffisant : pour les contenus temporellement limités (ex. : CAPTCHA), offrez suffisamment de temps pour que l’utilisateur puisse répondre ou offrez des alternatives.
- Utiliser des outils d’évaluation automatique : utilisez des outils comme Wave ou Lighthouse pour détecter les problèmes d’accessibilité pour votre site.
- Effectuer des tests utilisateur : testez votre site avec des personnes utilisant des technologies d’assistance (lecteurs d’écran, navigateurs braille, etc.) et consultez les personnes en situation de handicap.
Respecter les standards WCAG en visant au moins le niveau « AA » des WCAG, qui est une exigence commune pour les sites publics et privés.
Ces directives couvrent un large éventail de critères qui aident à garantir l’accessibilité.
Normes et standards
- CDPH (External link)
- LDIPH – La loi sur les droits et l’inclusion des personnes en situation de handicap (External link)
- Norme eCH-0059-Accessibility Standard (External link)
- Règles pour l’accessibilité des contenus web (WCAG) (External link)
- ODIPH, art.33 – Ordonnance sur les droits et l’inclusion des personnes en situation de handicap (External link)
Logiciels et programmes utiles
Ajouter une fonction « Écouter le texte »
La fonction « Écouter le texte » permet aux utilisateurs d’entendre un contenu écrit qui est lu à voix haute, ce qui peut être très utile pour les personnes ayant des difficultés de lecture, des troubles visuels ou pour celles qui préfèrent écouter un texte plutôt que le lire. C’est une fonctionnalité accessible via des outils de synthèse vocale (TTS, Text-To-Speech) intégrés dans de nombreuses applications et sur les sites web.
Comment mettre en place une fonction « Écouter le texte »
Utiliser une API de synthèse vocale (Text-to-Speech – TTS)
- Google Text-to-Speech, Microsoft Azure Speech, Amazon Polly ou IBM Watson Text-to-Speech offrent des APIs permettant de convertir du texte en audio de manière fluide.
- Ces services peuvent être intégrés dans une application ou un site web en appelant l’API avec le texte à lire, qui renvoie un fichier audio ou une diffusion audio en direct.
Ajouter une fonctionnalité TTS sur un site web
- Pour un site web, la fonctionnalité « Écouter le texte » peut être ajoutée en insérant un bouton de lecture audio près du texte, souvent avec un pictogramme représentant un haut-parleur.
- Des bibliothèques comme ResponsiveVoice ou Speech Synthesis API (disponible dans les navigateurs modernes) permettent d’intégrer cette fonctionnalité sans besoin de services externes.
- Lorsqu’un utilisateur clique sur le bouton, le texte sélectionné est envoyé au moteur de TTS qui lit le contenu à voix haute.
Applications et documents accessibles
- Dans des applications comme Adobe Acrobat Reader ou Microsoft Word, des options permettent d’activer la lecture du texte. Par exemple, dans Word, on peut utiliser la commande « Lire à voix haute » qui active la synthèse vocale intégrée.
Bonnes pratiques pour la fonction « Écouter le texte »
- Positionner le bouton de manière intuitive : le bouton de lecture audio doit être placé à proximité du texte concerné pour une accessibilité optimale.
- Indiquer clairement la fonction : utilisez une icône de haut-parleur et une description « Écouter le texte » pour que les utilisateurs comprennent facilement la fonction.
- Offrir des voix naturelles et de qualité : choisissez des voix qui sont agréables et naturelles pour améliorer l’expérience utilisateur. Certains moteurs TTS offrent des voix plus réalistes qui peuvent améliorer l’écoute.
- Régler la vitesse de lecture : permettez aux utilisateurs d’ajuster la vitesse de lecture pour qu’ils puissent choisir ce qui leur convient le mieux.
- Rendre la fonction multilingue : si le site ou l’application est en plusieurs langues, assurez-vous que la fonction TTS détecte et adapte automatiquement la langue de lecture.
- Support des lecteurs d’écran : La fonction « Écouter le texte » doit être compatible avec les lecteurs d’écran, permettant aux utilisateurs de choisir entre écouter le texte par le TTS intégré ou par leur lecteur d’écran habituel.
- Indiquer les éléments de navigation et pauses logiques : dans le cas d’un texte long, insérez des pauses (par exemple après les paragraphes) pour une lecture plus confortable.
En suivant ces bonnes pratiques, la fonction « Écouter le texte » sera plus conviviale et accessible, répondant aux besoins de divers types d’utilisateurs et enrichissant leur expérience.
Deux approches possibles
Lors de l’intégration de la fonctionnalité de synthèse vocale (Text-to-Speech, TTS) sur le site web, il y a deux approches principales à considérer :
- Améliorer l’accessibilité pour les outils TTS des utilisateurs : concevoir les pages HTML pour qu’elles soient aussi accessibles que possible, permettant aux utilisateurs d’utiliser leur propre logiciel TTS ou des plug-ins de navigateur.
- Intégrer un TTS intégré avec un bouton de lecture : incorporer directement la fonctionnalité TTS dans le site avec un bouton de lecture qui, lorsqu’il est cliqué, lit le texte à voix haute.
Voici les avantages et les inconvénients de chaque approche pour prendre une décision éclairée.
1. Améliorer l’accessibilité pour les outils TTS des utilisateurs
Avantages et inconvénients :
- Familiarité de l’utilisateur : les utilisateurs peuvent utiliser les outils TTS avec lesquels ils sont déjà à l’aise, améliorant ainsi leur expérience de navigation.
- Moindre effort de développement : le concentrer sur le respect des normes d’accessibilité web (comme les WCAG) est une bonne pratique qui peut nécessiter moins d’efforts que l’intégration d’une fonctionnalité TTS.
- Personnalisation : les utilisateurs ont le contrôle sur les préférences de voix, la vitesse de lecture et d’autres paramètres dans leurs propres outils TTS.
- Aucun coût supplémentaire : élimine le besoin de services TTS tiers, réduisant les frais de licence potentiels et les coûts récurrents.
- Assurance de la confidentialité : les données de l’utilisateur restent sur son appareil, réduisant les préoccupations liées à la transmission de contenu à des services externes.
Inconvénients :
- Expérience utilisateur incohérente : la qualité et les paramètres des outils TTS peuvent varier, conduisant à des expériences différentes pour chaque utilisateur.
- Connaissances en accessibilité requises : nécessite une compréhension approfondie des meilleures pratiques en matière d’accessibilité pour assurer la compatibilité avec divers outils TTS.
- Portée limitée des utilisateurs : tous les utilisateurs n’ont pas d’outils TTS installés ou ne savent pas comment les utiliser, ce qui peut limiter l’accessibilité pour certains.
- Contrôle limité sur la présentation : moins d’influence sur la manière dont le contenu est lu, ce qui peut affecter la compréhension si l’outil de l’utilisateur ne le rend pas bien.
2. Intégrer un TTS intégré avec un bouton de lecture
Avantages et inconvénients :
- Accessibilité accrue : rend le contenu immédiatement accessible à un public plus large, y compris ceux sans outils TTS.
- Expérience cohérente : offre une qualité de voix et une présentation uniforme pour tous les utilisateurs, améliorant la compréhension et le professionnalisme.
- Facilité d’utilisation : fournit un accès simple à la fonctionnalité TTS via une interface conviviale, comme un bouton de lecture.
- Options de personnalisation : permet d’adapter l’expérience TTS, comme mettre en évidence le texte pendant la lecture ou ajuster les paramètres de voix spécifiques au contenu.
- Alignement sur l’identité visuelle de l’État : l’intégration peut être stylisée pour correspondre au design du site, renforçant l’identité visuelle.
Inconvénients :
- Effort de développement et de maintenance : nécessite des ressources supplémentaires pour implémenter et maintenir la fonctionnalité TTS sur différents navigateurs et appareils.
- Coûts : peut impliquer des frais de licence pour la technologie TTS ou les services, ainsi que des coûts liés à une utilisation accrue de la bande passante.
- Impact sur les performances : peut affecter les temps de chargement des pages, en particulier si de gros fichiers audios sont générés ou si le service TTS dépend d’API externes.
- Préoccupations en matière de confidentialité : l’utilisation de services tiers peut entraîner la transmission de données utilisateur hors site, nécessitant une gestion appropriée de la confidentialité.
- Conformité à l’accessibilité : l’intégration TTS elle-même doit être accessible (par exemple, navigable au clavier, compatible avec les lecteurs d’écran), ajoutant une couche supplémentaire de complexité.
Conclusion
La meilleure approche dépend du public cible, des ressources et des objectifs :
- Opter pour l’amélioration de l’accessibilité : si les principaux utilisateurs sont susceptibles d’avoir leurs propres outils TTS et si une solution avec des coûts et des efforts de maintenance réduits sont privilégiés. Cette approche met l’accent sur les principes de conception universelle et peut être suffisante si elle est bien mise en œuvre.
- Choisir l’intégration d’un TTS intégré si le souhait est de fournir un accès immédiat et facile au contenu audio pour tous les utilisateurs, quel que soit leur équipement personnel ou leur aisance technologique. Cette méthode offre une expérience utilisateur contrôlée et cohérente. Elle nécessite toutefois un investissement plus important en matière de développement. Le coût est également plus important.
Sources d’information pour la conclusion :
- Directives pour l’accessibilité des contenus web (WCAG) du W3C : ces directives recommandent de rendre le contenu accessible par des technologies d’assistance, soutenant l’approche d’amélioration de l’accessibilité.
- Études sur l’accessibilité web : des recherches montrent que l’intégration d’outils d’accessibilité directement sur les sites web peut améliorer l’expérience pour les utilisateurs moins familiers avec les technologies d’assistance.
- Analyse des besoins des utilisateurs : comprendre les préférences et les besoins du public cible peut aider à décider quelle approche offrira le plus grand bénéfice.
