Accessibility Tutorial

Developer's Guide: Text

Text

An argument can be made that a webpage belongs to the user once it is downloaded, in that they are free to resize the User Agent (UA), change font size, color, contrast, and so forth. Though we love our beautiful designs—and clients want to ensure the integrity of their branding—the truth is no one has a right to take over someone's UA, including opening new instances of the browser. In fact, CSS2.1 mandates that a user's CSS with "!important" declarations should trump the author's CSS, which is a change over CSS1.0.

This principle of user control is especially true of font size. Font size should be declared in relative units such as ems or percentages rather than pixels. While the newer and more compliant browsers can resize text in pixels, some older browsers, such as Internet Explorer 6, cannot.

If you are used to pixels, and are confused by ems, there's a nice trick available to acquaint you with them. Set the font-size property to somewhere between 62.5% and 65% in the BODY element. Then ems will somewhat resemble pixels. For example 11px will then be roughly equivalent to 1.1ems. 10px will be roughly equivalent to 1.0em, and so forth. Note that an em sizes text relative to its parent. Text set to 1em within a parent set to 2em, will display larger than text set to 1em with a parent of 1.5em.

Another trick to accomplish this is to set the font-size property in the HTML element to about 72%, and then set it in the BODY element to 1em.

A flawed practice that is more related to content than design is use of the text "click here". Since many users do not click, it is not a very inclusive practice. It is also a waste of verbiage. A simple rewording of the text should make it more accessible for everyone.

Wrong:: To learn more about boats, click here.
Right:: Learn more about boats.
Right:: Learn more about boats.

Keep links relatively short, meaningful out of context, and use descriptive text rather than the URL.

Wrong:: http://www.msn.com/
Right:: MSN

Moreover, underline all links within text blocks, and do not underline text that is not a link. An exception is when the link is obviously part of a navigation theme. Multiple links are best put in an unordered list so that the screen reader knows when a link ends and another begins. For the sighted user it is best to let the links breathe a little by putting some space in between or perhaps a pipe (|). Ideally the pipe should come out of the CSS as a background image so that the screen reader does not try to read it.

Alternative Text

Alternative text, known commonly as alt text, is text that is read in the absence of an image, using the alt attribute. Its usefulness can be seen in the following scenarios:

Images are intentionally turned off by the user so that alt text becomes visible in the browser. Internet Explorer 6 will show the broken image icon while Firefox will just display the alt text. While the former may be helpful to the developer, the latter is a better user experience.
The image cannot be located by User Agent (UA) and therefore alt text becomes visible in its place.
The user is using a screen reader and therefore alt text is read aloud by the reader.
The user is using Internet Explorer 6 or earlier, in which case the alt text will (incorrectly) display on mouseover of any image if the value is not empty. This behavior has led some to think erroneously that alt text is tool text. Internet Explorer 7 has correct behavior.

Alt text should generally match exactly what is written on the image. If the image is a form submission button and it says "continue", then the alt text should say "continue". Decorative graphics such as horizontal rules, a picture of someone drinking coffee, or an operator wearing a headset do not add content as such, and should have empty alt attributes. It is a nuisance for the user of a screen reader to hear something like "picture of women chatting by water cooler", unless of course you particularly want to draw attention to that image. Be sure to include the alt attribute, even if empty. It is required if you are using XHTML. More importantly, its absence may cause the screen reader to read out the entire source of the image, that is, its path and filename, which produces a tedious and less cogent user experience.

There are three cases that require special consideration. Sometimes you will want alt text even if the image has no text. An example would be an image that of itself conveys something, like a company logo. Target's bullseye image is a case in point. Appropriate alt text for this instance might be "Target", "Target.com", or "Back to Target homepage", assuming that it links back to the homepage of course.

Another case that requires consideration is when a graphic conveys stages in a process, and perhaps highlights the current stage. A common example is a progress bar during some process such as a purchase sequence. The image may show all previous and future steps grayed out, with the current step highlighted. Since you do not want to include all the text in your alt attribute, a good way to handle it might be to start with the general process and then indicate the current stage within that process, as in this example.

The last case requiring special consideration is when there is linked text next to a linked graphic where both links do the same thing. In this case it is best to leave the alt attribute empty; otherwise the screen reader will read the link twice. In other words, the two links are only for the sighted user.

