Accessibilité
Les sites web sont plus que jamais essentiels pour les entreprises. Par conséquent, il est important de veiller à ce que leur contenu soit accessible à tous les visiteurs. Aux États-Unis, la conformité à la section 508 renvoie à l'article de la loi Reauthorized Rehabilitation Act de 1998, qui oblige les organismes fédéraux à rendre les technologies électroniques et informatiques accessibles aux personnes handicapées. Bien que la conformité à l'article 508 constitue un bon point de départ, les directives sur l'accessibilité web (WCAG) sont de plus en plus utilisées comme une référence pour la création de contenu accessible sur le web.
L'aspect juridique ne devrait pas être votre motivation première pour offrir une bonne expérience à vos utilisateurs. Selon le CDC, un Américain sur quatre souffre d'un handicap. Ne pas offrir une bonne expérience à 25 % des visiteurs serait comme un magasin physique qui interdirait l'accès à un client sur quatre. Non seulement ces derniers seront mécontents, mais ils ne reviendront probablement pas ou ne recommanderont pas vos services.
Une expression courante chez les développeurs est que « l'accessibilité n'est pas une fonctionnalité ». L'idée est de ne pas traiter l'accessibilité comme un bonus ou à la fin d'un projet.
L'accessibilité exige de la réflexion, de l'empathie et de la compréhension. Dès le début d'un projet, vous pouvez concevoir et développer des solutions au lieu d'avoir à réorganiser vos activités plus tard.
Souvent, la résolution des problèmes d'accessibilité répond à vos autres priorités en tant que développeur. L'expérience utilisateur, les performances et le référencement sont quelques-unes des principales questions qui sont directement liées à l'accessibilité. L'amélioration de l'un ce ces aspects se répercute généralement positivement sur l'autre.
Trop souvent négligée, l'empathie constitue un élément clé de l'accessibilité. En tant que développeurs, nous voulons tout automatiser. Si une tâche est difficile ou chronophage, nous voulons des outils qui l'effectuent à notre place ou qui nous expliquent comment faire. Malheureusement, ces outils sont insuffisants, car ils ne sont pas humains et ne peuvent pas aborder l'expérience de la page comme nous. Il est techniquement possible de créer une page web qui passe avec brio la plupart des tests d'accessibilité automatisée, mais qui est complètement inutilisable pour tous les humains, qu'ils soient voyants, aveugles, sourds, daltoniens, à fonction motrice limitée ou illimitée. Vous pouvez techniquement répondre aux exigences, mais votre expérience sera frustrante pour les utilisateurs. Le point à retenir est le suivant : ne vous fiez pas aux outils, testez votre travail, faites preuve d'empathie avec vos utilisateurs et recueillez des commentaires.
Bien qu'il ne s'agisse pas d'un guide complet, voici quelques étapes que vous pouvez suivre pour rendre votre contenu accessible ainsi que des ressources pour approfondir la question.
Les images, icônes, vidéos et boutons qui véhiculent un sens ou qui sont interactifs doivent disposer d'un texte alternatif. Celui-ci sera non seulement utile pour les visiteurs qui consultent votre contenu via un lecteur d'écran, mais également pour les moteurs de recherche. Le texte alternatif doit décrire le contenu de l'image. La plupart des images de votre site peuvent probablement être modifiées dans l'éditeur de page. La définition d'un texte alternatif dans l'éditeur de page est facile à effectuer. À l'intérieur des modules et des modèles personnalisés, vous devez cependant vous assurer que le texte alternatif spécifié dans les éditeurs de page est respecté.
Autrement dit, vous devez vous assurer que le texte alternatif fourni par l'utilisateur est effectivement utilisé si vous disposez d'un élément <img>.
Si, pour une raison quelconque, vous ne rendez pas une image modifiable dans l'éditeur de page, vous devez coder le texte alternatif en dur.
Il existe une exception à cette règle de texte alternatif. Si votre image ne fournit pas de contexte supplémentaire et sert uniquement à des fins de présentation, il est préférable d'avoir une valeur de texte alternatif nulle plutôt que de ne pas définir d'attribut alternatif.
Le chargement d'image différé est une technique courante d'amélioration des performances pour la conception de sites web. La méthode utilisée pour le chargement différé influe sur l'accessibilité.
Les solutions JavaScript reposent généralement sur l'attribut src des images présente un élément faux (comme un petit fichier .gif) au lieu de la source réelle de l'image, qui est conservée dans un attribut data-src jusqu'à ce que l'utilisateur arrive à l'image. Cela signifie qu'au départ, l'image est inaccessible pour un utilisateur de lecteur d'écran qui navigue sur la page, en particulier un utilisateur utilisant un rotor pour parcourir tout le contenu de la page sans même le faire défiler. En outre, si JavaScript n'est pas chargé sur une page, ces solutions de chargement différé échoueront et ne proposeront pas les images appropriées aux utilisateurs de technologies d'assistance.
L'utilisation du chargement différé natif de l'image permet d'éviter ce problème, conservant ainsi le balisage de l'image, que JavaScript soit chargé ou non.
HubSpot prend en charge le chargement différé basé sur navigateur dans les modules personnalisés. Il est recommandé de l'utiliser.
Les liens, les boutons et les éléments de formulaire doivent tous avoir un texte réel qui indique le rôle ou la destination de l'élément. Autrement, les lecteurs d'écran liront que l'utilisateur a un lien ou un bouton sélectionné, mais n'auront aucune idée de sa fonction.
Si vous utilisez une icône, fournissez un texte pour le lecteur d'écran. Par exemple, certains modèles HubSpot standard utilisent un code court d'icône :
N'utilisez pas 'display: none' pour masquer les libellés de formulaire et d'autres textes descriptifs. Cela empêche la lecture du texte à voix haute pour les personnes malvoyantes et heurte les utilisateurs voyants mais qui ont du mal à voir le texte en raison d'un manque de contraste sur le texte de la variable. Sans oublier ceux qui n'ont pas commencé à remplir un formulaire ou dont le formulaire a été automatiquement renseigné pour eux, sans aucune idée de ce qui a été saisi car les libellés des champs étaient invisibles.
Si vous devez absolument avoir du texte caché ou si du texte caché peut fournir un contexte supplémentaire dont un utilisateur voyant n'aurait pas besoin. Utilisez la CSS qui rend le texte invisible sans le cacher pour les lecteurs d'écran ou ajoutez la classe '.screen-reader-text'.
Lorsqu'un visiteur navigue à l'aide d'un lecteur d'écran ou simplement via son clavier, il est très utile qu'il puisse ignorer les parties de la page qui sont répétées telles qu'un en-tête. Pour ce faire, nous pouvons ajouter un lien qui pointe vers le contenu principal de la page.
Dans votre en-tête, ajoutez le code HTML avec le contenu suivant :
Ensuite, dans chaque modèle, assurez-vous qu'il y a un élément avec un attribut d'ID de contenu. Dans notre exemple, nous avons utilisé le titre de l'article comme texte à ignorer. Cela permet aux moteurs de recherche de comprendre ce à quoi il est lié. C'est une façon plus sémantique d'ignorer du contenu.
Le balisage sémantique est un code HTML qui transmet le sens. Voici quelques exemples d'éléments sémantiques : <header>, <main>, <footer>, <nav>, <time>, <code>, <aside> et <article>.
Voici quelques exemples d'éléments qui ne sont pas sémantiques : <div> et <span>. Les éléments non sémantiques ont toujours leur place, mais doivent être utilisés principalement pour la présentation et non pour transmettre du sens.
Les éléments sémantiques peuvent être compris par les moteurs de recherche et les technologies d'assistance, ce qui a une incidence positive sur le référencement et améliore votre expérience utilisateur.
N'utilisez pas d'éléments <div> interactifs comme des boutons, des onglets ou des liens à moins d'être sûr d'avoir fourni une bonne expérience via les attributs aria.
Utilisez les liens (<a />) et <button /> de manière appropriée.
Utilisez des liens pour créer un lien vers les sections d'une page et accéder à d'autres pages.
Utilisez les boutons pour les interactions qui n'ont pas pour résultat de quitter la page ou d'accéder à un ID.
Lorsque vous travaillez avec des tableaux, si un tableau a un titre descriptif, incluez-le dans un élément <caption> juste après l'élément <table>.
Utilisez des éléments <th> avec l'attribut de domaine approprié dans les tableaux pour les en-têtes de colonne et de ligne et <thead>, <tbody> et <tfoot> pour désigner les sections.
Utilisez l'attribut de domaine sur les attributs <th> pour indiquer si l'en-tête s'applique à la ligne ou à la colonne.
Besoin d'un accordéon ? N'oubliez pas les éléments <summary> et <details>, qui proposent une grande partie de cette fonctionnalité gratuitement et qui sont accessibles. Assurez-vous d'ajouter un polyfill ou une solution de secours si vous avez besoin de prendre en charge d'anciens navigateurs.
Certains utilisateurs préfèrent leur clavier pour naviguer dans les pages web et les formulaires. Certains visiteurs doivent utiliser le clavier ou une sorte d'appareil d'assistance qui reproduit un clavier pour naviguer sur les sites web.
- Assurez-vous que ':focus' est stylisé de sorte que lorsqu'un utilisateur navigue via le clavier, il peut voir ce qui est mis en évidence. Désactivez la propriété de contours CSS uniquement si vous fournissez un indicateur visuel alternatif acceptable. Utilisez :focus-within si cela peut permettre d'attirer efficacement l'attention des utilisateurs.
- Lorsque vous masquez/affichez des parties de la page avec ':hover' ou via JavaScript, assurez-vous que les utilisateurs sont également capables de naviguer dans ces contrôles via JavaScript ou qu'il existe un chemin alternatif vers les informations.
- Assurez-vous que la navigation principale de votre site prend en charge la navigation par clavier. Un problème fréquemment négligé est l'inaccessibilité des listes déroulantes et des menus volants. Cela empêche les utilisateurs d'accéder à des parties essentielles des sites web.
- Fournissez et mettez à jour les attributs d'état
hidden,aria-expanded,aria-currentou encorearia-selectedsi nécessaire pour vous assurer que les lecteurs d'écran communiquent correctement l'état des éléments.
Lors de la création de modèles ou de fichiers codés, vous devez utiliser des éléments sémantiques corrects (<header>, <main>, <footer>,<nav>, <dialog>, etc.) pour communiquer aux navigateurs web et aux lecteurs d'écran le type de contenu qui se trouve à l'intérieur de vos éléments.
Dans le cas où les éléments sémantiques ne sont pas appropriés pour votre situation, vous devez ajouter des attributs de rôle.
L'ajout de repères permet aux utilisateurs qui utilisent des lecteurs d'écran de passer plus facilement d'une section principale d'une page web à l'autre. HubSpot inclut les attributs 'role' pour le menu, le menu simple et des modules de recherche Google.
- Assurez-vous que lorsqu'un utilisateur zoome sur son navigateur à 200 %, le contenu reste visible et lisible.
- Il est déconseillé d'utiliser des tailles de police inférieures à 16 px car la lisibilité peut devenir mauvaise pour les visiteurs.
- Évitez d'utiliser la couleur comme seul moyen de communiquer des informations. Un étonnante part de la population mondiale est daltonienne.
- Assurez-vous qu'il y a suffisamment de contraste entre la couleur du texte et l'arrière-plan afin que les utilisateurs ayant une vision limitée puissent lire le contenu.
- Évitez les animations qui clignotent rapidement (plus de trois fois par seconde) car cela pourrait déclencher des crises d'épilepsie chez certains visiteurs.
- Envisagez de prendre en charge prefers-reduc-motion si vous avez des animations sur votre site.
- Aujourd'hui, la création d'un site web adaptatif est indispensable. Assurez-vous que tous les éléments interactifs fonctionnent comme prévu sur mobile. Les éléments interactifs doivent être facilement déclenchés et un espace suffisant est indispensable entre les différentes zones de pression.
N'oubliez pas que l'accessibilité doit également être prise en compte dans votre contenu textuel.
- Évitez le langage directionnel « voir barre latérale de gauche ». Si l'utilisateur est sur mobile, il est possible que cela n'ait aucun sens pour lui car le contenu s'empile généralement sur cette version.
- Utilisez des rubriques comme
<h1>,<h2>, etc. et imbriquez-les l'une après l'autre. Ne sautez pas de rubrique pour l'effet visuel. - Lors de l'ajout d'un lien, n'utilisez jamais le texte « Cliquez ici ». Il ne transmet aucune signification aux lecteurs d'écran et n'a aucun sens sur les écrans tactiles ou d'autres types d'appareils. Au lieu de cela, votre texte doit mentionner ce qui figure dans ce lien. Cette pratique est également plus judicieuse pour le référencement, car les moteurs de recherche comprennent mieux le contenu lié.
- Assurez-vous que si vous utilisez des styles spéciaux sur le texte pour transmettre le sens, vous utilisez la balise sémantique
<mark>,<strong>,<em>,<sup>, etc. appropriée. Autrement, le sens risque d'être perdu pour certains visiteurs. - Si vous ciblez des visiteurs dans le monde entier, évitez des blagues spécifiques à une région. Si vous faites traduire votre site, évitez les jeux de mots. Bien que nous aimions l'humour, les traductions ne sont pas toujours optimales.
- Utilisez des outils pour améliorer votre grammaire et votre orthographe. Cela favorise la compréhension et permet d'obtenir de meilleures traductions.
- Rédigez votre contenu en fonction du public de votre site. Vous n'expliqueriez pas l'astrophysique à des élèves de CM2 comme vous le feriez à un physicien aguerri. Cela dit, évitez les mots fantaisistes juste pour le plaisir de les utiliser et restez simple.
La plupart du travail visant à améliorer l'accessibilité n'est pas spécifique à HubSpot. Cela dit, nous avons à cœur de vous accompagner dans votre réussite avec HubSpot. En tant que développeur ou créateur de contenu, vous devez prendre note de certains aspects afin de proposer une meilleure expérience utilisateur.
Que vous installiez un module ou un modèle depuis le marketplace, que vous le développiez vous-même ou par le biais d'un tiers, assurez-vous qu'il répond aux bonnes pratiques en matière d'accessibilité. Les modules personnalisés peuvent avoir un énorme impact sur l'accessibilité de votre site car ils sont souvent utilisés plusieurs fois, parfois sur la même page. De même, un modèle unique peut être utilisé des centaines ou des milliers de fois sur un même site. Si votre site n'est pas accessible, vous diminuerez probablement vos profits. Comme avec les publicités, il est logique d'investir davantage pour vous assurer que votre site web touche un public plus large. L'un des avantages des modules est que vous pouvez généralement améliorer le code plus tard à mesure que les directives et les bonnes pratiques évoluent, favorisant ainsi l'accessibilité pour chaque page sur laquelle le module est en ligne.
Sur le marketplace HubSpot, recherchez des modules et des modèles qui abordent l'accessibilité et répondent aux exigences WCAG dans leurs descriptions. Si vous travaillez avec un développeur, informez-le dès le début que l'accessibilité est importante pour vous. Les développeurs n'en font pas tous une priorité dans le cadre de leur travail. L'en informer tard dans un projet vous coûtera probablement plus cher que de le faire dès le départ. En effet, au lieu de faire de cette question une priorité dès le début, il devra résoudre rétroactivement les problèmes d'accessibilité.
Si vous êtes un développeur, créez des modules et des modèles qui permettent aux créateurs de contenu de respecter les directives en matière d'accessibilité. Utilisez des titres appropriés, du code HTML sémantique et faites en sorte que les éléments interactifs fournissent des rôles et un contexte appropriés. Les créateurs de contenu conscients des problèmes d'accessibilité sont généralement contents de payer un peu plus pour des modules et des modèles inclusifs. Cela dit, vous devez montrer que vos modules tiennent compte de l'accessibilité. Incluez des liens dans les modèles, favorisez l'accessibilité des groupes et des partiels globaux utilisés dans vos modèles. Ceux-ci sont utilisés sur l'ensemble d'un site web et peuvent avoir un énorme impact sur la convivialité de celui-ci.
Si vous développez pour le marketplace HubSpot, sachez que votre contenu pourrait être utilisé à travers des milliers, voire des millions de pages sur le web. Vous faites un choix qui affecte la publication de votre contenu et le partage de votre travail, que celui-ci soit inclusif ou non.
Plusieurs dizaines de fournisseurs proposent des outils avec lesquels vous n'avez qu'à ajouter leur script à votre site web pour qu'il devienne accessible.
Certains de ces outils essaieront de donner un sens à certaines parties de la page et de modifier le HTML ainsi que les attributs pour tenter de résoudre certains problèmes. Reposant sur des hypothèses, ces dispositifs peuvent se tromper et nuire aux fonctionnalités de votre site, ou même aggraver les choses pour les utilisateurs.
Proposant parfois leur propre système de lecture d'écran, ces outils peuvent ne pas toujours fonctionner comme prévu. Si vous disposez d'une interface utilisateur complexe, votre site web peut finalement devenir plus difficile à utiliser avec l'outil.
En raison de ces problèmes, de tels outils ne remplacent pas le développement de votre site selon des principes d'accessibilité. Investissez du temps et de l'argent pour offrir la meilleure expérience possible à tous vos utilisateurs. Le recours à des solutions globales pourrait vous coûter autant ou plus que de prendre le temps de développer votre site de façon appropriée. En testant et en développant votre site dans le respect des principes d'accessibilité, vous bénéficierez également de l'empathie et de la compréhension de vos clients.
Pour être clair, cela ne fait pas référence aux outils de test. Il s'agit en particulier des outils qui prétendent résoudre les problèmes d'accessibilité à votre place. Les outils de test eux-mêmes sont excellents et sont vivement recommandés en plus des tests manuels.
Découvrez-en davantage sur les scripts/superpositions d'accessibilité.
Il existe de très bonnes ressources pour créer des sites web accessibles à tous. Nous vous encourageons vivement à les consulter.
- Le projet A11Y
- Documents MDN sur l'accessibilité
- Initiative sur l'accessibilité web
- WebAIM
- Check-list simplifiée WCAG 2.1
- Check-list relative à l'article 508
- Recommandations détaillées WCAG 2.1
- AXE de Deque
- WAVE – Un outil pour tester l'accessibilité d'une page web
- Le guide ultime de l'accessibilité web
Merci d'avoir partagé votre avis.