Building Accessible Web Forms - The basics of form layout
(Page 2 of 5 )
Many Web designers have already built correct form layouts across several projects. Thanks to their vast experience, they're well seasoned as to the right visual presentation for them. Sometimes, however, designers use the wrong way to lay out some form elements. Let's see some general guidelines to properly set out our form controls.
For most text inputs, the text (or label) tied to the form control should precede the control itself, either directly above or to the left. Probably, this is a common sense issue, generally well implemented on most forms. The inputs should be presented to the user in the following manner:
Or, with the element labels positioned to the left:
However, when we're using radio buttons and checkboxes, the form control should appear first, as depicted below:
Or using radio buttons:
Certainly, the examples should seem a little obvious for experienced designers all around, but people still make the mistake of inserting the radio button or check box element after the related text. Even worse, there are situations where the text is displayed in the middle of a sentence, making it extremely confusing for screen readers to properly interpret the content, since such readers expect the checkbox or radio button control to come before the text. In order to illustrate this practice, the image below shows a badly implemented radio button layout:
As we can see, the screen reader will probably identify erroneously the radio button tied to "Yes" with the text "No", since this is the generic order usually presented for radio buttons. With form elements laid out this way, screen readers will nearly always choose "Yes" when, in fact, they want to say "No."
With a little bit of common sense we should be able to build forms that are much more accessible for most people. Just by following some basic form layout rules, we're improving the overall site's accessibility.
Laying out our form elements and sticking to the examples and guides described above is a large step forward. But we can add more techniques for significantly increasing form accessibility, with minor effort. Just by adding the <label> tag to each text input element, we'd be noticeably enhancing accessibility levels. So, let's take a deeper look at this tag to discover further improvements applicable to our forms.
Next: Improving accessibility with the "label" tag >>
More HTML Articles
More By Alejandro Gervasio
