先生と生徒の会話形式で理解しよう

生徒

「Reactでフォームを作るとき、アクセシビリティって意識した方がいいんですか？」

先生

「はい、とても大切です。アクセシビリティは、誰でも使いやすい画面を作るための考え方です。」

生徒

「パソコンが苦手な人にも関係ありますか？」

先生

「もちろんです。フォーム入力を間違えにくくしたり、迷わず操作できるようにする工夫につながります。」

1. フォーム処理とアクセシビリティとは？

フォーム処理とは、名前やメールアドレスなどを入力して送信する仕組みのことです。アクセシビリティとは、年齢や障がいの有無、パソコン操作の得意不得意に関係なく、誰でも同じように使えるようにする考え方です。たとえば、説明書がはっきり書いてある自動販売機は、初めて使う人でも安心できます。 Reactのフォームでも同じように、わかりやすさが大切です。

2. Reactでフォームを作る基本の考え方

Reactでは、入力された文字を「状態」という形で管理します。状態とは、画面の今の情報を覚えておく箱のようなものです。フォームと状態をつなげることで、入力内容を正しく扱えるようになります。この基本を理解することが、アクセシビリティ向上の第一歩です。


import React, { useState } from "react";

function FormSample() {
  const [name, setName] = useState("");

  return (
    <form>
      <label>
        名前：
        <input
          type="text"
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
      </label>
    </form>
  );
}

export default FormSample;

（名前を入力すると、その内容がReactの状態として保存されます）

3. labelを正しく使うと何が良いのか

labelは入力欄の説明文です。これは、紙の申込書で「ここに名前を書く」と書いてあるのと同じ役割です。 labelを使うことで、画面読み上げ機能を使う人にも内容が伝わりやすくなります。 ReactでもHTMLと同じようにlabelを使うことが重要です。


function EmailForm() {
  return (
    <form>
      <label htmlFor="email">メールアドレス</label>
      <input id="email" type="email" />
    </form>
  );
}

（「メールアドレス」という説明と入力欄が正しく結びつきます）

4. エラー表示とアクセシビリティの関係

フォームでよくあるのが、入力ミスです。アクセシビリティを意識すると、エラー内容をわかりやすく伝えることができます。たとえば、赤い文字だけでなく、文章でも理由を書くと親切です。これは、先生がテストでどこを間違えたか教えてくれるのと同じです。


function ErrorSample() {
  const [error, setError] = useState("");

  const handleSubmit = () => {
    setError("名前を入力してください");
  };

  return (
    <div>
      <button onClick={handleSubmit}>送信</button>
      {error && <p role="alert">{error}</p>}
    </div>
  );
}

（エラーが発生すると、画面に理由が表示されます）

5. キーボード操作を意識したフォーム作り

マウスを使わず、キーボードだけで操作する人もいます。 Tabキーで移動できるフォームは、階段に手すりがあるような安心感があります。 Reactのフォームでも、自然な順番で入力できるように配置することが大切です。

6. aria属性で伝わりやすくする工夫

aria属性とは、画面の情報を補足するための目印です。文字だけでは伝わりにくい内容を、機械にもわかる形で説明します。難しく感じますが、「ここは大事だよ」と付箋を貼るイメージで大丈夫です。


function AriaSample() {
  return (
    <input
      type="text"
      aria-label="ユーザー名入力欄"
    />
  );
}

（入力欄の目的が、より正確に伝わります）

7. アクセシブルなフォームは利用者の安心につながる

アクセシビリティを意識したフォームは、特別な人のためだけではありません。初めて使う人、操作に不安がある人、誰にとっても使いやすくなります。 Reactでフォーム処理を学ぶときは、動くだけでなく、「やさしい画面かどうか」を考えることが大切です。

Reactのフォーム処理とアクセシビリティをやさしく解説！初心者でも安心して学べるReact入門