Enable
>

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.

Contact Information

Example code explanation

Below is the HTML of the above example. Use the dropdown to highlight each of the individual steps that makes the example accessible.

☜ Scroll to read full source ☞

                    
                

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:

While I would still endevour 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.

Contact Information

Example code explanation

Below is the HTML of the above example. Use the dropdown to highlight each of the individual steps that makes the example accessible.

☜ Scroll to read full source ☞