+
+ {title}: {result.issues.length === 0 ? "no problems found in " + result.count + " fields" : result.issues.length + " problems in " + result.count + " fields"}
+
+
+ {result.issues.map((text) => (
{text}
))}
+
+
+ ))}
+
+ ) : null}
+
+ );
+}
+
+export function GroupedDemo() {
+ const [value, setValue] = useState("");
+ return (
+
+ );
+}
+
+Think about the last time you filled in a form. You **saw** the labels, **clicked** the box you wanted, **read** the red error message, and **moved** your mouse to the button. Now imagine doing it **without seeing the screen**, or **without using a mouse**, or with a tremor, or while holding a baby in one arm, or in bright sunlight on a small phone.
+
+That is the point of **accessible forms**: forms that work for **everyone**, in every situation. And here is the good news: most of it comes **free** from the HTML elements you have already learned. This lesson pulls it all together into one clear set of habits.
+
+
+
+
+## What You Will Learn
+
+- Why accessible forms matter, and who benefits
+- The seven habits that fix most problems
+- Labels, groups, hints, and required markers
+- Clear errors that everyone can find and fix
+- Keyboard, focus, and touch targets
+- The key WCAG 2.2 rules for forms
+- Easy authentication and less retyping
+- A checklist to test any form
+
+## Why It Matters
+
+Accessible forms help far more people than you might think:
+
+| Who | How accessible forms help |
+| :-- | :-- |
+| Screen reader users | Hear each field's label, hints, and errors |
+| Keyboard-only users (including voice control and switch users) | Reach and operate every field without a mouse |
+| People with low vision | Can zoom in, and see clear focus and good contrast |
+| People with motor difficulties | Have big targets and less typing (autofill) |
+| People with dyslexia or cognitive differences | Get plain words, clear instructions, and forgiving errors |
+| People on phones, in sunlight, or in a hurry | Get the right keyboard, big buttons, and clear messages |
+| Everyone, with a temporary injury or a noisy room | Gets a form that just works |
+
+It is also often a **legal requirement** (many countries reference WCAG, the Web Content Accessibility Guidelines, in their laws), and accessible forms usually have **higher completion rates**, which means more sign-ups and sales.
+
+## The Seven Habits
+
+If you remember only seven things, remember these:
+
+1. **Every field has a visible, connected label.**
+2. **Group related fields** with `fieldset` and `legend`.
+3. **Use the right element and input type.** Native controls first.
+4. **Say what is required, and what format is expected,** before the visitor types.
+5. **Write clear errors,** linked to their fields, and move focus to the first problem.
+6. **Make everything work with a keyboard,** with a clearly visible focus.
+7. **Test it** with a keyboard and a screen reader, not only your eyes.
+
+## Try It: A Tiny Accessibility Audit
+
+Below are two forms that look almost the same. Press the button, and a small script inspects each field, using the same information a screen reader sees: is there a label, and is there an `autocomplete` token?
+
+
+
+
+```html title="index.html"
+
+
+
+
+
+```
+
+```js title="script.js"
+function audit(form) {
+ for (const el of form.elements) {
+ if (!["INPUT", "SELECT", "TEXTAREA"].includes(el.tagName)) continue;
+ if (["hidden", "submit", "button", "reset"].includes(el.type)) continue;
+
+ const hasName =
+ el.labels.length > 0 ||
+ el.getAttribute("aria-label") ||
+ el.getAttribute("aria-labelledby");
+
+ if (!hasName) console.log(el.name + ": no label!");
+ }
+}
+```
+
+
+
+
+
+<>
+
+
+
+
+
+
+
+Form A has placeholders only. Sighted visitors can read them, but the moment they start typing, the hint vanishes, and screen readers may not announce a placeholder as a name at all. This tiny check catches only a small slice of problems, but it shows the key idea: **accessibility is built into the markup.**
+
+## 1. Labels: the Foundation
+
+Every field needs a **visible** `