Accessible Forms

Forms are some of the most important interactive elements on websites. Just as scribes in Ancient Egypt had to fill out precise papyrus documents, so users must be guided through forms in a clear and intuitive way - especially those who use assistive technologies.

Labels

Every form field must have an associated label. This is the absolute foundation of form accessibility.

Explicit Association

1<!-- Best method - for/id -->
2<label for="name">Full name:</label>
3<input type="text" id="name" name="name">
4
5<!-- Screen reader will say: "Full name, text field" -->

Implicit Association

1<!-- Input inside label -->
2<label>
3    Email address:
4    <input type="email" name="email">
5</label>

What NEVER to Do

1<!-- BAD - no label -->
2<input type="text" placeholder="Enter name">
3<!-- Placeholder DISAPPEARS after typing and is NOT a label! -->
4
5<!-- BAD - text next to it but not associated -->
6<span>Name:</span>
7<input type="text">
8<!-- Reader does not know that "Name:" is the label for this field -->

Fieldset and Legend

Group related fields using

<fieldset>

and

<legend>

:

1<fieldset>
2    <legend>Personal Information</legend>
3
4    <label for="first-name">First name:</label>
5    <input type="text" id="first-name" name="firstName">
6
7    <label for="last-name">Last name:</label>
8    <input type="text" id="last-name" name="lastName">
9</fieldset>
10
11<fieldset>
12    <legend>Choose an exhibition:</legend>
13
14    <label>
15        <input type="radio" name="exhibition" value="pharaohs">
16        Treasures of the Pharaohs
17    </label>
18
19    <label>
20        <input type="radio" name="exhibition" value="mummies">
21        Royal Mummies
22    </label>
23
24    <label>
25        <input type="radio" name="exhibition" value="jewelry">
26        Ancient Egyptian Jewelry
27    </label>
28</fieldset>

<fieldset>

is especially important for groups of radio buttons and checkboxes - without it, the reader does not know the context of the question.

Error Messages

Error handling must be accessible - the user must know that an error occurred and how to fix it.

Inline Errors

1<div class="form-group">
2    <label for="email">Email address (required):</label>
3    <input type="email" id="email" name="email"
4           aria-required="true"
5           aria-invalid="true"
6           aria-describedby="email-error">
7    <p id="email-error" class="error" role="alert">
8        Please enter a valid email address, e.g., john@example.com
9    </p>
10</div>

Error Summary

1<div role="alert" aria-labelledby="error-summary-title">
2    <h2 id="error-summary-title">
3        The form contains 2 errors:
4    </h2>
5    <ul>
6        <li>
7            <a href="#email">Email field - enter a valid address</a>
8        </li>
9        <li>
10            <a href="#phone">Phone field - minimum 9 digits required</a>
11        </li>
12    </ul>
13</div>

Hints and Instructions

1<label for="password">Password:</label>
2<input type="password" id="password" name="password"
3       aria-describedby="password-requirements">
4<div id="password-requirements">
5    <p>Password must contain:</p>
6    <ul>
7        <li>At least 8 characters</li>
8        <li>An uppercase letter</li>
9        <li>A number</li>
10        <li>A special character</li>
11    </ul>
12</div>

Autocomplete

The

autocomplete

attribute helps browsers and assistive technologies automatically fill in the form:

1<form>
2    <label for="full-name">Full name:</label>
3    <input type="text" id="full-name" name="name"
4           autocomplete="name">
5
6    <label for="user-email">Email:</label>
7    <input type="email" id="user-email" name="email"
8           autocomplete="email">
9
10    <label for="user-tel">Phone:</label>
11    <input type="tel" id="user-tel" name="phone"
12           autocomplete="tel">
13</form>

Complete Form Example

1<form aria-labelledby="form-title" novalidate>
2    <h2 id="form-title">Book a Museum Visit</h2>
3
4    <fieldset>
5        <legend>Personal Information</legend>
6
7        <div class="form-group">
8            <label for="visitor-name">Full name:</label>
9            <input type="text" id="visitor-name"
10                   autocomplete="name"
11                   aria-required="true">
12        </div>
13
14        <div class="form-group">
15            <label for="visitor-email">Email:</label>
16            <input type="email" id="visitor-email"
17                   autocomplete="email"
18                   aria-required="true"
19                   aria-describedby="email-hint">
20            <p id="email-hint" class="hint">
21                We will send the confirmation to this address.
22            </p>
23        </div>
24    </fieldset>
25
26    <fieldset>
27        <legend>Visit Details</legend>
28
29        <div class="form-group">
30            <label for="visit-date">Visit date:</label>
31            <input type="date" id="visit-date"
32                   aria-required="true">
33        </div>
34
35        <div class="form-group">
36            <label for="visitors-count">Number of people:</label>
37            <input type="number" id="visitors-count"
38                   min="1" max="20" value="1">
39        </div>
40    </fieldset>
41
42    <button type="submit">Book a visit</button>
43</form>

Accessible forms are like a well-designed papyrus document - clear instructions, readable fields, and immediate feedback help every user successfully complete the form.