11. フォームとアクセシビリティ

この章では、フォームとアクセシビリティの基本を学びます。

お問い合わせフォームや資料請求フォームは、Web制作でよく作るパーツです。

フォームは見た目だけでなく、入力しやすさ、エラーのわかりやすさ、キーボード操作、読み上げへの配慮が大切です。

フォームの基本構造

フォームにはform、label、input、textarea、buttonなどを使います。

<form action="/contact/" method="post">
    <div class="form-field">
        <label for="name">お名前</label>
        <input type="text" id="name" name="name">
    </div>

    <div class="form-field">
        <label for="message">お問い合わせ内容</label>
        <textarea id="message" name="message"></textarea>
    </div>

    <button type="submit">送信する</button>
</form>

labelのforと、入力欄のidを同じにすると、ラベルと入力欄が紐づきます。

ラベルをクリックした時に入力欄へフォーカスできるようになります。

labelは省略しない

フォームでは、labelを省略しないことが大切です。

プレースホルダーだけで項目名を表す書き方は避けます。

<input type="text" name="name" placeholder="お名前">

プレースホルダーは、入力すると消えます。

入力中に何の項目だったか確認しづらくなることがあります。

次のように、labelを用意します。

<label for="name">お名前</label>
<input type="text" id="name" name="name" placeholder="山田 太郎">

プレースホルダーは、入力例や補足として使います。

入力欄の種類

inputには、用途に応じたtypeがあります。

メールアドレスにはtype="email"を使います。

<label for="email">メールアドレス</label>
<input type="email" id="email" name="email">

スマホでは、入力タイプに合わせたキーボードが出ることがあります。

正しいtypeを使うと、入力しやすくなります。

必須項目

必須項目には、requiredを付けることがあります。

<label for="email">メールアドレス <span>必須</span></label>
<input type="email" id="email" name="email" required>

ただし、requiredだけに頼らず、画面上でも必須であることがわかるようにします。

視覚的に「必須」と表示するだけでなく、読み上げでも伝わるようにすることが大切です。

textarea

長い文章を入力する場合は、textareaを使います。

<label for="message">お問い合わせ内容</label>
<textarea id="message" name="message" rows="6"></textarea>

rowsで初期の高さを指定できます。

CSSで高さを調整することもありますが、入力内容が見やすい高さにします。

select

選択肢から選ばせる場合は、selectを使います。

<label for="service">ご相談内容</label>
<select id="service" name="service">
    <option value="">選択してください</option>
    <option value="website">Webサイト制作</option>
    <option value="renewal">リニューアル</option>
    <option value="support">更新サポート</option>
</select>

選択肢が多すぎる場合は、別のUIを検討することもあります。

まずは、標準のフォーム部品を正しく使うことが大切です。

buttonと送信

フォームの送信にはbuttonを使います。

<button type="submit">送信する</button>

フォーム内のbuttonは、typeを書かないと送信ボタンとして扱われることがあります。

送信ではないボタンには、type="button"を指定します。

<button type="button">入力内容をクリア</button>

意図しない送信を防ぐために、buttonのtypeは明示すると安心です。

フォームのCSS

フォームは、入力欄の幅、余白、フォーカス表示を整えます。

.form-field {
    display: grid;
    gap: 8px;
    margin-bottom: 24px;
}

input,
textarea,
select {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font: inherit;
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 3px solid #ffbf47;
    outline-offset: 2px;
}

font: inherit;を指定すると、フォーム部品にもページのフォント設定を引き継げます。

フォーカス表示は消さず、見やすく整えます。

アクセシビリティの基本

アクセシビリティとは、さまざまな人が情報や機能を利用できるようにする考え方です。

Web制作では、次のような点を意識します。

• 見出し構造が自然か
• リンクテキストだけで行き先がわかるか
• フォームにラベルがあるか
• キーボードだけで操作できるか
• 色だけで情報を伝えていないか
• 文字と背景のコントラストが十分か
• 画像に適切な代替テキストがあるか

完璧を目指す前に、基本を外さないことが重要です。

キーボード操作

マウスを使わず、キーボードだけで操作する人もいます。

Tabキーでリンクやボタン、入力欄に移動できるか確認します。

フォーカスがどこにあるかわからないと、操作が難しくなります。

CSSでoutline: none;を指定してフォーカス表示を消すのは避けます。

button:focus {
    outline: none;
}

消すのではなく、見やすい形に整えます。

色だけに頼らない

エラーや重要な情報を、色だけで伝えるのは避けます。

たとえば、入力エラーを赤枠だけで示すと、色の違いがわかりにくい人には伝わりづらくなります。

<label for="email">メールアドレス</label>
<input type="email" id="email" name="email" aria-describedby="email-error">
<p id="email-error">メールアドレスを入力してください。</p>

色に加えて、テキストでも何が起きているか伝えます。

この章のまとめ

• フォームではlabelと入力欄を正しく紐づける
• プレースホルダーだけで項目名を表すのは避ける
• 入力内容に合ったtypeを使う
• フォーム内のbuttonにはtypeを明示する
• アクセシビリティでは、見出し、リンク、フォーム、キーボード操作、色の使い方を確認する