Accessible Form Structure

Forms must be marked up correctly in order for screen reader users to be able to use them correctly. Please ensure all your forms are marked up like in the following examples.

HTML5 example

This is the best solution to use, especially when building from scratch.

If you are marking up a form from scratch, use the HTML5 fieldset and legend tags to describe groups of elements. This makes the forms more understandable to screen reader users since they understand the context of the information they will be filling out as they tab through the form.

Note that these tags can be difficult to style. I would suggest reading the following articles to go over how this is done. Emil Björklund has a great article on how to Reset your fieldset that should help.

ARIA form role example (with ARIA used to replace fieldset and legend as well)

If you already are using a component similar to this in existing work that is not accessible, go to the developer walkthrough of this section to see we made our implementation accessible.

Unfortunately, there will be times when you will come across a bit of code that is supposed to be a form but is not marked up correctly and unusable to screen reader users. Recoding it with fieldset and legend tags may be prohibitive due to:

• The legend tag must always be the first child of the fieldset tag.
• The issues that devs have with styling fieldset and legend tags, as mentioned in the section above.
• The amount of JavaScript rework that would be needed to make the application work with fieldset and legend tags.

While I would still endeavour to advise to code forms correctly, the following code should reduce the amount of coding time on existing work to fix accessibility issues for screen reader users.