Form accessibility is frequently not even considered by web developers, but it is a fairly easy activity to create a form that is both easy to use and accessible to to people with disabilities.
This example is taken from Better HTML Forms which is a book I’m writing to help developers create better forms.
Here is a sample form for an Account Profile edit screen.
[gist id=”b67eb0284baf8e5398ca” file=”accessible-form.html”]
The extra classes are for CSS styling
Key Points to Note
- Field Order – Fields are in a linear order. Even though this particular form is designed to be horizontal (2-up columns), all styling for layout is handled in the CSS, not in the markup. This allows users to easily tab through the form fields.
- Form Title – The form has a title (using a heading tag) to clearly indicate the form intent.
- Sane Default Markup – Each field primary field is grouped into a block-level element and the sub-fields (radio buttons) are in an inline-level element
- Explicit Labels – Each field has an explicit label so that Screen Readers can correctly announce the intent for a given field. Even the radio buttons are marked up with labels and the labels are correctly associated their specific options.
- Fields are Grouped – Related fields are grouped together via a
fieldset. This same pattern is leveraged for the Email Format area and the
legendtag is used to label this sub-group of fields.
- Required Fields – Required fields are noted in the individual fields to correctly support modern browser validation. Also, the
aria-requiredattribute is provided for additional accessibility on older screen readers.
- Input Types – The most appropriate input type is used on every field. This is leveraged both in validation and in keyboard selection on mobile devices.
- Simple Submit Button – The submit button for the form is just a simple
inputelement of type
submit. It is not a link or anything fancy.