Six isolated before-and-after exercises
Use fictional text only. Both sides process locally and cannot send messages. The left intentionally demonstrates a defect; the right repairs that specific behavior. This is not an accessibility certification.
A placeholder is not a label
Problem: The field has no persistent programmatic label. Repair: Associate a visible label with its input.
- Tab into the email field.
- Type a fictional address.
- Check whether the field purpose remains visible.
Expected: The repaired field retains a visible associated label after typing.
Focus after a failed submit
Problem: The error appears away from keyboard focus. Repair: Focus the first invalid field and retain a visible focus indicator.
- Leave email blank.
- Tab to Check example and press Enter.
Expected: The repaired example moves focus to email, where the problem can be corrected.
Keep valid input after an error
Problem: A failed check erases the reader's message. Repair: Keep the entered message while asking for the missing email.
- Type a fictional message but leave email blank.
- Activate Check example.
Expected: The repaired example preserves the message; the broken example resets it.
Explain how to fix the error
Problem: A generic warning offers no corrective instruction. Repair: Use visible actionable text associated with the field and announced as an alert.
- Leave email blank and activate Check example.
- Read the error instruction and inspect its relationship to the field.
Expected: The repaired example asks for an email and sets aria-invalid and aria-describedby.
A browser result is not an inbox receipt
Problem: The example claims a message was sent although it has no delivery service. Repair: Describe exactly what happened: local checks passed; nothing was sent.
- Enter a fictional email and message.
- Activate Check example.
Expected: The repaired status says no message was sent. A real form still needs an inbox receipt test.
An action must work from the keyboard
Problem: A click-only non-focusable text control cannot be reached with Tab. Repair: Use a native button with normal keyboard activation.
- Use Tab without clicking.
- Try to reach and activate Check example.
Expected: The repaired native button is reachable and activates with Enter or Space.
Download the standalone practice kit
Practice one behavior at a time
The gallery pairs six intentionally broken local examples with specific repairs. Follow the keyboard steps and compare the expected observation. Every form is sandboxed; none can send a message. Use fictional text only.
A repaired example demonstrates one behavior. It is not an accessibility certification or proof of inbox delivery. Use the existing receipt recorder on your own real service after structural testing.
Before your next release
Keep visible labels, actionable errors, retained input, native keyboard controls, and predictable focus. Then test the complete browser-to-inbox path with a harmless test ID. Record the received message rather than relying on a success banner.
Sources & verification
Product details and prices can change. Check the linked provider before buying.
- W3C Web Accessibility Initiative: Forms Tutorial Accessed 2026-09-14
Sources link directly to providers. Product buttons may use separately labeled affiliate links. Read our disclosure.