Labels are very important for making your website universally usable. The different types of labels you need to pay attention to when designing and coding web applications are:
- Alternate text for images
- Tooltip text
- Form labels
- Aria labels
Lets get into the details....
Alternate Text for Images
Alternate text is for a screen reader user. If you leave it off, the screen reader reads the image name which is not very helpful to a blind user if your image is named something like "img001_110112.png."
Alternate text is defined in the alt attribute of the html img tag, as in
alt="file" if the image is a file icon. Thus, it is more commonly known as "alt text."
Alt text also shows up if the image is missing (or images are turned off by the user).
Internet Explorer kind of complicated things by also showing this text as a tool tip when you hover over the image. Nice feature, but really the title attribute is for tool tips. No other browser shows the alt text as a tool tip, so don’t even think of alt text in this context. (In case you’re wondering - I know you are - if an image has alt text and title text, Internet Explorer will do the right thing and show the title text as the tool tip.)
How then, should you think of alt text? Here is an easy-peasy rule of thumb:
If your image conveys information to the visual user, define alt text for it. If your image is just eye candy for the visual user, alt text should be null (
Eye Candy - the user doesn't need to hear Gail Chao's name twice, or that she has an associated photo that they can't see.
<img src="myPhoto.jpg" alt="" /> Gail Chao
Added Information - the user will know that clicking on the link will launch a spreadsheet
<a href="#"><img src="file.jpg" alt="spreadsheet"> Latest Budget</a>
Alt text always needs to be set, even if it’s alt='" because, remember, otherwise the screen reader will read the image name. If alt text is set to null, the screen reader will skip right over that image and go on to the important stuff.
Tooltip text is set via the title attribute of an element. It shows up when a user hovers over the element after a slight delay. This is built into the browser.
<img src="delete.png" title="delete" />
(user will see the tooltip "delete" when they hover over the delete icon)
Tooltip text will not show up when the user focuses on an element. This is a problem for keyboard-only users. The bottom line is that tooltip text is not universally usable. It is only available to mouse users. So if you need to convey information to the keyboard-only user (like tooltips for icons) you should use a custom solution to create your own tooltips.
Not sure what the browser manufacturers were thinking and why they haven't fixed this by now....
A form label labels a form field. Every form field needs one.
Form labels are created using the
<label> tag and are assigned to form fields using the "for" attribute which maps to the id of the form field.
<label for="phone">Phone Number:</label>
<input id="phone" type="text" />
The new kid on the block is aria-label and its sister aria-labelledby and cousin aria-describedby.
aria-label - allows you to label any element in the HTML. A screen reader will give aria-label priority and read it even over the text inside that element.
<div role="nav" aria-label="primary"> menu items go here...</div>
aria-labelledby - allows you to use one HTML element to label another. It is preferrable to use aria-labelledby over aria-label whenever possible.
For instance, with ARIA you would put role="dialog" on the outermost HTML element that makes up the dialog. Then you could use the aria-labelledby attribute to point to the HTML h1 element as the label.
<div role="dialog" aria-labelledby="header">
<h1 id="header">Share Something</h1>
<div> content goes here....</div>
aria-describedby - uses one element to describe (rather than label) another. The same element can also describe multiple objects.
A good use of aria-describedby is for tooltips (not the HTML ones created using the title attribute, but home-grown ones we create) or other kinds of help text, like help text for a form.
<label for="phone">Phone Number:</label>
<input id="phone" type="text" aria-describedby="phoneHelp" />
<div id="phone help">Enter your phone number without any formatting. Just the digits, please!</div>
That's it. A quick description of labels. It's not that hard, but labels are great enhancements to the usability of web sites, so they are important to get right.