DYDevKitYard
Accessibility

Build an Accessible Form

Build an accessible form by starting with semantic HTML, pairing every control with a label, writing helpful validation messages and checking keyboard navigation, contrast and mobile spacing.

Start workflowView checklistOpen ElementYard
Problem statement

What this workflow solves

Target outcome

A form structure that is easier to use with a keyboard, screen reader, mouse or touch device.

Interactive workflow

Work through Accessible form

Track each step, focus the current task and copy a starter outline for your project notes or implementation plan.

0% complete
Start with semantic controls

Native HTML controls give you keyboard behaviour, browser validation and accessibility foundations for free.

  • Use label elements connected with for and id.
  • Choose the right input type for email, number, url or password fields.
  • Group related options with fieldset and legend where useful.
Starter codeCopy and adapt this outline for the workflow.
<section aria-labelledby="build-an-accessible-form-title">
  <p>Accessible form</p>
  <h2 id="build-an-accessible-form-title">Build an Accessible Form</h2>
  <p>A form structure that is easier to use with a keyboard, screen reader, mouse or touch device.</p>
  <ol>
    <li>Start with semantic controls</li>
    <li>Write useful help and error text</li>
    <li>Check interaction and spacing</li>
  </ol>
</section>
Accessible form preview

Check form basics

Toggle common form states and inspect the generated accessible HTML.

Use the email address where we can reach you.

  • Visible label is present.
  • Required state is included in the markup.
  • Help text explains what the field expects.
Generated output
<form>
  <div class="field">
    <label for="email">Email address</label>
    <input id="email" name="email" type="email" required aria-describedby="email-help" />
    <p id="email-help">Use the email address where we can reach you.</p>
  </div>
  <button type="submit">Submit</button>
</form>
Best practices

Work this way

These are the patterns that keep the workflow practical, accessible and easier to maintain.

Use label elements connected with for and id.
Put help text near the field it explains.
Tab through every field and button.
Check label, input border and button contrast.
Common mistakes

Avoid these traps

Relying on colour alone to communicate state or errors.
Skipping keyboard testing until the end of the project.
Using placeholders as the only form labels.
Checklist

Step-by-step workflow

Follow the steps in order, then use the resource sections when you need a tool, reference or UI pattern.

1

Start with semantic controls

Native HTML controls give you keyboard behaviour, browser validation and accessibility foundations for free.

  • Use label elements connected with for and id.
  • Choose the right input type for email, number, url or password fields.
  • Group related options with fieldset and legend where useful.
2

Write useful help and error text

Validation should explain what happened and how to fix it, not just mark a field red.

  • Put help text near the field it explains.
  • Use plain language for errors.
  • Keep the user's typed value when validation fails.
3

Check interaction and spacing

A form should be usable without a mouse and comfortable on narrow screens.

  • Tab through every field and button.
  • Check focus states are visible.
  • Keep tap targets comfortable on mobile.
4

Check visual accessibility

Readable labels, strong contrast and obvious states help every user complete the form faster.

  • Check label, input border and button contrast.
  • Avoid placeholder-only labels.
  • Make required fields clear without relying on colour alone.
Related resources

Tools, cheatsheets and components

Use these linked DevKitYard sections when the guide moves from planning to doing.

Related Tools
Contrast CheckerCheck form text, border and button contrast.HTML FormatterClean form markup.Meta & Open Graph GeneratorPrepare page metadata after the form page is ready.
Related Cheatsheets
HTML CheatsheetReview labels, inputs and semantic page structure.CSS CheatsheetReview focus states and responsive spacing.
Related Components
Form ComponentsExplore form section patterns.Button ComponentsPlan clear form actions.
ElementYard CTA

Design form sections in ElementYard

Use ElementYard form presets when you want to visually customise form layout and spacing.

Open ElementYard
FAQ

Accessible form questions

Are placeholders enough for accessible form labels?

No. Placeholders disappear as users type and are not a reliable replacement for visible labels.

What is the fastest accessibility check for a form?

Tab through the form, check every control has a label, confirm errors are understandable and verify text and button contrast.

Next steps

Keep moving

Contrast CheckerCheck form text, border and button contrast.HTML CheatsheetReview labels, inputs and semantic page structure.Form ComponentsExplore form section patterns.Design form sections in ElementYardUse ElementYard form presets when you want to visually customise form layout and spacing.