Text Tips

Here are some tips on how to improve text accessibility for visually disabled users.

Color and Contrast

Text should be displayed with the highest possible contrast. Generally, black text on a white background is the most readable.

The older we are, the more difficult it becomes to tell the difference between one shade of blue and another. Small blue text becomes increasingly difficult to read, to the point that the text becomes unreadable. Therefore, don't select blue as your site's text color.

Different colors may be used for aesthetic or other reasons. But it should only be used for larger or highlighted text, such as headlines and titles.

Make sure that information conveyed with color is also conveyed in the absence of color.

Size

Large type is more readable than small type. In general, a minimum of 12-point type is recommended. Use up to 16 or 18 points to cater for visually disabled users. But keep in mind that the relationship between readability and point size differs somewhat amongst different typefaces.

Typeface

It is recommended that you stick to the most commonly used typefaces. These include Verdana, Arial, Helvetica, Serif, Sans-serif and Times New Roman.

Set three to four typefaces in FONT tags or Cascading Style Sheet settings. So when your first typeface selection is not available, your second, third or fourth selection can be used by the user's browser.

It is quite common to select one typeface for headings and sub-headings and a different one for the main content body text.

Style

Try to avoid italic, oblique or condensed text as they reduce the readability of your text. It is better to emphasize text in bold, than to use italics.

Having said that, it is preferable to use the <STRONG>...</STRONG> logical style tag as opposed to the bold <B>...</B> physical style tag.

Letter Spacing

Partially sighted users can find close letter spacing difficult to read. Where possible, spacing should be wide.

This can be controlled with the 'letter-spacing' CSS attribute, although the standard letter spacing of text in HTML is generally sufficient for most users.

The letter-spacing property increases or decreases the white space between characters.

For example:

p
{
letter-spacing: 12px
}

Note: Negative values are allowed.

p
{
letter-spacing: -0.5px
}

Line Spacing

The spacing between lines of text should be at least 25 to 30 percent of the point size. This minimizes the possibility of partially sighted users having difficulty finding the beginning of the next line.

Cascading Style Sheets (CSS)

Not all browsers and screen readers support Cascading Style Sheets. So it is important to design Web pages that are accessible where style sheets are not available.

Relative Font Sizes

Use relative font sizes rather than fixed font sizes. This will give your users the option of applying their own style sheets or overriding your font settings in their browser.

Examples of relative font sizes:

<FONT SIZE="-1">
<FONT SIZE="+2">

Examples of fixed font sizes:

<FONT SIZE="2">
<FONT SIZE="5">

Underlined Text

Never ever highlight text by underlining it, since underlined text is an indication of a link. This can confuse inexperienced and even experienced users. Use other methods to draw attention to text, such as emphasize text in bold.

Preformatted Text

Don't preformat text using the <PRE> element. Use tables instead. Assistive technology can't interpret preformatted text. The <PRE> element preformats text for the screen using a fixed width font. All whitespace characters are interpreted literally and retained in display, including multiple spaces, tabs, carriage returns and linefeeds.

Text Only Pages

If accessibility cannot be accomplished in any other way, provide a text-only page with equivalent information or functionality.

The BBC (British Broadcasting Company) Web site provides a really useful tool called Betsie that creates a text-only version of a Web page on-the-fly (created in real-time).

Betsie (BBC Education Text to Speech Internet Enhancer) is a server-side CGI script and can be downloaded at the BBC Web site. I highly recommend Betsie - it works very well and it's free!

Timed Responses

Sometimes, a timed response is required. When the time is running out, alert the user and give them the opportunity to request for additional time to respond. Do not cut people off without warning. The user would be furious, if they lose something they had been working on for 20 minutes.