アクセス可能なフォームの構築

9月14日In The Pocket signed the Digital Inclusion Charter デジタル排除と戦う我々のコミットメントを強調する.この投稿でフォームフォームの取り扱いについて説明します.
この例ではGitHub , ユーザーは、フォームを送信するときにリミックスで検証される自分の名前とメールアドレスを入力することができます.形の2つの州があります.最初の1つはバリデーションエラーが発生した場合、2番目はユーザが正常にフォームを送信したときに表示され、消されるトーストメッセージです.
まず、デモを見たいですか?
ちょっとこれに向かうStackBlitz アプリケーションは、ヘッダーの「新しいウインドウで開く」をクリックして、VoiceOverを可能にします.

ネイティブブラウザの動作

私が特に反応/リミックスに向けてコーディングを始める前に、私は最初にネイティブのブラウザー合法化がふるまう方法を見ました.上記のスクリーンショットを見てみると、ブラウザが1つずつ入力フィールドを検証することに気がつきます.特定の入力フィールドにエラーがある場合、その入力フィールドがフォーカスされ、アンスタイルの(そしてかなり醜い)ブラウザのポップオーバーがエラーメッセージで表示されることを意味します.
これは重要なことです.なぜなら、何かカスタムを作りたいときには、ネイティブブラウザの振る舞いを我々の勇敢さの基礎として取るべきです.ユーザーは一定のUIを一貫していると予想します.

カスタム検証

私たちは常に素晴らしいUIとUXに向けて努力しているので、次のような改良を実装することにしました.

フォームの送信時にフォーム全体を検証します.

入力の下にスタイルエラーメッセージのすべての検証エラーを表示します.

検証エラーがない場合は、「成功メッセージ」を表示します.

フォーム全体の検証は、リミックスのアクション関数とYUPのおかげで簡単に行われます.私がしなければならなかったのは、検証スキーマに基づいてフォームデータを検証し、各エラーを返す関数を作成することでした.特定のコードはここには存在しません.なぜなら、それがポストを滲むので、再び別のインセンティブをGitHub repo 😊.
スタイルエラーメッセージの検証エラーを表示するには、各入力要素のスパン要素を作成し、エラーメッセージをバインドしました.これは、この美しい検証形式で私たちを残します.

アクセシビリティ

美しいUIを持っているので、カスタムバリデーションのおかげで、ネイティブブラウザの動作の最良の機能を実装して、UXを改善しましょう.
アフター・リーディングWeb Accessible Initiative フォームについてのチュートリアル我々はフォームを使用してアクセスできるフォームを作ることができます
次のコード

const Index = () => {
  const { toastRef, showToast } = useToast();
  const actionData = useActionData();
  const { formRef } = useAccessibleForm({
    hasErrors: actionData?.hasErrors,
    errors: actionData?.errors,
    showToast,
  });

  return (
    <main>
      <Toast role="alert" aria-live="polite" />
      <Form method="post" aria-label="Personal information form" noValidate>
        <div className="form-group">
          <label htmlFor="first-name">First name</label>
          <input
            type="text"
            id="first-name"
            name="firstName"
            aria-required
            aria-describedby="first-name-error"
          />
          <span id="first-name-error" aria-hidden>
            {actionData?.errors?.firstName}
          </span>
        </div>
      </Form>
    </main>
  );
};

このフォームをアクセスできるようにする3つのことがあります.
まず、アラートの役割とアリアライブ属性を持ってトーストコンポーネント.警告の役割は、重要な、通常時に敏感なメッセージをユーザーに伝えるのに使用されます.フォームの検証として見ることは非常に重要です、この属性は完全に収まる!しかし、the docs 状態、Ariveの役割はまた、“Assertive”の値でアリアのライブを設定します.これを防ぐために、アリアライブ属性を「丁寧」に設定しました.
第2に、フォームがエラーを含むときuseAccessibleForm() フックウィル

すべてのエラーを生成する

人間に読めるエラーメッセージを作成します.

呼び出しshowToast() このエラーメッセージを持つ関数.

入力フィールドの下にエラーメッセージが表示されるので、トーストを表示する必要はありません.しかし、ARIAのライブ属性のおかげで、スクリーンリーダーはまだこれを読んでください.
最後に、一緒にすべてをもたらすために、我々はスクリーンリーダースペースのためにエラーメッセージを隠しています.入力フィールドとエラーメッセージとの関係を追加するには、ARIA記述ビット属性を使用して、エラーメッセージをユーザーが
入力フィールド.
あなたが見ることができるように:少しの努力で、我々はスクリーンリーダーを使用して人々のためのウェブ良い場所を作ることができた.アクセシビリティを改善するためにできることはたくさんありますし、通常、それは私たちの考え方になります.私はこれが有用であり、あなたはおそらく将来的にいくつかを参照してくださいよ!
Original blogpost
GitHub repo