Accessible web forms

The intro text needs to be rewritten.
Related issue on GitHub #154 Intro page Accessible web forms.

For web-based forms to be accessible to all devices, it’s important to use valid, well-constructed HTML. Good structure is the foundation of a good form. In addition to using valid HTML, be sure to:

• Label controls (give input fields a label)
• Group controls with fieldset and legend
• Provide instructions to help users complete complex forms
• Validate user input
• Add accessible user notifications (both error and success messages)
• Do not remove native outline styling on :focus unless you provide custom styling that is equally prominent.

Resources

• W3C Web accessibility Tutorials: Forms Concepts
• WebAIM: Creating Accessible Forms
• A good introduction by Nomensa: Three rules for creating accessible websites
• Core handbook on labeling
• WordPress speaks with wp.a11y.speak
• A Guide to Accessible Form Validation
• The Anatomy of Accessible Forms

Table of contents

• Input and label
• Placeholders
• Input and description
• Group form fields
• Focus handling
• Provide help
• Required fields
• Feedback on errors
• WP form plugins