How to mark up accessible forms – AffiliateTips.com
Three elements are crucial when optimization of your website is Design, Html and Css. They help you increase usability, structure website content and not to forget; make it look good. If you haven’t picked these important factors for a successful affiliate strategy it’s about time. You’ve come to the right place. Enjoy!
How to mark up accessible forms
Friday, Nov 16, 2007
Forms are common on the internet, but rarely are they accessible to people other than the average user. There are a few things you can do to make sure your forms will be usable by everybody.
“There are a few things you can do to make sure your forms will be usable by everybody.”
Use the label-element
The label-element binds a label to its form-control and allows people who use screen readers to understand which label belongs to what. Using labels also allows the user to click the label to activate the form-control; this is especially important when using radio-buttons and check-boxes. Then you don’t have to click just a tiny circle or box but can click anywhere on the entire text.
There are two ways you can use the label-element, with or without a for-attribute. The for-attribute works together with the form-control’s id-attribute, so to bind a label you simply go:
Why it can’t work with the name-attribute instead is beyond me.
Instead of using a for-attribute in the label-element you can wrap the label-element around the form-control, like so:
I prefer this method as it eliminates the need for the id-attributes and for-attributes which I believe clutter the code. Unfortunately Internet Explorer does not allow you to click the label to activate the control when it is wrapped around it, so if you are coding with IE users in mind you have to use id- and for-attributes.
There are some who use the label-element without a for-attribute and without wrapping it around the control. This is completely useless, as it does nothing for accessibility.
Use the fieldset and legend-elements
The fieldset and legend-elements are used to group form-controls that belong together.
The fieldset renders by default with a border and the legend-element sits in the left-hand side in the middle of the top border. They can of course be styled to look completely different, although styling form-controls is considered bad practice because users are accustomed to forms looking the same on most systems.
Here’s how you use these tools:
Marking up forms properly
Form-elements do not allow inline-elements (such as label or input) directly inside them so you have to wrap a block-level element around your form-controls and labels so as not to produce any errors in your code.
I wrap each label/control in a paragraph-element. A lot of people use the div-element but I believe the p-element is better as div has no semantic weight whatsoever. Besides, with paragraphs you get some nice margins in your form without needing to style them.
Here’s how I normally mark up a form:
This allows for a variety of styling as well. You can set the br-elements to display none and and use absolute positioning to create a two-column form where the label-text is left-aligned in the left column and the control is left-aligned in the right column. Setting the paragraph to text-align: right; and the same width on each control allows for a right-aligned label-text two-column form-layout.