So erstellst du ADA-freundliche Anmeldeformulare

Übersicht

Erfahre, wie du die Funktion des Barrierefreiheitsassistenten im Tab Formularbenachrichtigungen im Editor für Anmeldeformulare verwendest, um einige der häufigsten Probleme bei der Einhaltung der Richtlinien zur Barrierefreiheit von Webinhalten (WCAG) zu vermeiden. Unternehmen, die ihre Websites ADA-konform gestalten möchten, sollten die WCAG-Standards als Referenz heranziehen und befolgen. Der Barrierefreiheitsassistent unterstützt dich dabei, Anmeldeformulare zu erstellen, die für alle Besucher*innen deiner Website zugänglich sind.

Bevor du anfängst

Unten findest du eine Liste der Probleme, nach denen der Assistent für Barrierefreiheit sucht. Bitte beachte, dass die unten aufgeführten Fehlertypen die Art und Weise sind, wie der Assistent für Barrierefreiheit von Klaviyo sie identifiziert, nicht die spezifischen Namen von Eingabefeldern im Formular-Builder. Wenn ein Fehler erkannt wird, wird im Tab Formularbenachrichtigungen eine Warnmeldung mit einer Beschreibung und einer Aufforderung zur Behebung angezeigt.

Ein ADA-freundliches Anmeldeformular erstellen

Ganz gleich, ob du dein erstes Anmeldeformular erstellst oder ein Formular aktualisierst: Der Barrierefreiheitsassistent hilft dir, Barrierefreiheitsprobleme zu erkennen und zu beheben.

So erstellst du ein Formular im Einklang mit den oben aufgeführten WCAG-Standards:

1. Erstelle ein neues Anmeldeformular oder öffne den Formular-Editor für eines deiner bestehenden Anmeldeformulare.
2. Verwende den Editor, um Inhaltsblöcke hinzuzufügen und das Formular zu gestalten, damit es zu deiner Marke passt.
   

1. Klicke unten links auf Formularbenachrichtigungen, um dir die identifizierten Barrierefreiheitsprobleme anzusehen.
   
   Unter Aktive Benachrichtigungen siehst du verschiedene Karten, die die Elemente beschreiben, die die/der Barrierefreiheitsassistent*in in deinem Formular identifiziert hat und die WCAG-Standards nicht erfüllen, zusätzlich zu weiteren identifizierten Inhalts- oder Designproblemen. Jede Karte enthält eine Beschreibung des Problems und eine Aufforderung, es entweder zu beheben oder zu verwerfen. Wenn du zum Beispiel ein Bild zu deinem Anmeldeformular hinzufügst, weist dich der Barrierefreiheitsassistent darauf hin, Alternativtext zum Bild hinzuzufügen. Alternativtext bietet eine Beschreibung des Bildes, damit Shopper*innen, die deine Website mit einem Screenreader durchsuchen, auf die digitalen Inhalte zugreifen können.
   
   

2. Um ein Problem zu beheben, befolge die Vorschläge auf der Karte und behebe es entweder oder füge die fehlenden Elemente hinzu. Wenn du mit deinen Änderungen zufrieden bist, klicke auf Beheben.
   

1. Wenn du einen oder mehrere der Barrierefreiheitsvorschläge ignorieren möchtest, klicke auf Verwerfen. Wenn du ein Problem verwarfst, wird ein modales Fenster angezeigt, in dem du aufgefordert wirst, deine Auswahl abzubrechen oder zu bestätigen.
   
   Sobald du alle identifizierten Probleme erfolgreich behoben oder verworfen hast, wird im Tab Formularwarnungen die Nachricht „Keine aktiven Warnungen“ angezeigt.
   

1. Klicke auf Veröffentlichen, um dein Anmeldeformular mit deinen Barrierefreiheits-Updates auf deiner Website live zu schalten.
   

JAWS-Barrierefreiheitsberichte

Bitte beachte, dass JAWS, ein Bildschirmleserprogramm für Microsoft Windows, möglicherweise keine Anmeldeformulare auf deiner Website erkennt, die in Klaviyo erstellt wurden. Damit Website-Besucher*innen, die JAWS verwenden, weiterhin mit Anmeldeformularen auf deiner Website interagieren können, empfehlen wir, deiner Website ein zusätzliches Code-Snippet hinzuzufügen, das sie für JAWS zugänglicher macht.

Kopiere das folgende Code-Fragment und füge es in die Haupt-Theme-Datei deiner Website ein, damit JAWS deine Klaviyo-Anmeldeformulare erkennt und vorliest:

  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");
      }
    });
  }; 

Nächste Schritte

Es ist wichtig, WCAG-Standards in allen deinen Klaviyo-Anmeldeformularen einzuhalten. Zuvor veröffentlichte Anmeldeformulare können weiterhin Barrierefreiheitsprobleme enthalten, die du beheben musst. Beachte aber, dass Klaviyo WCAG-nicht-konforme Probleme nicht automatisch behebt.

Navigiere im Editor für jedes deiner vorhandenen Formulare zum Tab Formularbenachrichtigungen, um alle Barrierefreiheitsprobleme zu beheben und die WCAG-Konformität auf deiner Website zu unterstützen.

Weitere Ressourcen