Jak tworzyć formularze rejestracyjne zgodne z ADA

Czego się dowiesz?

Dowiedz się, jak korzystać z funkcji asystenta dostępności na karcie Alerty formularza w edytorze formularzy rejestracyjnych, aby uniknąć niektórych z najczęstszych problemów ze zgodnością z przepisami WCAG dotyczącymi dostępności treści internetowych. Firmy dążące do tego, aby ich witryny były zgodne z ADA, powinny odwoływać się do standardów WCAG i postępować zgodnie z nimi. Asystent dostępności pomaga w tworzeniu formularzy rejestracyjnych dostępnych dla wszystkich odwiedzających witrynę.

Kilka słów na początek

Poniżej znajduje się lista problemów, które asystent ułatwień dostępu sprawdzi. Pamiętaj, że wymienione poniżej typy błędów to sposób, w jaki asystent ułatwień dostępu Klaviyo je identyfikuje, a nie konkretne nazwy pól wejściowych w kreatorze formularzy. Jeśli zostanie wykryty błąd, w karcie Alerty formularza pojawi się alert z opisem i prośbą o poprawkę.

Utwórz formularz rejestracyjny zgodny z ADA

Niezależnie od tego, czy tworzysz swój pierwszy formularz rejestracyjny, czy aktualizujesz formularz, asystent ułatwień dostępu pomaga identyfikować i naprawiać problemy z ułatwieniami dostępu.

Aby utworzyć formularz zgodny ze standardami WCAG wymienionymi powyżej:

1. Utwórz nowy formularz rejestracyjny lub otwórz edytor formularza dla jednego z istniejących formularzy rejestracyjnych.
2. Użyj edytora, aby dodać bloki treści i nadać formularzowi styl tak, aby pasował do Twojej marki.
   

1. Kliknij Alerty formularza w lewym dolnym rogu, aby zobaczyć zidentyfikowane problemy z dostępnością.
   
   W sekcji Aktywne alerty zobaczysz różne karty opisujące elementy, które nie spełniają standardów WCAG zidentyfikowane przez asystenta dostępności w formularzu, a także inne wykryte problemy z treścią lub projektem. Każda karta zawiera opis problemu oraz monit o jego naprawienie lub odrzucenie. Na przykład jeśli dodasz obraz do formularza rejestracyjnego, asystent dostępności powiadomi o konieczności dodania do obrazu tekstu alt. Tekst alt zawiera opis obrazu, dzięki czemu kupujący przeglądający witrynę za pomocą czytnika ekranu mogą uzyskać dostęp do treści cyfrowych.
   
   

2. Aby naprawić problem, postępuj zgodnie z sugestiami na karcie i rozwiąż go lub dodaj brakujące elementy. Gdy zmiany będą satysfakcjonujące, kliknij Napraw.
   

1. Jeśli chcesz zignorować jedną lub więcej sugestii dotyczących dostępności, kliknij Odrzuć. Odrzucenie problemu spowoduje wyświetlenie okna modalnego z prośbą o anulowanie lub potwierdzenie wyboru.
   
   Gdy uda się naprawić lub odrzucić wszystkie zidentyfikowane problemy, na karcie Alerty formularza zobaczysz komunikat „Brak aktywnych alertów”.
   

1. Kliknij Opublikuj, aby udostępnić formularz rejestracyjny w witrynie wraz z aktualizacjami dotyczącymi dostępności.
   

Raporty dostępności JAWS

Pamiętaj, że JAWS, program czytnika ekranu dla systemu Microsoft Windows, może nie wykrywać formularzy rejestracyjnych na Twojej stronie internetowej utworzonych w Klaviyo. Aby zapewnić, że osoby odwiedzające stronę korzystające z JAWS nadal mogą korzystać z formularzy rejestracyjnych na Twojej stronie internetowej, sugerujemy dodanie do strony dodatkowego fragmentu kodu, który uczyni ją bardziej dostępną dla JAWS.

Skopiuj poniższy wycinek kodu źródłowego i wklej go do głównego pliku motywu witryny, aby JAWS wykrył i odczytał formularze rejestracyjne 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");
      }
    });
  }; 

Kolejne kroki

Ważne jest utrzymanie standardów WCAG we wszystkich formularzach rejestracyjnych Klaviyo. Wcześniej opublikowane formularze rejestracyjne mogą nadal zawierać problemy z dostępnością, które trzeba naprawić, ale pamiętaj, że Klaviyo nie naprawi automatycznie żadnych problemów niezgodnych z WCAG.

Przejdź do karty Alerty formularza w edytorze każdego z istniejących formularzy, aby rozwiązać wszelkie problemy z dostępnością i ułatwić zgodność z przepisami WCAG w witrynie.