ADA に配慮したサインアップフォームの作成方法

このページで学べること

サインアップフォームエディタの フォームアラート タブにあるアクセシビリティ アシスタント機能の使用方法を学び、ウェブコンテンツ アクセシビリティ ガイドライン（WCAG）のコンプライアンスでよくある問題の一部を回避しましょう。ウェブサイトを ADA 対応にしようとしている企業は、WCAG 標準を参照して遵守する必要があります。アクセシビリティ アシスタントは、サイト訪問者全員がアクセス可能なサインアップフォームの作成をガイドします。

始める前に

以下は、アクセシビリティ アシスタントがチェックする問題のリストです。以下に示すエラータイプは、Klaviyo のアクセシビリティ アシスタントが識別する方法であり、フォームビルダー内の特定の入力フィールド名ではありませんのでご注意ください。エラーが検出された場合、説明と修正プロンプトを含むアラートが フォームアラート タブに表示されます。

ADA に対応したサインアップフォームを作成する

最初のサインアップフォームを作成する場合でも、フォームを更新する場合でも、アクセシビリティ アシスタントを使用すると、アクセシビリティの問題を特定して修正できます。

上記の WCAG 標準に沿ったフォームを作成するには：

1. 新しいサインアップフォームを作成するか、既存のサインアップフォームのいずれかのフォームエディタを開きます。
2. エディターを使用して コンテンツ ブロックを追加し、フォームのスタイルを設定してブランドに合わせます。
   

1. 左下の [フォームアラート] をクリックして、特定されたアクセシビリティの問題を確認してください。
   
   アクティブなアラートの下に、アクセシビリティ アシスタントがフォーム内で特定した WCAG 標準を満たしていない要素を説明するさまざまなカードが、特定されたその他のコンテンツまたはデザイン上の問題とともに表示されます。各カードには、問題の説明と、修正または却下を行うためのプロンプトが含まれます。たとえば、サインアップフォームに画像を追加した場合、アクセシビリティ アシスタントによって、その画像に代替テキストを追加するようアラートが表示されます。代替テキストは画像の説明を提供するため、スクリーン リーダーでサイトを閲覧している買い物客もデジタルコンテンツにアクセスできます。
   
   

2. 問題を修正するには、カードの提案に従い、不足している要素を解決するか追加してください。変更内容に問題がなければ、[修正]。
   をクリックします。

1. アクセシビリティに関する提案を 1 つ以上無視したい場合は、[却下] をクリックします。問題を却下するとモーダルが表示され、選択をキャンセルするか確認するかを尋ねられます。
   
   特定された問題をすべて正常に修正または却下すると、Form alerts タブに “No active alerts” メッセージが表示されます。
   

1. アクセシビリティの更新内容を反映して、サイトでサインアップフォームを公開するには、[公開] をクリックしてください。
   

JAWS アクセシビリティ レポート

Microsoft Windows 用のコンピュータ スクリーン リーダー プログラムである JAWS が、Klaviyo で作成されたウェブサイト上のサインアップフォームを検出できない可能性がある点にご注意ください。JAWS を使用しているサイト訪問者がウェブサイト上のサインアップフォームを引き続き操作できるようにするために、JAWS にとってアクセシブルになる追加のコード スニペットをサイトに追加することをおすすめします。

次のコードスニペットをコピーしてサイトのメイン テーマ ファイルに貼り付けると、JAWS が 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");
      }
    });
  }; 

次の手順

すべての Klaviyo サインアップフォームで WCAG 標準を維持することが重要です。以前に公開されたサインアップフォームには、修正すべきアクセシビリティの問題が残っている場合がありますが、Klaviyo は WCAG 非準拠の問題を自動的に修正しない点にご注意ください。

ウェブサイトの WCAG コンプライアンスに向けてアクセシビリティの問題を解決できるよう、既存の各フォームのエディター内にある フォーム アラート タブに移動します。

その他のリソース