According to the W3C's specifications for HTML and XHTML, the alt attribute is associated only with the IMG, AREA, and INPUT elements. In case of the INPUT element, alt text technically belongs to the "image" type, that is, for graphical submit and action buttons. However, some use alt text for input fields, i.e. for INPUT elements of type "text". While it is legal, it seems counterintuitive.

The third element that takes the alt attribute is the AREA element. This element works in conjunction with the MAP element for image maps. The image used for the image map should generally have alt text, as should each AREA element.

<img src="imageMap.gif" alt="main menu" usemap="#thisMap" />
<map name="thisMap">
  <area coords=1,100,20,100 alt="contact us" />
  <area coords=1,400,40,200 alt="about us" />
</map>

Try to avoid using server-side image maps. But if you must use one, include text link alternatives.

Alternative text can be simulated for background images. Suppose you have a page heading that you want to use a graphic for, either because you wish to use a non web font—a font not likely to be found on a UA—or because you wish to add some decorative flourishes to the image. You may want to assign this image to the H1 element. You could put an image inside the H1 element as follows:

<h1><img src="shopOnline.jpg" alt="Shop Online" /></h1>

This works, but is not optimal. A better way to achieve this would be to assign the image to the H1 element with CSS.

CSS:	
h1.shopOnline {background: url(shopOnline.jpg) no-repeat 0 0; width: 400px; height: 26px;}

HTML:	
<h1 class-"shopOnline">Shop Online</h1>

This is close to the mark, except that the text inside the H1 element will also show for the sighted user. You want to hide the text from the sighted user, and yet ensure that the user of a screen reader can hear the text. You also want search engines to process the text in the element since an H1 element has reputedly more SEO weight than text, say, in a P element or in an alt attribute. A better method is to use CSS to hide the text for sighted users.

CSS:
h1.shopOnline {background: url(shopOnline.jpg) no-repeat 0 0; width: 400px; height: 26px;}
h1.shopOnline span {position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden;}

HTML:	
<h1 class="shopOnline"><span>Shop Online</span></h1>

Use of the CSS left property, if set very high, ensures that the text will be out of view in a visual browser. (Some methods use the top property set to a negative value, but this can cause a page to scroll to the top if there is a link or form in the "hidden" text.) It is also recommended that you not use the display property with a value of "none", or the visibility property with a value of "hidden", lest you effectively hide the text from most screen readers as well.

This method accomplishes all of the following:

It displays the background image for the sighted user if author style sheets are turned on.
It hides the text from the sighted user if author style sheets are turned on.
It displays the text within the SPAN element for the sighted user if author style sheets are turned off.
Screen readers will read aloud the text within the SPAN element and of course ignore the background image.
Search engines will spider the H1 text for improved SEO (though this point is disputed).

Title Text

The title attribute is used for what is commonly known as tooltip text, and can be used with many elements. In a browser, hovering over an anchor tag or image will display the title text for a few seconds. Since the length of time is relatively short, it is best not to have too much text or your attempt at accessibility will make the site less accessible. Some set the accessible limit of title text to 64 characters. A screen reader can also read the title text. Using the title attribute on a text link might be done as follows:

<a href="about.jsp" title="read about out company history and current news stories">about</a>.

In this case the link text does not of itself convey full meaning to the link, and so supplemental information is provided. Note that since screen readers tend to have title text turned off by default, it is best not to rely on it. If the link is an image instead of text, the title attribute can be on the image or the anchor. Note that the title text on the anchor will override that on the image. Also, title text on either will override Internet Explorer 6's incorrect behavior of displaying alt text as tooltip text. It is best not to use title text that matches the link text since this may be irksome to all users.

Long Descriptions

If a substitute description of an image is too long or complex even for title text, you may use a long description for an image. This is information found at a separate Uniform Resource Locator (URL) using the longdesc attribute. A good case for a long description would be for a graph or chart.

<img src="chart.gif" longdesc="chart.html" alt="Gross sales chart">

A long description would then be found in the file chart.html. This has two advantages over title text: title text, as we have already stated, is turned off by default in most screen readers, and title text for sighted users appears for a short period of time.

On the other hand, the longdesc attribute is hidden from sighted users, who may also want to better understand the image. Again, accessibility applies to all users. It is better either to put the long description directly in the page in proximity to the image, or put a visible link to the description so that all can benefit.