Accessible Form Example

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.

Sample Markup

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 legend tag 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-required attribute 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.
  • No JavaScript Required – JavaScript is not required for basic form behavior. It can be added for progressive enhancement for a better validation experience than the native browser provides, but it is not required for someone to fill out the form.
  • Simple Submit Button – The submit button for the form is just a simple input element of type submit. It is not a link or anything fancy.

Additional Resources