Centre d'aideAccessibilité numérique
Aperçu de l'accessibilité des blocs sur les sites web Tilda et des caractéristiques des blocs permettant de l'améliorer
La plupart des blocs de la bibliothèque de blocs de Tilda sont déjà optimisés pour être utilisés par des personnes souffrant de handicaps constants, temporaires ou situationnels. Dans cet article, nous vous expliquons quelles sont les possibilités existantes et les paramètres que vous pouvez configurer pour améliorer l'accessibilité de votre site web.
Une brève liste de contrôle pour améliorer l'accessibilité des sites web
- 1Vérifier si les titres SEO sont définis pour les blocs d'en-tête
- 2Définir des alt-texts pour les images et s'assurer qu'ils révèlent le contenu de l'image
- 3Vérifier si les blocs de menu sont situés sur la page d'en-tête et le pied de page sur la page de pied de page.
- 4Dans les paramètres de contenu des blocs contenant des formulaires en ligne, vérifiez si chaque champ a un intitulé et si le message de réussite après l'envoi du formulaire est spécifié.
- 5Vérifiez le contraste des polices de caractères du site web et assurez-vous qu'il n'y a pas de texte sur un fond de couleur similaire ou d'images qui le rendent moins lisible.
- 6Vérifiez si la langue du projet est définie dans les Paramètres du site → Plus
- 7Vérifier les lignes directrices en matière d'accessibilité pour les éléments en Zero Block
Optimisation des lecteurs d'écran
Un lecteur d'écran est un logiciel qui énonce vocalement ce qui est affiché à l'écran. Les lecteurs d'écran sont souvent préinstallés et utilisés par le biais des paramètres d'accessibilité du système d'exploitation.
Les blocsTilda sont soit automatiquement optimisés pour fonctionner avec les lecteurs d'écran, soit incluent les paramètres nécessaires pour baliser le contenu de manière à ce qu'il soit correctement prononcé par le lecteur d'écran.
Les blocsTilda sont soit automatiquement optimisés pour fonctionner avec les lecteurs d'écran, soit incluent les paramètres nécessaires pour baliser le contenu de manière à ce qu'il soit correctement prononcé par le lecteur d'écran.
Tags H1-H6 Titile
Si le contenu du site web a une structure claire, vous pouvez définir des balises H1, H2 et H3 pour les titres. Des titres de différents niveaux aideront le lecteur d'écran à mieux interpréter la structure de la page et à passer d'un contenu à l'autre à l'aide du clavier.
Vous pouvez définir des balises H1-H3 dans les paramètres de n'importe quel bloc qui a un titre sous "SEO : Balise de titre". Dans d'autres blocs, par exemple dans les sous-titres des cartes, vous pouvez définir des titres d'autres niveaux jusqu'à H6.
Vous pouvez définir des balises H1-H3 dans les paramètres de n'importe quel bloc qui a un titre sous "SEO : Balise de titre". Dans d'autres blocs, par exemple dans les sous-titres des cartes, vous pouvez définir des titres d'autres niveaux jusqu'à H6.
Important. Il ne peut y avoir qu'une seule balise H1 sur chaque page. Vous pouvez avoir un nombre quelconque de balises d'autres niveaux, à condition que la hiérarchie soit respectée (par exemple, pas de titres H2 dans H3).
Texte alternatif (Alt) pour les images
Le texte alternatif des images est lisible par le lecteur d'écran. Il est donc utile de le définir pour que les personnes malvoyantes puissent comprendre le contenu de l'image. Le texte alternatif est également affiché en cas d'autres limitations d'accessibilité, telles qu'une connexion lente.
Pour définir le texte alternatif d'une image, ouvrez l'onglet Contenu du bloc et cliquez sur les trois points situés à côté de l'image téléchargée.
Pour définir le texte alternatif d'une image, ouvrez l'onglet Contenu du bloc et cliquez sur les trois points situés à côté de l'image téléchargée.
Si l'image est simplement décorative, comme l'arrière-plan d'un élément de la page, elle peut ne pas nécessiter de texte alternatif.
Pour ajouter une balise alt pour les images des blocs de la catégorie "Galerie", ouvrez l'onglet Contenu et cliquez sur "Texte" à côté de l'image téléchargée. Ensuite, dans le champ "Image alt for SEO", indiquez la description de l'image.
Voici comment spécifier le texte alt d'une image dans l'onglet Contenu d'un bloc sur Tilda
Pour améliorer l'accessibilité, le texte alternatif doit communiquer avec précision le contenu de l'image et s'adresser aux visiteurs qui ne peuvent pas voir l'image pour une raison ou une autre.
Prenons cette photo comme exemple :
Mauvais exemples de textes alt :
"Chien"
"Caniche"
Bon exemple de texte alt :
"Un chiot caniche est assis sur l'herbe dans l'arrière-cour d'une maison en briques"
Mauvais exemples de textes alt :
"Chien"
"Caniche"
Bon exemple de texte alt :
"Un chiot caniche est assis sur l'herbe dans l'arrière-cour d'une maison en briques"
Conseils pour la conception de pieds de page et d'en-têtes
Les blocs de l'en-tête et du pied de page sont automatiquement marqués d'une manière qui permet au lecteur d'écran de reconnaître qu'un visiteur se trouve dans un tel bloc. Par exemple, dans l'en-tête, vous pouvez sauter la lecture de tous les éléments du menu et passer directement au contenu principal de la page.
Les blocs contenant l'en-tête et le pied de page doivent nécessairement se trouver sur des pages distinctes pour l'en-tête et le pied de page afin d'être correctement balisés.
Les blocs contenant l'en-tête et le pied de page doivent nécessairement se trouver sur des pages distinctes pour l'en-tête et le pied de page afin d'être correctement balisés.
Pour le configurer correctement, regardez ce tutoriel vidéo ou consultez l'article En-tête et pied de page dans le Centre d'aide.
Conseils pour remplir les formulaires en ligne
La plupart des champs de saisie des blocs de la catégorie "Formulaires" sont accessibles au lecteur d'écran. Les messages de réussite ou d'erreur sont émis par le lecteur d'écran.
Veillez également à spécifier les titres des champs de saisie, de manière à ce que chaque champ indique clairement ce qu'il faut y taper.
Veillez également à spécifier les titres des champs de saisie, de manière à ce que chaque champ indique clairement ce qu'il faut y taper.
Le processus de personnalisation des champs de formulaire et des messages contextuels indiquant que le formulaire a été rempli avec succès est décrit dans notre tutoriel vidéo sur la mise en place de formulaires en ligne.
Conseils sur le contraste et la taille des caractères
Un contraste de police suffisant aide les visiteurs à percevoir plus facilement le texte sur le site web. Il n'est pas seulement important de respecter les règles de contraste parce que vous pouvez avoir des visiteurs malvoyants, le bon contraste améliore l'expérience de l'utilisateur en général.
Il existe une norme sur le web pour déterminer le contraste de l'arrière-plan et du texte, qui est basée sur les WCAG (Web Content Accessibility Guidelines - Lignes directrices pour l'accessibilité des contenus web). Selon cette norme, le contraste est défini comme le nombre de fois que la luminosité de la couleur la plus claire et de la couleur la plus foncée diffère et s'écrit comme le rapport de cette luminosité : 3:1, 4.5:1, 10:1. Plus la valeur est faible, plus le contraste est faible (le rapport de contraste maximal est de 21:1).
Pour rendre le site web accessible aux personnes malvoyantes, vous devez augmenter le contraste des polices de caractères. Des plages de valeurs spécifiques pour les éléments sont décrites ci-dessous.
Vous pouvez utiliser l'outil de contraste de l'arrière-plan et de couleur de la police pour calculer la valeur du contraste et la comparer aux valeurs ci-dessous. Pour ce faire, il suffit de copier les valeurs d'arrière-plan et de couleur des blocs préconçus ou de Zero Block, de les ajouter au service spécifié ci-dessous et d'obtenir le rapport de contraste.
Il existe une norme sur le web pour déterminer le contraste de l'arrière-plan et du texte, qui est basée sur les WCAG (Web Content Accessibility Guidelines - Lignes directrices pour l'accessibilité des contenus web). Selon cette norme, le contraste est défini comme le nombre de fois que la luminosité de la couleur la plus claire et de la couleur la plus foncée diffère et s'écrit comme le rapport de cette luminosité : 3:1, 4.5:1, 10:1. Plus la valeur est faible, plus le contraste est faible (le rapport de contraste maximal est de 21:1).
Pour rendre le site web accessible aux personnes malvoyantes, vous devez augmenter le contraste des polices de caractères. Des plages de valeurs spécifiques pour les éléments sont décrites ci-dessous.
Vous pouvez utiliser l'outil de contraste de l'arrière-plan et de couleur de la police pour calculer la valeur du contraste et la comparer aux valeurs ci-dessous. Pour ce faire, il suffit de copier les valeurs d'arrière-plan et de couleur des blocs préconçus ou de Zero Block, de les ajouter au service spécifié ci-dessous et d'obtenir le rapport de contraste.
Pour un texte normal, la valeur de contraste minimale nécessaire pour que le texte puisse être distingué est de 4,5:1. Des valeurs de 7:1 et plus signifient déjà que le texte est plus contrasté (dans les catégories standard - AAA).
Pour les textes plus grands (tels que les titres), la valeur minimale de contraste est de 3:1. À partir de 4,5:1, le texte est considéré comme amélioré, c'est-à-dire adapté à une utilisation par des personnes souffrant de déficiences visuelles.
Pour les éléments non textuels (boutons, commandes de navigation, etc.), il est nécessaire et suffisant de maintenir un rapport de contraste supérieur à 3:1.
Pour les textes plus grands (tels que les titres), la valeur minimale de contraste est de 3:1. À partir de 4,5:1, le texte est considéré comme amélioré, c'est-à-dire adapté à une utilisation par des personnes souffrant de déficiences visuelles.
Pour les éléments non textuels (boutons, commandes de navigation, etc.), il est nécessaire et suffisant de maintenir un rapport de contraste supérieur à 3:1.
Vous pouvez également utiliser le service en ligne Wave (Web Accessibility Evaluation Tools) pour vérifier le contraste et l'accessibilité d'une page. Il montre visuellement les problèmes éventuels de contraste et d'accessibilité des éléments du site web. Cependant, les recommandations fournies par ce service ne sont pas toutes pertinentes et correctes. En particulier, tous les éléments ne nécessitent pas forcément un texte de remplacement.
Comment spécifier la langue du site web
Pour une meilleure accessibilité, veillez à spécifier la langue du site web dans Paramètres du site → Plus. Cela permettra aux logiciels tiers de mieux interagir avec le site web.
Naviguer entre les blocs de sites web à l'aide du clavier
Pour certains types de limitations, il est plus pratique d'utiliser le clavier pour naviguer dans le contenu du site web. Les blocs Tilda sont conçus pour faciliter la navigation au clavier :
- Lorsque l'on navigue avec le clavier, un cadre de couleur permet de savoir avec quel élément on est en train d'interagir.
- Les blocs contenant des menus, des sous-menus, des formulaires, des tuiles, des lecteurs vidéo, des onglets et des curseurs sont automatiquement étiquetés de manière à ce que l'on puisse y naviguer à l'aide du clavier.
Conseils d'accessibilité pour Zero Block
Actuellement, les travaux sur l'accessibilité de tous les éléments de Zero Block sont encore en cours. Toutefois, il est important de suivre les lignes directrices générales décrites ci-dessous.
Gardez les couches dans le bon ordre. Pour les visiteurs qui interagissent avec la page à l'aide du clavier, l'ordre correct des points d'attention est essentiel.
Lorsque l'on se déplace dans les éléments à l'aide de la touche de tabulation, les éléments sont sélectionnés dans l'ordre dans lequel ils apparaissent dans la mise en page. Pour vous assurer que cet ordre est correct, placez les éléments dans le bon ordre. La navigation se fera dans l'ordre inverse de celui spécifié dans les calques, du dernier élément au premier.
Lorsque l'on se déplace dans les éléments à l'aide de la touche de tabulation, les éléments sont sélectionnés dans l'ordre dans lequel ils apparaissent dans la mise en page. Pour vous assurer que cet ordre est correct, placez les éléments dans le bon ordre. La navigation se fera dans l'ordre inverse de celui spécifié dans les calques, du dernier élément au premier.
Ne laissez pas d'éléments vides, surtout s'ils ont un rôle sémantique, comme la balise H1. Inclure des liens, des balises SEO et du texte à l'intérieur des éléments. Pour les images qui ne sont pas décoratives, utilisez un texte alternatif (alt).
