Rethinking your layouts

Sometimes you have to stop and think about your form layout and the text you are using and where you are using the text, if you want to make your form accessible for people using screen readers. There are various layout patterns that are understandable by someone looking at the form, but you would not be able to add the LABEL tag. Here are a couple of examples:

Looking at this layout, your site visitors could figure out that the left column is to record number of phone calls for a given month, and the right column is for number of volunteers trained. However, to add a LABEL tag you would need a unique label for each box and the unique text is not there to "code around". This type of layout would have to be changed so each box had its unique label, for example:

• Jan. phone calls
• Feb. phone calls
• March phone calls
• April phone calls
• Total phone calls
• Jan. volunteers trained
• Feb. volunteers trained
• March volunteers training
• April volunteers trained
• Total volunteers trained

This adds to the length of the form and changes its appearance, but there is no way around this.

Another example relates to conveying label information INSIDE the field itself, as is shown here:

If you look at this form, it is pretty clear what type of information is desired for the listing. However, the text explaining the drop down list is not external to the field, and so it could not be coded with the LABEL FOR tag. The same type of problem would occur if you had a text field and use the initial option to explain the field. Since the explanation it inside the field, you could not use the LABEL for tag. This is how the above form would have to be changed, to add the accessibility coding.

This document is part of a set of tutorials related to putting a form on your website. The initial page is found at cals.arizona.edu/ecat/forms/olderforms.html