Comment créer des formulaires d’inscription compatibles avec l’ADA

Objectif de cet article

Découvrez comment utiliser la fonctionnalité d’assistant d’accessibilité dans l’onglet Alertes de formulaire de l’éditeur de formulaire d’inscription afin d’éviter certains des problèmes de conformité aux directives d’accessibilité des contenus Web (WCAG) les plus courants. Les entreprises qui cherchent à rendre leurs sites Web conformes à l’ADA doivent se référer aux normes WCAG et les respecter. L’assistant d’accessibilité vous guide dans la création de formulaires d’inscription accessibles pour l’ensemble des visiteurs de votre site.

Avant de commencer

Vous trouverez ci-dessous une liste des problèmes que l’assistant d’accessibilité vérifiera. Veuillez noter que les types d’erreurs répertoriés ci-dessous correspondent à la façon dont l’assistant d’accessibilité de Klaviyo les identifie, et non à des noms spécifiques de champs de saisie dans le générateur de formulaires. Si une erreur est détectée, une alerte contenant une description et une invite de correction s’affichera dans l’onglet Alertes de formulaire.

Créer un formulaire d’inscription adapté à l’ADA

Que vous créiez votre premier formulaire d’inscription ou que vous mettiez à jour un formulaire, l’assistant d’accessibilité vous aide à identifier et à corriger les problèmes d’accessibilité.

Pour créer un formulaire conforme aux normes WCAG listées ci-dessus :

1. Créez un nouveau formulaire d’inscription ou ouvrez l’éditeur de formulaire pour l’un de vos formulaires d’inscription existants.
2. Utilisez l’éditeur pour ajouter des blocs de contenu et mettre en forme le formulaire afin qu’il corresponde à votre marque.
   

1. Cliquez sur Alertes du formulaire en bas à gauche pour voir les problèmes d’accessibilité identifiés.
   
   Sous Alertes actives, vous verrez différentes cartes décrivant les éléments qui ne répondent pas aux normes WCAG que l’assistant d’accessibilité a identifiés dans votre formulaire, en plus d’autres problèmes de contenu ou de conception identifiés. Chaque carte inclura une description du problème ainsi qu’une invite pour le corriger ou l’ignorer. Par exemple, si vous ajoutez une image à votre formulaire d’inscription, l’assistant d’accessibilité vous avertira d’ajouter un texte alternatif à l’image. Le texte alternatif fournit une description de l’image afin que les acheteurs qui naviguent sur votre site avec un lecteur d’écran puissent accéder au contenu numérique.
   
   

2. Pour résoudre un problème, suivez les suggestions sur la carte et résolvez-le ou ajoutez les éléments manquants. Une fois que vous êtes satisfait de vos modifications, cliquez sur Corriger.
   

1. Si vous souhaitez ignorer une ou plusieurs suggestions d’accessibilité, cliquez sur Ignorer. L’ignorance d’un problème déclenchera l’affichage d’une fenêtre modale, vous demandant d’annuler ou de confirmer votre choix.
   
   Une fois que vous avez réussi à corriger ou à ignorer tous les problèmes identifiés, vous verrez un message « Aucune alerte active » affiché dans l’onglet Alertes de formulaire.
   

1. Cliquez sur Publier pour mettre votre formulaire d’inscription en ligne sur votre site avec vos mises à jour d’accessibilité.
   

Rapports d’accessibilité JAWS

Veuillez noter que JAWS, un programme de lecteur d’écran pour ordinateur sous Microsoft Windows, ne détecte peut-être pas les formulaire d’inscription sur votre site web qui ont été créés dans Klaviyo. Pour vous assurer que les visiteurs de votre site qui utilisent JAWS puissent toujours interagir avec les formulaire d’inscription sur votre site web, nous vous suggérons d’ajouter à votre site un extrait de code supplémentaire qui le rend plus accessible à JAWS.

Copiez l’extrait de code suivant et collez-le dans le fichier principal du thème de votre site afin que JAWS détecte et lise vos formulaires d’inscription Klaviyo :

  const isAriaHiddenTrue = ($el) => {
    const ariaHiddenValue = $el ? $el.getAttribute("aria-hidden") : null;
    return ariaHiddenValue === "true";
  };

  const isHTMLElement = (node) => {
    return node.nodeType === Node.ELEMENT_NODE;
  };

  const isModal = (node) => {
    if (node.children.length !== 1) return false;
    const modalContainer = Array.from(node.children[0].classList).some((cls) =>
      cls.startsWith("kl-private-reset")
    );

    return modalContainer;
  };

  const getTopLevelDomElements = () => {
    const body = document.body;

    // Use the children property to get all top-level elements
    const topLevelNodes = Array.from(body.children).filter((node) => {
      if (isHTMLElement(node)) {
        const tagName = node.tagName.toLowerCase();

        console.log("isModal: ", isModal);

        // Filter out specific tags
        return (
          tagName !== "script" &&
          tagName !== "link" &&
          tagName !== "iframe" &&
          tagName !== "style" &&
          !isModal(node)
        );
      }
      return false;
    });

    return topLevelNodes;
  };

  const a11yHideTopLevelElements = () => {
    const $elements = getTopLevelDomElements();

    $elements.forEach(($el) => {
      if (!isAriaHiddenTrue($el)) {
        $el.setAttribute("kl-aria-hidden", "true");
        $el.setAttribute("aria-hidden", "true");
      }
    });
  };

  const a11yShowTopLevelElements = () => {
    const $elements = getTopLevelDomElements();

    $elements.forEach(($el) => {
      if ($el.hasAttribute("kl-aria-hidden")) {
        $el.removeAttribute("kl-aria-hidden");
        $el.removeAttribute("aria-hidden");
      }
    });
  }; 

Prochaines étapes

Il est important de maintenir les normes WCAG sur l’ensemble de vos formulaires d’inscription Klaviyo. Les formulaires d’inscription publiés précédemment peuvent encore contenir des problèmes d’accessibilité que vous devrez corriger, mais notez que Klaviyo ne corrigera pas automatiquement les problèmes non conformes aux WCAG.

Accédez à l’onglet Alertes de formulaire dans l’éditeur de chacun de vos formulaires existants pour résoudre tout problème d’accessibilité et faciliter la conformité WCAG sur votre site web.

Ressources supplémentaires