Les informations présentées dans ce blog s'adressent aux propriétaires de sites web souhaitant apprendre les bases de l'accessibilité web. Les éléments techniques sont décrits en termes simples, et, en règle générale, tous les sujets relatifs aux aspects légaux de l'accessibilité web sont présentés de la manière la plus simplifiée possible. Ce guide n'a aucune valeur légale et ne peut être invoqué en cas de litige.
Peut-être plus que tout autre système de gestion de contenu (CMS) sur le marché, Webflow vous permet d'exprimer pleinement votre créativité, même avec des compétences limitées, voire inexistantes, en codage. Les options de conception presque illimitées de la plateforme vous permettent de créer des sites web exceptionnels qui, pour la plupart, ne peuvent être réalisés avec la plupart des autres créateurs de sites.
Cependant, cette grande liberté créative conduit souvent à des sites web qui impressionnent certains visiteurs, tout en présentant des barrières numériques significatives pour d'autres.
La plupart des sites Webflow ne sont pas accessibles aux personnes ayant certains handicaps.
De nombreux sites Webflow manquent d'éléments d'accessibilité fondamentaux, tels que la compatibilité avec la technologie des lecteurs d'écran et la possibilité de naviguer sur le site uniquement via le clavier. Et, même lorsqu'ils sont créés en tenant compte des besoins de la communauté des personnes handicapées, les sites Webflow peuvent encore être partiellement inaccessibles.
Heureusement, vous pouvez transformer votre site Webflow en un site accueillant pour tous les visiteurs, y compris ceux ayant des handicaps. Et, avec les bons outils, vous pouvez même permettre aux visiteurs de configurer eux-mêmes votre site afin qu'il corresponde à leurs capacités uniques.
Dans ce blog, nous vous montrerons tout ce que vous devez savoir pour rendre votre site Webflow accessible aux personnes handicapées. Nous expliquerons pourquoi il est important de garantir un accès égal à votre site pour la communauté des personnes handicapées, et nous explorerons comment élargir votre base de clients potentiels peut conduire à des résultats commerciaux positifs.
Points clés :
- Pour être accessible, votre site Webflow doit être conforme aux directives pour l'accessibilité des contenus web (WCAG) 2.0 ou 2.1 au niveau AA.
- Cela signifie que votre site Webflow doit répondre à une liste de critères d'accessibilité. Ceux-ci incluent, mais ne sont pas limités à, la compatibilité avec les technologies d'assistance, la navigation uniquement via le clavier, un contraste suffisant entre le texte et ses couleurs de fond, des textes alternatifs pour les images significatives, et des sous-titres pour les vidéos.
- Webflow propose plusieurs fonctionnalités d'accessibilité intégrées, telles que son vérificateur de contraste des couleurs. Cependant, se fier uniquement à ces fonctionnalités ne garantit pas que votre site soit accessible et conforme aux WCAG.
Que signifie avoir un site Webflow accessible ?
Pour que votre site soit considéré comme accessible, il devra accueillir tous les visiteurs, quelles que soient leurs capacités. Et pour y parvenir, vous devez vous assurer que votre site Webflow adhère aux normes d'accessibilité web reconnues. Ces normes incluent des instructions et des directives spécifiques qui, lorsqu'elles sont suivies, garantissent que votre site Webflow est configuré et conçu de manière à offrir une expérience utilisateur égale à tous les visiteurs du site.
Le jeu de directives d'accessibilité web le plus important est les Web Content Accessibility Guidelines (WCAG). Créées par le World Wide Web Consortium (W3C), les WCAG sont généralement acceptées comme étant les normes d'accessibilité web les plus importantes au monde aujourd'hui. Les WCAG influencent également fortement les politiques mondiales en matière d'accessibilité web, un sujet que nous développerons plus loin dans le blog.
Bien qu'étant un document long et complexe, les nombreuses sections (ou critères de succès) des WCAG reposent en fin de compte sur quatre principes fondamentaux :
- Perceptible : Les visiteurs de votre site doivent être capables de percevoir le contenu apparaissant sur votre site Webflow via leurs sens de l'ouïe, de la vue et du toucher.
- Opérable : Les visiteurs de votre site doivent être en mesure d'utiliser votre site Webflow, quelle que soit leur capacité. Un site Webflow opérable doit pouvoir être entièrement navigué via le clavier, la navigation assistée par la vue et d'autres alternatives à la souris classique.
- Compréhensible : Votre site Webflow doit être facile à comprendre. Il ne doit pas inclure de termes trop techniques ou de jargon complexe, et doit être exempt d'instructions compliquées difficiles à suivre.
- Robuste : Pour que votre site Webflow soit robuste, il doit utiliser HTML et CSS selon les spécifications, et être compatible avec les outils d'assistance que les personnes handicapées utilisent pour naviguer en ligne.
Versions et niveaux des WCAG
Au fil des années, il y a eu plusieurs versions des WCAG :
- WCAG 2.0, publié en 2008
- WCAG 2.1, une version mise à jour de ces directives, publiée en 2018
- WCAG 2.2, qui a été officiellement publiée en octobre 2023
Toutes les versions des WCAG ont trois niveaux de conformité :
- Niveau A - le niveau de conformité le plus bas
- Niveau AA - le niveau de conformité mentionné dans la plupart des réglementations d'accessibilité à travers le monde
- Niveau AAA - le niveau de conformité optimal et le plus difficile à atteindre
Il est fortement recommandé que votre site Webflow soit conforme aux WCAG 2.1 Niveau AA.
Se conformer au WCAG 2.1 Niveau AA exige que votre site Webflow réponde à un certain nombre d'exigences techniques et de conception. Celles-ci incluent, mais ne se limitent pas à :
- Compatibilité avec la technologie des lecteurs d'écran
- Navigation uniquement via le clavier
- Conception responsive pour mobile
- Contrastes de couleurs appropriés
- Sous-titres pour le contenu vidéo significatif
Nous expliquerons ces exigences plus en détail plus loin dans le blog. Pour passer directement à cette section, vous pouvez cliquer ici.
Que propose Webflow en termes d'accessibilité ?
Webflow dispose de quelques outils intégrés dans le Designer qui peuvent vous aider à créer votre site avec l'accessibilité à l'esprit.
Le panneau d'audit, situé en bas à gauche du Designer, vérifie les problèmes de performance et d'utilisabilité. Cela inclut des préoccupations spécifiques liées à l'accessibilité, telles que le contenu des liens non descriptif, le texte alternatif manquant et l'application correcte des en-têtes.
De plus, Webflow dispose d'un vérificateur de contraste des couleurs intégré dans le panneau de style. Vous pouvez examiner les contrastes de couleurs entre le texte et son arrière-plan, et voir leur niveau de conformité avec le WCAG Niveau AA et Niveau AAA. Les contrastes de couleurs qui ne répondent pas aux exigences du WCAG Niveau AA sont marqués comme un échec.
Deux autres outils d'accessibilité sont accessibles à partir des paramètres de la toile (canvas settings) :
- Vision Preview : Cet outil simule la façon dont les personnes ayant différents troubles de la vision verraient votre site web. Ces troubles incluent le daltonisme vert, le daltonisme bleu-jaune, le daltonisme total et la vision floue. Pour accéder à la Vision Preview, cliquez sur l'icône des paramètres de la toile en haut du Designer. Dans la fenêtre des paramètres de la toile, faites défiler vers le bas jusqu'à la section de la vision preview.
- Text Zoom Preview : Cet outil simule la façon dont les visiteurs du site utilisent les capacités de zoom du navigateur. Cela peut montrer aux développeurs travaillant dans le Designer si la mise en page se brise ou s'il y a des problèmes d'emballage du texte qui rendent difficile la consommation du contenu lorsque le texte est augmenté jusqu'à 200 %. Pour accéder au Text Zoom Preview, cliquez sur l'icône des paramètres de la toile en haut du Designer. Dans la fenêtre des paramètres de la toile, faites défiler vers le bas jusqu'à la section de Text Zoom Preview.
Pourquoi rendre votre site Webflow accessible est d'une importance cruciale
16 % de la population mondiale a une forme de handicap. Ce groupe est souvent victime de discrimination, et il incombe à chacun d'entre nous de garantir que ses membres bénéficient d'une expérience en ligne équitable et juste.
Il est intéressant de noter que la communauté des personnes handicapées dispose de milliards de dollars de revenus disponibles. Lorsque votre site Webflow est accessible, vous accueillez des personnes avec divers handicaps pour explorer vos produits et services, et vous leur permettez de dépenser leur argent durement gagné pour vos offres.
Obligations légales en matière d'accessibilité web
Si vous opérez aux États-Unis, au Canada ou dans l'Union européenne, vous pourriez être tenu par la loi de rendre votre site Webflow accessible aux personnes handicapées.
Bien que rien ne soit encore codifié dans la loi, il est généralement accepté que l'Americans with Disabilities Act (ADA) s'applique au domaine en ligne, ainsi qu'aux structures physiques des entreprises. Les tribunaux américains appliquent aujourd'hui cette loi aux sites web et se réfèrent souvent aux WCAG comme norme à respecter en vertu de l'ADA.
Une autre loi américaine importante incluant des clauses sur l'accessibilité web est la section 508 de la loi sur la réhabilitation. S'appliquant aux organismes gouvernementaux, aux organisations financées par le gouvernement fédéral et aux prestataires de services de ces organisations, la section 508 se réfère aux WCAG 2.0 Niveau AA comme norme de conformité. Les organismes concernés doivent s'assurer que leurs sites web et autres technologies de l'information et de la communication (TIC), tels que les vidéos, les PDF et les courriels, pour n'en nommer que quelques-uns, sont conformes aux WCAG à ce niveau.
Les entreprises enregistrées en Ontario doivent se conformer à la Loi sur l'accessibilité pour les personnes handicapées de l'Ontario (AODA). En vertu de cette loi, votre site Webflow doit être conforme aux WCAG 2.0 Niveau AA.
Pour en savoir plus sur la conformité à ces lois, nous vous recommandons de consulter ces ressources :
- Checklist de conformité du site web ADA
- Checklist de conformité du site web de la section 508
- Checklist de conformité du site web AODA
Comment tester le niveau d'accessibilité de votre site Webflow
Pour tester si votre site Webflow est accessible, vous pouvez utiliser des outils de test automatisés, tels que l'extension Chrome Wave, ou vous appuyer sur des prestataires de services experts comme chez Agence No Code.
Pour utiliser Wave, vous devrez vous rendre sur la page de votre site en ligne que vous souhaitez tester, après quoi l'outil effectuera un audit rapide et automatisé de votre page web et vérifiera plusieurs point et vous donnera des informations en rapport avec les conformités des WCAG 2.1.
Il est important de noter que les deux approches se complètent. De nombreux propriétaires de sites Webflow se tournent vers des outils automatisés pour un audit initial de leur site, puis font appel à des prestataires de services experts pour les aider à examiner et à corriger les problèmes d'accessibilité.
Comment rendre votre site Webflow accessible : une analyse approfondie
Assurer l'accessibilité de votre site Webflow vous obligera à prendre en compte les besoins uniques de la communauté des personnes handicapées tout au long des étapes de planification, de conception et de développement du site. Bien que vous puissiez exécuter un audit d'accessibilité une fois que vous avez terminé de concevoir votre site, il est préférable de planifier votre site en tenant compte de l'accessibilité dès le départ. Cela peut vous faire économiser du temps et de l'argent.
Étant donné que la conception d'un site Webflow est généralement un processus à plusieurs niveaux, nous avons décidé d'aborder chaque niveau, ou phase, séparément.
Les meilleures pratiques en matière d'accessibilité seront donc présentées en deux phases distinctes, en fonction du moment où elles sont les plus pertinentes et applicables. Ces phases sont :
- La phase de conception et de planification
- La phase de développement
La phase de conception et de planification
L'accessibilité doit être prise en compte lors de la phase de planification et de conception de votre site Webflow. Au cours de cette phase, certaines considérations d'accessibilité primaires incluent :
1. Utilisez l'animation et les mouvement avec parcimonie
Les interactions de Webflow sont incroyablement puissantes et flexibles. Mais avec un grand pouvoir vient une grande responsabilité. Certains mouvements peuvent être nocifs pour certains visiteurs du site, tels que le mouvement derrière le texte statique, les flashs et les animations parallaxes.
Idéalement, le mouvement devrait être évité autant que possible. Pourtant, si dans certains cas vous estimez qu'il est nécessaire, il est important de suivre les directives pertinentes des WCAG.
Certaines animations peuvent nécessiter un bouton d'arrêt, de pause ou de masquage, en fonction de la longueur. De plus, vous devez éviter complètement d'utiliser du contenu clignotant.
2. Utilisez des polices accessibles
Les WCAG ont des sections qui s'appliquent spécifiquement au texte. Celles-ci incluent l'assurance que les polices sont faciles à lire lorsqu'elles sont redimensionnées et présentées avec un style ou un espacement différent. Utiliser des polices accessibles est essentiel pour de nombreuses personnes handicapées, en particulier pour les personnes ayant certains troubles de la vision. Les polices accessibles permettent de consommer facilement le contenu, tandis que les polices fines et illisibles présenteront des barrières numériques importantes pour certaines personnes.
Il est bon de noter que les polices accessibles et très lisibles bénéficient à tous les visiteurs du site, y compris ceux en dehors de la communauté des personnes handicapées. Dans l'ensemble, les visiteurs du site ne lisent généralement pas des blocs entiers de texte, mais les survolent et les parcourent à la recherche d'informations importantes.
Les polices accessibles peuvent également aider au classement dans les moteurs de recherche, car les sites ayant un niveau de lisibilité élevé sont généralement mieux classés.
Lors de l'intégration de polices accessibles dans la construction Webflow, il est important de s'assurer que les tailles de police sont accessibles sur tous les appareils. À cette fin, vous voudrez utiliser des unités relatives en CSS. Webflow facilite cela en vous permettant de sélectionner une unité relative, telle que REM ou Root Element’s font-size dans le panneau de style. En général, la taille de police racine par défaut est de 16px. Par conséquent, pour des calculs simples, 16px = 1 REM.
Dans Webflow, vous pouvez échanger des pixels contre des REM en tapant des équations mathématiques simples dans les champs de saisie de taille. Par exemple : 120px, 120/16rem donne 7.5rem.
3. Sélectionnez la bonne taille de cible
Il est recommandé de s'assurer que les éléments tels que les boutons, les icônes ou d'autres éléments interactifs occupent au moins 24x24 pixels d'espace. Cela peut inclure un espace blanc autour de la cible. C'est important car cela rend un site plus accessible à ceux qui trouvent les mouvements de contrôle moteur fins difficiles, aux personnes avec des doigts plus larges, ou aux personnes utilisant un stylet ou d'autres dispositifs d'assistance.
4. Considérez les composants que vous utiliserez
La phase de planification et de conception est un bon moment pour faire l'inventaire des composants que vous envisagez d'utiliser, tels que les accordéons, les modales pop-up, les carrousels ou les vidéos en arrière-plan, pour n'en nommer que quelques-uns. Ces composants peuvent présenter un nombre substantiel de problèmes d'accessibilité, vous devriez donc évaluer comment vous prévoyez de les utiliser tout au long de votre site. Il est important de noter que si vous envisagez d'utiliser ces types de composants, vous devrez fournir plus d'efforts lors du processus de développement pour garantir leur accessibilité.
La phase de développement
Après vous être assuré de votre succès lors de la phase de conception et de planification, il est temps de passer à l'action.
Les choses les plus impactantes et simples à faire pour rendre votre site Webflow accessible proviennent du suivi des bonnes pratiques HTML et CSS pour l'accessibilité.
Porter une attention particulière à la structure HTML sémantique et aux états de focus CSS est particulièrement important. Décomposons ces problèmes plus en détail :
1. Définissez votre code de langue
Votre première étape devrait être de naviguer vers la section des paramètres de votre site Webflow. Dans l'onglet Général, vous trouverez le paramètre de code de langue important. Cela définit l'attribut HTML lang pour le site et signale aux lecteurs d'écran de passer au profil linguistique et aux prononciations correctes. Il est également important d'utiliser la balise HTML lang si vous changez de langue au sein d'une page web.
2. Configurez les titres et descriptions des pages
Dans le Designer de Webflow, chaque page web a ses propres paramètres de métadonnées, nécessaires pour le référencement (SEO). Ceux-ci incluent le titre, la méta description et l'image open graph. Le paramètre le plus important pour l'accessibilité est le méta-titre. Il est généralement la première information annoncée par les technologies d'assistance, telles que les lecteurs d'écran, lorsqu'une page web se charge. Cela permet aux utilisateurs de ces outils de comprendre l'essence et le message de la page web qu'ils navigueront.
3. Ajoutez des balises HTML
HTML est le bloc de construction de tout site web. Bien qu'étant une plateforme de développement visuel, Webflow vous fournit tous les outils nécessaires pour construire une structure solide et accessible pour votre site.
Dans Webflow, vous le faites en configurant vos éléments de repère essentiels. Ceux-ci incluent :
- <NAV>
- <MAIN>
- <SECTION>
- <FOOTER>
Vous pouvez appliquer des balises HTML à n'importe quel div en utilisant le menu déroulant dans le panneau des paramètres sur le côté droit de l'écran. Alternativement, vous pouvez utiliser les éléments pré-stylés de Webflow, tels que Navbar ou Section, qui ont déjà l'élément de balise pré-appliqué. Créer ces repères aide les technologies d'assistance à comprendre la structure de base de votre site.
4. Gardez une mise en page simple
Gardez une mise en page simple et directe. La cohérence de la mise en page facilite la navigation des visiteurs sur votre site et la recherche de ce qu'ils recherchent. Webflow est une toile vierge qui permet un nombre infini d'options de mise en page, il est donc important de ne pas compliquer ou submerger l'utilisateur.
Une note sur la mise en page avancée :
Lorsqu'un élément HTML est ajouté à une page web, un ordre spécifique est créé. Si vous choisissez de changer l'ordre visuel de ces éléments, les technologies d'assistance ne reconnaîtront pas ces changements. Vous devez donc vous assurer de manière programmatique que les utilisateurs de technologies d'assistance peuvent accéder au contenu dans le même ordre que celui qui est présenté visuellement.
À cette fin, il y a deux domaines auxquels vous devez prêter attention :
- Vous devez vous assurer que les éléments partageant le même objectif sont nommés et fonctionnent de la même manière sur tout le site. Par exemple, le bouton "paramètres" doit avoir le même nom et la même fonctionnalité sur tout le site. Il ne devrait y avoir aucun endroit sur le site où ce bouton est nommé "configurations".
- Vous devez vous assurer que les éléments apparaissant pour faciliter la navigation correcte apparaissent au même endroit sur tout le site. Par exemple, si le lien vers la page des 'Conditions d'utilisation' apparaît à l'extrémité droite de la section pied de page, il doit apparaître à cette position sur l'ensemble du site.
5. Appliquez des titres HTML
Les personnes utilisant des lecteurs d'écran ou d'autres visiteurs du site avec des handicaps cognitifs comptent sur les titres pour les guider à travers votre site. Les titres sont comme une table des matières. Ils découpent le contenu en morceaux compréhensibles pour un utilisateur.
Les titres doivent être clairs et descriptifs, mais aussi suivre un ordre logique :
- Le titre H1 est le titre principal, utilisé une fois pour titrer la page. Les titres H2 sont pour les sections apparaissant dans la page, chacune représentant un sujet ou un thème significatif. Les titres H3 sont utilisés pour les sous-sections dans ces sections H2, détaillant des aspects spécifiques de chaque sujet principal. Les titres H4, H5, et H6 décomposent davantage ces sous-sections, offrant des couches de détail et aidant à une présentation claire et structurée des informations.
Il est important de noter que simplement augmenter la taille de la police pour qu'elle corresponde à celle d'une classe de titre spécifique ne suffit pas pour classer le texte comme un titre. Pour que les lecteurs d'écran les identifient comme des titres, des balises de titre doivent être ajoutées aux titres.
Pour activer les titres dans Webflow, vous devrez sélectionner Heading dans la bulle de typographie :
Sélecteur de typographie dans le panneau des éléments du designer Webflow. Les options pour heading, paragraphe, lien de texte, texte, citation en bloc, texte riche sont affichées.
Et puis sélectionnez la classe de titre appropriée :
Affichage de titre dans le designer Webflow. Option pour choisir le type de titre h1 à h6 avec rappel de garder un ordre de titre prévisible.
6. Utilisez des listes sémantiques
Les blocs div sont les principaux éléments de construction des sites Webflow. Ceux-ci peuvent être facilement utilisés pour presque toutes les tâches de conception. Cependant, Webflow propose également un élément de liste spécifique qui doit être utilisé chaque fois qu'il y a un regroupement ou une liste. L'utilisation de listes sémantiques informe les lecteurs d'écran que le contenu avec lequel ils interagissent est une liste d'éléments. Cela permet également aux utilisateurs de lecteurs d'écran de savoir s'il existe un ordre séquentiel dans la liste et combien d'éléments elle contient.
Remarque importante : Les éléments de liste de collection dans Webflow sont automatiquement stylés comme des listes non ordonnées.
7. Ajoutez des états de focus et des indices visuels
Certains visiteurs du site naviguent uniquement à l'aide de leur clavier. Ils le font en passant d'un élément interactif à l'autre en utilisant la touche Tab. Les navigateurs web ajoutent généralement un contour par défaut autour des liens et autres éléments interactifs lorsqu'ils sont sélectionnés avec le clavier. Cela aide les utilisateurs de clavier à comprendre quel élément ils sont en train de manipuler. Cependant, certains éléments de Webflow, comme les menus déroulants, ne sont pas reconnus comme des éléments interactifs, et sans un état de focus appliqué, ils ne seront pas détectés par les navigateurs.
Dans Webflow, vous pouvez vous assurer que tous les éléments accessibles via la touche Tab disposent d'un état de focus. Vous pouvez ajouter cet état dans le panneau de style, dans le menu déroulant du sélecteur de style. Il est important d'ajouter des indices visuels à tous les éléments interactifs pour tous les visiteurs du site, et pas seulement pour ceux qui utilisent un clavier pour naviguer. Il est important que ces indices visuels ne soient pas basés uniquement sur la couleur. Les indices uniquement basés sur la couleur laissent de côté les visiteurs ayant différentes formes de daltonisme et peuvent facilement être manqués par d'autres utilisateurs. En général, la couleur seule est un indicateur ou un descripteur pauvre pour inciter un visiteur à effectuer une action. Pensez à d'autres moyens de montrer qu'un élément est interactif.
Vous pouvez styliser plusieurs états en plus de l'état de focus dans Webflow. Ceux-ci incluent :
- None : L'état par défaut.
- Hover : Lorsque l'élément est survolé. Notez que cela ne fonctionne généralement pas sur la plupart des appareils tactiles.
- Pressed : L'état lorsque l'élément est cliqué.
- Visited : Indique qu'un lien a été visité auparavant.
Note sur l'ordre logique de tabulation : L'ordre de tabulation doit être logique sur une page web pour que les utilisateurs de clavier puissent naviguer de façon séquentielle entre les éléments. Une façon simple de vérifier si votre site peut être correctement navigué uniquement avec un clavier est d'ouvrir un navigateur web et d'appuyer sur la touche Tab. Chaque élément interactif doit avoir un état de focus reconnaissable et être dans l'ordre de tabulation séquentiel à mesure que vous parcourez la page.
8. Ajoutez du texte alternatif aux images significatives
Les images sont souvent utilisées pour transmettre des informations et du contenu sur un site web. Cependant, certains visiteurs, en particulier ceux qui utilisent des lecteurs d'écran, ne peuvent pas y accéder si elles ne comportent pas de texte alternatif descriptif.
Le texte alternatif (ou "alt text") est un attribut HTML qui contient la description textuelle d'une image en ligne, visible lorsqu'un utilisateur ne peut pas y accéder. Le texte alternatif est lu à haute voix par les lecteurs d'écran pour les personnes ayant des déficiences visuelles, et il est généralement invisible pour les autres personnes visitant une page web. Cependant, si une image ne se charge pas en raison d'une connexion internet lente ou si les paramètres du navigateur désactivent les images, le texte alternatif peut apparaître sur la page.
Il existe plusieurs façons d'ajouter du texte alternatif dans Webflow. Il peut être appliqué à chaque image téléchargée dans le panneau des actifs. Alternativement, le texte alternatif peut être ajouté ou mis à jour dans le panneau de style pour une image spécifique. En ce qui concerne les images dans les collections CMS de Webflow - un regroupement de types de contenu avec une structure personnalisable comme les articles de blog - vous devez vous assurer que chaque image a un champ de texte alternatif correspondant auquel elle peut être mappée. Le champ multi-images dispose également d'un endroit pour ajouter du texte alternatif pour chaque image.
Aussi important que soit l'utilisation du texte alternatif, il est tout aussi important d'identifier les images qui n'apportent aucune signification supplémentaire et de les définir comme décoratives.
Vous pouvez faire cela de deux manières simples :
- Naviguez vers les actifs dans le Designer, survolez l'image, cliquez sur les paramètres, puis cochez "Décoratif".
- Si vous avez ajouté l'image en tant que texte enrichi : Cliquez sur l'image, puis sur l'icône de clé. Enfin, sélectionnez "Aucun : l'image est décorative" dans le texte alternatif.
9. Ajoutez des liens textuels descriptifs
Les liens sur un site web doivent indiquer très clairement où les visiteurs du site seront dirigés s'ils cliquent dessus. C'est particulièrement important pour les utilisateurs de lecteurs d'écran qui ne peuvent pas toujours comprendre la pertinence d'un lien en se basant uniquement sur le contexte. "Lire la suite", "Cliquez ici" et "En savoir plus" sont donc de mauvais descripteurs de lien, ou texte d'ancrage.
C'est un domaine où vous pouvez utiliser des étiquettes ARIA dans les paramètres d'attributs personnalisés d'un élément. ARIA est un ensemble de rôles et d'attributs HTML qui améliorent l'accessibilité du contenu web et des applications web pour les personnes handicapées. En incorporant des attributs et des rôles ARIA dans leur code, les créateurs de sites Webflow peuvent améliorer l'accessibilité des composants d'interface utilisateur complexes, du contenu dynamique et de l'interactivité. Dans le cas des liens textuels, une étiquette ARIA fournira à l'utilisateur un nom accessible et reconnaissable pour cet élément interactif, et remplacera les informations originales du bouton qu'un lecteur d'écran lirait.
Voici un exemple pour illustrer ce problème :
Disons que vous avez une page web avec un lien menant les visiteurs à en savoir plus sur la pêche sur le fleuve Fraser. Même si le bouton avec le lien indique "Cliquez pour plus d'informations", un visiteur voyant du site pourrait reconnaître le contenu au-dessus du bouton et comprendre que le lien les amène à une page avec plus d'informations sur la pêche sur le fleuve Fraser. Cependant, un utilisateur de lecteur d'écran n'a pas accès à ce contexte et ne comprendra probablement pas pleinement l'objectif et la destination de ce lien.
Ajouter un nom d'étiquette aria : “aria-label” avec la valeur : “En savoir plus sur la pêche sur le fleuve Fraser” au lien, spécifie les informations pour le lecteur d'écran. Une fois lu à haute voix, l'utilisateur du lecteur d'écran comprendra exactement où le lien le mènera.
Voici comment ajouter des étiquettes aria dans le champ d'attributs personnalisés :
Section d'attributs personnalisés dans le panneau des paramètres du designer Webflow. Nom = aria-label Valeur = valeur dynamique de la collection CMS.
Ajouter des étiquettes ARIA est encore plus important avec les listes de collections dynamiques. Dans ce cas, chaque bouton ou lien est identique et le lecteur d'écran les lisant en séquence ne donnerait aucun contexte à l'utilisateur. Jusqu'à récemment, la seule façon d'ajouter des étiquettes ARIA aux listes de collections dans Webflow était via du code personnalisé. Cependant, Webflow a récemment ajouté une cartographie dynamique aux attributs personnalisés. Maintenant, vous pouvez facilement ajouter une étiquette aria descriptive unique pour chaque lien dans une liste. Il vous suffit d'ajouter un champ d'étiquette aria dans votre collection et de le mapper à la valeur de l'étiquette ARIA dans les attributs personnalisés.
10. Ajoutez des sous-titres et des transcriptions aux vidéos
Le contenu vidéo significatif apparaissant sur votre site Webflow doit comporter des sous-titres précis et complets. Les sous-titres sont des descriptions textuelles à l'écran représentant le dialogue et/ou les sons significatifs apparaissant dans une vidéo. Essentiels pour les personnes malentendantes, les sous-titres leur permettent de comprendre correctement le contenu affiché dans la vidéo.
Webflow vous permet d'intégrer des vidéos à l'aide de différents lecteurs et intégrations, tels que YouTube et Vimeo.
Il est important de noter que, bien que YouTube génère automatiquement des sous-titres fermés, ils ne sont pas toujours entièrement précis. Selon les WCAG, les sous-titres générés automatiquement doivent être vérifiés pour être considérés comme accessibles.
Les plateformes vidéo comme Vimeo vous permettent de télécharger un fichier contenant vos sous-titres. Vous pouvez en savoir plus à ce sujet en cliquant ici. Vous pouvez également utiliser la fonctionnalité de sous-titres générés automatiquement de Vimeo. Cependant, comme pour YouTube, vous devrez réviser les sous-titres et vérifier leur exactitude.
Les transcriptions sont un autre excellent moyen d'ajouter de l'accessibilité pour les vidéos. Les transcriptions sont la représentation textuelle de tout ce qui se trouve dans une vidéo. Selon la vidéo, cela peut inclure des informations sur les actions, les costumes, les décors et les changements de scène, si cela est pertinent. Les transcriptions offrent également une alternative pour consommer du contenu vidéo,
ce qui est utile pour les personnes en dehors de la communauté des personnes handicapées.
Pour les transcriptions, envisagez d'utiliser un service ou un logiciel de transcription. Quelle que soit la manière dont vous les créez, les transcriptions doivent généralement être placées à côté ou en dessous du lecteur vidéo. Vous pouvez également faire apparaître les transcriptions sur une page web distincte et y diriger les gens à l'aide d'un lien clairement étiqueté.
Rendre les vidéos accessibles est un sujet en soi, que vous pouvez lire dans notre guide sur l'accessibilité des vidéos.
11. Assurez-vous que vos documents en ligne sont accessibles
Les documents en ligne, tels que les PDF, sont fréquemment utilisés sur les sites Webflow pour fournir des informations aux visiteurs. Il est courant qu'un restaurant propose des PDF téléchargeables de ses menus, et que les sites SaaS offrent des eBooks à télécharger, par exemple.
Il est important que ces documents soient accessibles à tous, y compris ceux qui utilisent des technologies d'assistance comme les lecteurs d'écran.
Pour qu'un document en ligne soit considéré comme accessible, il doit comporter un certain nombre d'éléments, notamment :
- Des balises appropriées
- Un texte lisible et de grande taille
- Un contraste de couleurs approprié entre le texte et son arrière-plan
- Du texte alternatif pour les images significatives, si celles-ci sont présentes
- Un texte de lien descriptif
Si vos documents en ligne ne sont pas entièrement accessibles, vous devrez les corriger. Le processus de correction des documents en ligne peut s'avérer difficile, long et coûteux, c'est pourquoi de nombreux propriétaires de sites Webflow se tournent vers des prestataires de services experts, tels qu'accessServices, pour réaliser ces tâches pour eux. Faire appel à des prestataires de services experts peut s'avérer particulièrement bénéfique lorsque vous traitez des documents longs et complexes. Avec une connaissance intime des directives d'accessibilité web et PDF pertinentes, ces experts sont mieux équipés pour gérer ces projets de manière opportune et rentable.
Que faire à propos du code personnalisé (custom code) ?
Pour répondre aux exigences d'accessibilité de base, un lien "Passer au contenu" est nécessaire. Ce lien permet aux utilisateurs de clavier de contourner le menu de navigation et d'accéder directement au contenu principal de la page, identifié par la balise HTML MAIN que nous avons abordée dans la structure du site. Vous pouvez revenir à cette section en cliquant ici.
Un petit extrait de code javascript personnalisé est nécessaire pour implémenter un lien "Passer au contenu" dans Webflow.
Pour des conceptions plus complexes utilisant différents composants de site web, tels que des accordéons, des carrousels, des tableaux et des vidéos en arrière-plan, des attributs ARIA personnalisés supplémentaires ou du javascript seront nécessaires pour rendre un site accessible.
Finsweet Attributes, une bibliothèque Javascript populaire pour Webflow, propose toute une sélection dédiée aux solutions d'attributs accessibles. De plus, la checklist d'accessibilité de Webflow propose des solutions purement Javascript comme le lien "Passer au contenu".
Réflexions finales
Avec des options de conception inégalées, Webflow peut être utilisé pour créer des sites web véritablement uniques, à la fois du point de vue de la conception et de l'utilisabilité. Cependant, cette liberté créative voit les utilisateurs de Webflow concevoir des sites qui ne sont pas entièrement accessibles aux personnes ayant certains handicaps. Pour garantir que tous les visiteurs sont traités de manière égale, les propriétaires de sites Webflow doivent mettre en œuvre les meilleures pratiques en matière d'accessibilité web.
Si vous souhaitez rendre votre site Webflow accessible, des professionnel d'Agence No Code sont spécialisé dans l'accessibilité, contactez nous pour plus d'informations !
