Comment puis-je rendre mon site Website Builder plus accessible ?
Un site Web accessible permet à tous les utilisateurs, y compris les personnes handicapées, de naviguer, de comprendre et d’interagir avec votre contenu. Si vous utilisez Website Builder, vous pouvez améliorer l’accessibilité en ajustant les éléments clés et en suivant les bonnes pratiques, telles que l’ajout de texte alternatif aux images et la structure claire de la conception et du contenu de votre site.
Si vous avez des questions générales sur l’accessibilité des sites Web, vous pouvez consulter notre guide : FAQ sur l’accessibilité du site Web.
Note: Chez one.com, nous faisons de notre mieux pour fournir les outils nécessaires afin de vous permettre de créer et de maintenir un site Web conforme aux exigences d’accessibilité. Cependant, vous êtes en fin de compte responsable de la conformité totale. Par conséquent, nous vous recommandons fortement de vous familiariser avec les lois locales ou régionales en matière d’accessibilité, car il pourrait y avoir des exigences qui ne sont pas abordées dans cet article.
Éléments visuels
Textes alternatifs pour les images, les icônes et les graphiques
Le texte alternatif sert de description lisible d’une image et peut servir de substitut si le visiteur du site Web ne peut pas la voir. Le texte alternatif peut être récupéré et lu par un lecteur d’écran. Vous trouverez des instructions sur l’endroit où ajouter du texte alternatif aux images ou à d’autres éléments visuels dans ces guides :
- Images (s’applique également aux SVG et aux icônes) : Comment ajouter une image à mon site Website Builder ?
- Utilisation du composant de logo dans Website Builder
- Images de produits (Boutique en ligne) : Gérer les produits dans votre Boutique en ligne
- Galerie et curseur d’image : Comment utiliser les composants Galerie et Curseur d’image dans le Créateur de sites Web
- Images de Blogs : Getting started with Blogs in Website Builder
Vraiment non Il est nécessaire d’ajouter un texte alternatif pour les images d’arrière-plan, car celles-ci ne servent souvent qu’à des fins décoratives. Le texte alternatif ne doit être ajouté qu’aux images qui transmettent un contenu important, servent à des fins informatives ou nécessitent une interaction de la part du visiteur du site Web.
Pour indiquer qu’une image sert d’image que les outils d’assistance peuvent ignorer, vous pouvez accéder à SEO dans les paramètres de l’image et faire glisser le bouton Définir comme élément décoratif sur ON.
Pour garantir une conformité totale, nous vous recommandons d’examiner toutes les images de votre site Web et de leur donner un texte alternatif ou de les définir comme éléments décoratifs.
Langue de la page
La définition de la langue de chaque page de votre site permet aux lecteurs d’écran de lire correctement la page à haute voix. Consultez ce guide pour obtenir des instructions étape par étape : Comment définir la langue d’une page dans le Créateur de site Web ?
Éléments auditifs
Sous-titres et transcriptions pour l’audio et la vidéo
Il n’est pas possible d’ajouter des sous-titres ou de générer des transcriptions avec l’option vidéo auto-hébergée dans Website Builder. Cependant, il existe deux solutions de contournement pour cela :
- Téléchargez plutôt des vidéos via YouTube. Cela garantira que les vidéos peuvent être affichées avec des sous-titres. Vous pouvez en savoir plus sur cette fonctionnalité dans notre guide : Ajouter une vidéo YouTube à votre site web.
- Ajoutez des transcriptions séparément sous la forme d’un fichier facilement accessible sur votre site. Vous pouvez utiliser le document à cet effet, que vous pouvez lire dans notre guide : Comment puis-je intégrer un document dans mon site Website Builder ?
Structure et design
En-têtes sémantiques
Utilisez la hiérarchie sémantique des en-têtes (H1, H2, H3, paragraphe) dans la mise en page du texte de votre site. Cette hiérarchie reflète une façon d’organiser le contenu de manière logique et significative via des balises sur les sites HTML. Elle est utilisée par les technologies d’assistance, telles que les lecteurs d’écran, pour donner un sens au contenu et le transmettre dans le bon ordre au visiteur du site.
Dans l’éditeur Website Builder, chaque titre est clairement marqué (titre 1, titre 2, etc.) lorsque vous utilisez un composant de texte. Vous pouvez sélectionner un titre dans le panneau latéral lors de l’ajout d’un nouveau composant de texte à votre site ou modifier le titre dans le panneau des propriétés pour les composants de texte existants.
Les modèles Website Builder incluent des titres et des étiquettes clairs et, par défaut, suivent la logique décrite ci-dessus.
Rapport de contraste pour le texte
En ce qui concerne le texte d’un site Web, voici les exigences minimales pour le rapport de contraste :
- Titres : 3:1
- Paragraphes : 4.5:1
Vous pouvez ajuster le rapport de contraste du texte dans Website Builder comme suit :
Si la fonction thème de couleur est activée :
Si vous utilisez un thème de couleur sur votre site, vous devez modifier le rapport de contraste via les paramètres du thème de couleur. Ce guide explique comment procéder : Utilisation d’un thème de couleur dans Website Builder.
Si la fonction de thème de couleur est réglée sur OFF :
Lorsque la fonction de thème de couleur est désactivée, vous devez modifier le rapport de contraste via les paramètres globaux :
- Accédez à Paramètres du modèle dans le coin inférieur droit de l’éditeur Website Builder.
- Cliquer Modifier les styles de modèle dans le menu qui s’affiche.
- Vous verrez maintenant un aperçu de tous les styles de texte utilisés sur votre site Web (texte, liens, menu, bouton et tableau). Cliquez sur l’icône couleur du texte pour chaque élément afin d’accéder aux paramètres de couleur. Vous pouvez sélectionner une couleur via le sélecteur de couleurs ou saisir un code hexadécimal.
Note: Le Website Builder ne peut pas vous indiquer les ratios exacts de votre site, mais vous pouvez utiliser des outils externes pour l’analyser et obtenir les valeurs dont vous avez besoin. Par exemple, vous pouvez essayer cet outil de WebAIM. Ici, vous pouvez saisir les codes hexadécimaux de votre premier plan et de votre arrière-plan, puis ajuster la couleur jusqu’à obtenir le bon rapport de contraste et les codes hexadécimaux correspondants. Vous pouvez ensuite copier-coller ces codes dans Website Builder.
Contraste non textuel
Les éléments colorés de votre site Web qui n’incluent pas de texte, tels que les couleurs d’arrière-plan sur les sections ou les couleurs des boutons, peuvent être entièrement ajustés via les paramètres de thème de couleur ou les paramètres globaux du modèle, comme indiqué ci-dessus.
Le style de chaque élément peut être ajusté via les paramètres de son composant. Par exemple, si vous cliquez sur une section, un en-tête ou un pied de page, vous verrez l’option permettant de modifier la couleur ou le style de l’élément.
Navigation
Accès clavier
Nous vous recommandons de vous en tenir à un contenu clair sur votre site Web et d’éviter les éléments complexes, tels que le contenu déclenché par le focus ou zones de survol. Ce dernier peut être remplacé par des images et des liens.
Il est à noter que les menus déroulants sont accessibles via le clavier.
Mettre en pause, arrêter ou masquer du contenu
Il doit être possible de contrôler ou de masquer manuellement tous les éléments mobiles ou interactifs de votre site web. Voici quelques éléments que vous devriez vérifier si vous les avez sur votre site Web :
- Curseur d’image : La fonction de lecture automatique de ce composant est activée par défaut, mais vous pouvez la désactiver et ajouter des commandes manuelles à la place. Allez dans le composant de votre curseur d’image, cliquez sur Paramètres du composant image, puis sélectionnez Navigation pour accéder à ces paramètres.
- GIFs : Évitez de télécharger des GIF via le composant image s’ils n’incluent pas de contrôles.
- Images et vidéos d’arrière-plan: Ces éléments n’ont actuellement pas de fonction lecture/pause, mais nous travaillons sur une solution pour répondre à cette exigence. En attendant, nous vous recommandons d’éviter les images d’arrière-plan en mouvement ou les arrière-plans vidéo.<3>
- Vidéos: Assurez-vous que les commandes sont visibles sur les vidéos et que la lecture automatique est désactivée. Vous pouvez en savoir plus sur les paramètres vidéo dans notre guide : Comment puis-je ajouter une vidéo à mon site Website Builder ?
Contenu clignotant
Contenu qui comprend plus de trois clignotements par seconde devrait être évité. Le Website Builder ne contient pas de contenu clignotant standard, mais vous pouvez en importer. Cependant, nous vous recommandons d’éviter de le faire ou, à tout le moins, de permettre au visiteur de contrôler et de passer ce contenu manuellement.
Articles connexes: