Web forms

For web forms to be accessible to all devices, it’s very important you use valid, proper HTMLHTML HTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites.. 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.

Summarised:

  • 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:

  • W3CW3C The World Wide Web Consortium (W3C) is an international community where Member organizations, a full-time staff, and the public work together to develop Web standards.https://www.w3.org/. Web accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) Tutorials: Forms Concepts
  • WebAIM: Creating Accessible Forms
  • A good introduction by Nomensa: Three rules for creating accessible websites
  • Core handbook on labeling

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 CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. class screen-reader-text and don’t use display: none.

Top ↑

Dynamic notifications

A good way to announce dynamic notifications is using wp.a11y-speak(). This JavaScriptJavaScript JavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser. https://www.javascript.com/. function is included in WordPress coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. and enables you to announce dynamic changes and notifications to screen reader users.

Top ↑

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

Top ↑

More resources

Last updated: