Web forms

For web forms to be accessible to all devices, it’s very important you use valid, proper HTML. This is the key to a good form.

Also inform users in an accessible way how to use a form, when there is an on error or when the form is successfully submitted.


  • Use valid HTML
  • Label controls (give an input field a label)
  • Group controls with a fieldset and legend
  • Provide instructions to help users understand how to complete the form
  • Validate user input
  • Add accessible user notifications (error and success messages)
  • Do not remove remove native outline styling on :focus unless you replace the styles with your own for all elements.
  • Consider adding prominent focus states for all interactive elements, use this guide by Deque: Accessible Focus Indicators

How this is done is explained very clearly in:

Labels and placeholders Labels and placeholders

A placeholder is not a substitute for a label. For all interacting technology to understand a form, a label should be connected to an input.

A label should tell what to fill out, the placeholder should describe how to fill it out.

For example:

<label for="search">Search for a product:</label>
<input type="text" id="search" placeholder="For example apples, bread or milk">

@afercia added his extended research on this to ticket 40331: The placeholder attribute should not be used as a replacement for a label.

In summary HTML5 specification says:

The placeholder attribute represents a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. A hint could be a sample value or a brief description of the expected format.

The placeholder attribute should not be used as a replacement for a label. For a longer hint or other advisory text, place the text next to the control.

If you must hide a label or control from vision, use the CSS class screen-reader-text and don’t use display: none.

Top ↑

Dynamic notifications Dynamic notifications

A good way to announce dynamic notifications is using wp.a11y-speak(). This JavaScript function is included in WordPress core and enables you to announce dynamic changes and notifications to screen reader users.

Top ↑

Don’t hijack the tab order Don’t hijack the tab order

A common technique for forms it to give the first input field a tabindex=”1”.

This is very annoying for keyboard users, as the tab order is now not what they expect. If you use Gravity Forms, there is the gform_tabindex filter to remove the tabindex in forms.

Top ↑

Useful WordPress plugins Useful WordPress plugins

Top ↑

More resources More resources