Build an accessible lead capture form with native HTML controls, visible labels, clear instructions, and useful error messages. Use ARIA only to add relationships or states that HTML does not already provide, and validate submitted data on the server as well as in the browser.
Start with the information you actually need
Ask only for details needed to complete the stated process. W3C’s Forms Tutorial cautions that irrelevant or excessive requests can make users more likely to abandon a form: WAI Forms Tutorial. If a less-obvious detail is necessary, explain why you are asking for it.
Label every control visibly
Give every text input, checkbox, radio button, select, and other control a meaningful label. In most cases, use a visible <label> and explicitly connect it to the control: the label’s for value must match the control’s id.
<label for="email">Email address</label>
<input id="email" name="email" type="email" autocomplete="email" required>A visible label helps people understand the form and makes its associated click target larger. aria-label and aria-labelledby can provide a programmatic name in specific situations, but they do not show that label text to sighted users. Do not use them as a substitute for a visible label when one is appropriate. See WAI’s guidance on labeling controls.
#1 Best Overall
Explain requirements and formats before entry
Put general directions before the form. Place field-specific instructions near the relevant label, or connect supplementary help with aria-describedby. For example, explain what happens after submission or the format a date must use before someone has to guess.
<label for="email">Work email address</label>
<input id="email" name="email" type="email" aria-describedby="email-help">
<p id="email-help">We will send the requested guide to this address.</p>Placeholder text disappears when a value is entered and may have poor contrast. It is not a durable replacement for a label or an essential instruction. For required and optional fields, state the convention in text and make each field’s status clear. If you use a symbol to mark required fields, explain its meaning before its first use; do not rely on color or an unexplained symbol alone. WAI covers form instructions and marking required controls.
Rank #2
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Group related choices with fieldset and legend
When multiple controls answer one question, group them with <fieldset> and give the group a <legend>. This is especially useful for radio-button choices, such as selecting a contact preference: the legend states the shared question, while each control has its own label. WAI identifies these as the semantic HTML elements for grouping related controls in its Forms Tutorial.
Choose native validation or custom feedback deliberately
Use suitable HTML input types and constraints for common requirements. For example, type="email" and required let the browser apply its built-in checks and behavior. The visible instructions should still make required status understandable; the programmatic state alone does not explain what a user needs to enter.
Rank #3
| Approach | Useful when | What to provide |
|---|---|---|
| Native HTML validation | Built-in constraints such as a required value or email format fit the field. | Use the relevant HTML type and attributes, and give people clear visible instructions. |
| Custom validation | The form needs rules or feedback beyond what native constraints provide. | Show textual, perceivable feedback; expose relevant descriptions and invalid states to assistive technology; test the interaction. |
required communicates required status and generally exposes it to assistive technology through the browser. aria-required communicates a required state but does not validate a value; avoid adding redundant ARIA when native HTML already provides the information unless a specific compatibility need justifies it. WAI explains these distinctions in Validating Input.
Browser-side checks help people catch mistakes but are not a security boundary. Validate submitted data on the server too, as WAI states in its input validation guidance.
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Make errors clear, connected, and actionable
After an unsuccessful submission, show an error summary and messages beside the affected fields. Each message should identify the field, explain the problem in plain language, and tell the person how to fix it—for example, by giving the accepted format. When possible, make each summary entry a link to its field.
Connect a field-level error to its control with aria-describedby. For a custom invalid state, use aria-invalid="true" on the affected control. If a summary is inserted dynamically, WAI demonstrates role="alert" to notify assistive technology. Live announcements and focus behavior should be checked with the assistive technologies relevant to the audience rather than assumed to work identically everywhere. See WAI’s user notification guidance and the ARIA21 technique for communicating errors.
Review the form with keyboard and error cases
Use this checklist to evaluate the completed form; these checks do not certify it or guarantee identical behavior across browsers and assistive technologies.
- Tab through the form and operate every control using a keyboard.
- Check that instructions appear before users need to act on them.
- Submit with required fields empty and confirm that each problem is identifiable and fixable.
- Enter malformed values, such as an incorrectly formatted email address or date, and check the resulting feedback.
- Confirm that errors can be understood without relying on color alone.
WAI’s Easy Checks provides a starting point for reviewing web accessibility; form-specific checks should also cover the actual submission and error interactions.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
