Recherche

Rédacteur du bulletin d'information : Effectuer un test d'accessibilité

Temps de lecture : 2 min
Les courriels accessibles sont la clé de l'inclusion. Ils garantissent que chaque destinataire, quelles que soient ses capacités ou ses limites, peut facilement comprendre votre contenu. Votre mailing offre une meilleure expérience à l'utilisateur, renforce votre marque et peut même conduire à des taux de conversion plus élevés.

Dans notre article Critères pour les tests d'accessibilité de vos courriels, nous avons résumé d'autres informations et montré l'importance des tests d'accessibilité.

Comment fonctionne le test d'accessibilité dans notre éditeur de newsletter :

  1. Ouvrez le mailing pour lequel vous souhaitez effectuer le test via le point de menu Emails.


  2. En haut à droite, sous " Aperçu", vous trouverez l'élément " Test d'accessibilité".

  3. Une fenêtre pop-up s'ouvre sur l'ensemble de la page. Vous pouvez y consulter votre quota de tests existant, effectuer des tests, en acheter d'autres et récupérer des tests antérieurs.

  4. Cliquez sur Démarrer le test d'accessibilité. Votre envoi sera scanné et vous recevrez l'aperçu suivant :


    Sous l'onglet Améliorations , vous trouverez les critères que vous devez adapter. Cliquez sur la flèche vers le bas à droite pour obtenir plus d'informations et pour voir quel extrait HTML est affecté. Vous trouverez des explications supplémentaires dans le tableau Explications des ID de règles (suggestions d'amélioration) à la fin de cet article.
  5. Cliquez sur le x dans le coin supérieur droit pour revenir à l'éditeur et ajuster les suggestions d'amélioration qui s'y trouvent.
  6. Cliquez à nouveau sur Aperçu une fois que vous avez effectué vos ajustements > Test d'accessibilité. Vous pouvez cliquer sur Récupérer le test précédent (voir la capture d'écran de l'étape 3) pour afficher à nouveau les suggestions ou cliquer sur Lancer le test d'accessibilité pour exécuter à nouveau le test à des fins de vérification. pour relancer le test.

Explications des ID des règles (suggestions d'amélioration après le test)

Le test d'accessibilité (voir capture d'écran étape 4) permet de vérifier que votre envoi respecte ces règles :

ID de la règle Description
touches d'accès Veille à ce que chaque valeur de l'attribut accesskey soit unique
area-alt Veille à ce que les éléments de la zone <> des cartes illustrées soient accompagnés d'un texte de remplacement.
aria-allowed-attr Garantit que les attributs ARIA sont autorisés pour le rôle d'un élément
aria-allowed-role Veille à ce que l'attribut role ait une valeur appropriée pour l'élément
aria-corps-caché S'assure que aria-hidden='true' n'est pas présent dans le corps du document.
aria-progressbar-name Veille à ce que chaque nœud de la barre de progression ARIA ait un nom accessible
aria-required-attr Veille à ce que les éléments ayant un rôle ARIA soient dotés de tous les attributs ARIA requis.
aria-required-children Garantit que les éléments ayant un rôle ARIA et nécessitant des rôles enfants les contiennent.
aria-required-parent Garantit que les éléments ayant un rôle ARIA et nécessitant des rôles parents sont contenus par ces derniers.
aria-roledescription S'assurer que aria-roledescription n'est utilisé que pour les éléments ayant un rôle implicite ou explicite
aria-roles Veille à ce que tous les éléments dotés d'un attribut role utilisent une valeur valide
aria-toggle-field-name Veille à ce que chaque champ à bascule ARIA ait un nom accessible
aria-tooltip-name Veille à ce que chaque nœud d'infobulle ARIA ait un nom accessible
aria-valid-attr-value Veille à ce que tous les attributs ARIA aient des valeurs valides
aria-valid-attr Assure que les attributs commençant par aria- sont des attributs ARIA valides.
contraste de couleur Veille à ce que le contraste entre les couleurs d'avant-plan et d'arrière-plan soit conforme aux seuils minimaux des WCAG 2 AA en matière de rapport de contraste.
type de contenu Veille à ce que le "meta content-type" et le jeu de caractères soient définis
liste de définitions
Veille à ce que les éléments <dl> soient structurés correctement.
dlitem
Assure que les éléments <dt> et <dd> sont contenus dans un <dl>
titre du document

Veille à ce que chaque document HTML contienne un élément non vide <title>
duplicate-id Veille à ce que chaque valeur de l'attribut id soit unique
en-tête vide Veiller à ce que les titres aient un texte discernable
rubrique-ordre Veille à ce que l'ordre des rubriques soit sémantiquement correct
html-has-lang Veille à ce que chaque document HTML ait un attribut lang
html-lang-valid Vérifie que l'attribut lang de l'élément <html> a une valeur valide.
html-xml-lang-mismatch Veiller à ce que les éléments HTML dotés des attributs lang et xml:lang valides s'accordent sur la langue de base de la page.
image-alt Veille à ce que les éléments <img> aient un texte de remplacement ou un rôle de type "none" ou "presentation".
image-redondant-alt Veiller à ce que l'image alternative ne soit pas répétée dans le texte
justification Veille à ce que le contenu du corps ne soit pas centré
repère - pas de duplication - principal Veille à ce que le document ait au plus un point de repère principal
unique en son genre Les points d'intérêt doivent avoir un rôle unique ou une combinaison rôle/étiquette/titre (c'est-à-dire un nom accessible).
nom du lien Veiller à ce que les liens aient un texte perceptible
liste Veille à ce que les listes soient structurées correctement
élément de liste

Veille à ce que les éléments <li> soient utilisés de manière sémantique
meta-viewport-large Garantit que <meta name="viewport"> peut s'adapter de manière significative.
meta-viewport Assure que <meta name="viewport"> ne désactive pas la mise à l'échelle et l'agrandissement du texte.
objet-alt Veille à ce que les éléments de l'objet <> soient accompagnés d'un texte de remplacement.
page-has-heading-one Veiller à ce que la page, ou au moins l'un de ses cadres, contienne un titre de niveau 1.
présentation - conflit de rôles Signale les éléments dont le rôle est aucun ou présentation et qui entraînent le déclenchement de la résolution des conflits de rôle.
role-img-alt Assure que les éléments [role='img'] ont un texte alternatif
tabindex Veille à ce que les valeurs de l'attribut tabindex ne soient pas supérieures à 0
rôles de table Veiller à ce que les rôles des tables soient définis
svg-img-alt Veille à ce que les éléments <svg> ayant un rôle img, graphics-document ou graphics-symbol aient un texte accessible.
langue valide S'assurer que les attributs lang ont des valeurs valides

Aide & Support

Si vous avez des questions ou si vous avez besoin d'aide, vous pouvez toujours contacter notre équipe de service.