Universally designed web pages are compatible with a wide range of technologies, including multiple computer platforms, web browsers, and assistive technologies. They can be read as easily on a cell phone as a large computer display, and are easily interpreted by text-to-speech software.

Universally designed web media contain captions that convey content as effectively to viewers in a noisy airport as in a quiet computer lab. Captioned videos offer the added benefit of sharing their text-based content with internet search engines.

How you organize and present information plays a big role in determining the usability and inclusivity of your electronic content. Visual formatting—layout, spacing, color, and font selection—all affect the degree to which information can be easily read and understood. We know this from age-old principles of graphic design as well as modern studies of usability.

Yet we mustn’t rely on visual formatting alone to convey important information. That’s because not every reader will see your document the way you designed it due to varying screen sizes, printing, and photocopying. Others won’t see it at all; they will hear it using text-to-speech software. Thus, Visual formatting should be combined with structural formatting.

Structural formatting is accomplished with Headings. Headings are used to create an outline, or table of contents, that helps users to navigate the content more efficiently. This is especially true for readers who navigate using assistive technology. Thus, using headings is a very simple method of increasing the usability of your electronic content. You can apply headings in Word documents, on the web, and in Canvas courses.

  • Use headings to provide a page structure or outline
  • Nest appropriately - do not skip levels
  • Use headings to indicate sections of content. Avoid over-using them, especially for links.

Further resources on appropriate use of headings:

Although there are differences between web content editors, many have a similar dropdown menu for designating headings. The screenshot shows the text editor in WordPress.

Headings menu in WordPress

What would the Web be without hyperlinks? They allow us to jump from page to page and from site to site in search of useful information.

For many people who navigate the Web visually, skimming through text and discovering links in their natural contexts, it may come as a surprising that such a basic element as a hyperlink can pose a serious barrier to users who cannot see. Blind and low vision readers typically rely on screen reader software tools, which, fortunately, have the ability to read out a list of links on each page. This summary of links is a great time saver, but it has the disadvantage of separating links from the text in which they original appeared.

The “link text” you choose is very important. Link text such as “Click here” or “Read more” is not helpful to users who cannot see because it doesn’t tell them where the link goes, and because there may be more than one “click here” link on the page. On the other hand, link text such as “Declaration of Independence” and “Thomas Jefferson” are helpful because they are descriptive and succinct.

Most text editors for web content have a button on the toolbar for inserting or editing hyperlinks. You can select text and convert it to a link, or you can simply paste a link and then edit to add descriptive text. Below is an example of how to do this in WordPress, although other text editors will be slightly different.

In WordPress, select the link text, then click on the Insert/Edit Link icon.

WordPress Insert/edit link button (Ctrl+K)

Click on the settings button to get more Link Options.

WordPress Link options button on insert link dialog

In the Link options window, enter the destination URL and the descriptive link text in the appropriate fields. Once these are both added, click Update to apply changes.

WordPress edit link options, showing separate fields for URL and Link Text, and Update button to apply changes.

Images convey information quickly and powerfully—assuming they can been seen and understood. However, some readers may not understand the meaning of the image; others may not be able to see it due to visual impairment, personal viewing preferences (especially on the web), or technological limitations.

Alternate text (“alt text” or "alt tag") is added to an image to provide a textual alternative to visual information. Why is this important? Remember, some users won’t see your information; instead, they’ll hear it using text-to-speech or screen-reading software. By adding an alt text to an image, you make its meaning available to people who, for whatever reason, cannot see it.

Alternate text should be added to all non-text elements, including:

  • Pictures
  • Graphs
  • Charts
  • Tables
  • Microsoft Office SmartArt

Make alternate text meaningful to a listener:

  1. What is the context of the image? What meaning does it add to the page?
  2. Be concise. Describe only what you expect visual users to get out of the image.
  3. If the image is already described in the surrounding text, the alt text can be very short.
  4. Avoid redundant statements like “Image of” or “This is a picture of.” Simply state what it is.
  5. If an image is purely decorative, mark it as such (various methods depending on software).
Alternate Text: WordPress

To add alternate text in WordPress, click on the image in the Media Library and edit the Alt Text field.

Alt Text field in WordPress media library

Alternate Text: HTML

When editing HTML code directly, include the alt attribute (“alternative text”) for all images. The alt attribute is added after the path to the file:

  • Example: <img src="file-name.jpg" alt="Descriptive text goes here.">

Alt text should describe the meaning of an image rather than its appearance. For example:

  • Poor: <img src=" lab_sign.gif" alt="Sign hanging on lab door.">
  • Better: <img src="lab_sign.gif" alt="Each laboratory has safety policies posted on the door.">

Purely decorative images (graphics that convey no information), require a “null” or “empty” alt attribute. The null attribute is a signal to screen reader software that the image is unimportant and can be skipped.

  • Example: <img src="spacer.gif" alt="">

Captioning provides a synchronized text transcript of the audio for any type of multimedia so that the information can be read as well as heard. This alternate method of delivery is vital for including those with hearing impairments, but it is also beneficial for other users, such as those learning the language used in the video.

Captions can be combined into a video transcript. Because the transcript is searchable, users can locate a specific points in the video, and search engines will bring more traffic to your site.

For available captioning solutions, see Captioning Videos.

The term “color contrast” describes the differences in brightness and color between elements in a photograph or, more importantly for our purposes, text and a colored backgrounds.

Because color contrast is essential to the readability of documents, slide presentations, and websites, it is a key component of universal design. Some of your readers (an estimated 4% of the population) will have low vision. Others (approximately 8.5% of the population) will have some form of color blindness (also known as color vision deficiency), meaning they may have difficulty distinguishing red from green, or yellow from blue. Use the following techniques to help make your publications accessible to everyone:

  • Choose a color scheme that provides high contrast between the text and the background. If you have a dark background, the text should be light, and vice versa. (Black and white provide maximum contrast.)
  • Use larger text and simple (not ornate) fonts.
  • Use a contrast checking tool (online or downloadable) to determine whether your color selections are legible by a wide range of users. We recommend the Colour Contrast Analyser by the Paciello Group.
  • If you are building a webpage, check it with a color blindness simulation tool. Avoid the following color combinations as they are difficult to read, especially for individuals with color vision deficiency:
    • Green and red (or related colors)
    • Blue and yellow (or related colors)
  • Don’t rely on color as the sole means of conveying information. For example, don’t use color as your only method of indicating heading levels.
  • Text can be difficult to read on photographic or gradient backgrounds. Set text against a solid background when possible.
Verifying Contrast – Solid Backgrounds

How do you know which colors will have enough contrast to be universally readable? One approach, of course, is to play it safe and stick to black and white, which are the default colors in applications like Microsoft Word. But color is an important—some would say essential—design element of slide presentations and the Web. So, which colors are best?

When text is placed against a solid color background, we recommend you use the Colour Contrast Analyser (CCA) by the Paciello Group to determine whether the contrast ratio passes the WCAG 2.0 standards. This free tool helps you “determine the legibility of text and the contrast of visual elements” using color contrast criteria established in the Web Content Accessibility Guidelines (WCAG) 2.0. The tool also simulates certain visual conditions, including dichromatic color-blindness and cataracts, to demonstrate how your web content appears to people with less than 20/20 vision. Use the CCA eyedropper tool to select foreground and background colors. The results display immediately below.

In the following example, we’ve run the CCA on a website designed with orange headings, gray text, and blue link text.

website with poor contrast between headings and background

For this website, the CCA reports insufficient contrast between orange text and the white background. You would want to select a darker orange color from the drop-down color palette.

Colour Contrast Analyser, showing insufficient contrast between orange headings and white background

When we check the gray text against white background, the CCA shows mixed results. This color combination passes at the "AA" standard, but not the more stringent "AAA" standard, which is the goal for most university and public websites. A darker gray would be better.

Colour Contrast Analyser showing mixed results with gray text on white background

Finally, we test the blue link text against the white background. This combination of colors fails both the “AA” and “AAA” standards for normal text sizes, as well as the “AAA” test for larger sizes. It passes only the “AA” standard for large text. A darker blue is required for universal readability.

Colour Contrast Analyser showing failure with blue colored link text on a white background

Verifying Contrast – Photo or Gradient Backgrounds

The Paciello Group's Colour Contrast Analyser and the WAVE Tool both assume that text is placed against a solid background. They cannot always account for text placed on gradient backgrounds or images. In Chrome, you can use the Color Contrast Analyzer Extension, which evaluates a page exactly as it appears in the browser.

This tool repaints the page so that you can see the edges of the text, and discover which text fades into the background. If there is an item that is not outlined, then the item does not have sufficient contrast. The example below shows a before and after view of the extension. In the 'after' view, only the text that is outlined in white has sufficient contrast. You can see that the white text fades into the lighter areas of the background photo.

Image with faded text before using the colour contrast analyser extensionImage with faded text after using the colour contrast analyser extension.

  1. Use tables for tabular data only, not as a framework for page layout.
  2. Keep tables as simple as possible, and try to avoid nesting tables inside one another.
  3. Add captions to tables using the <caption> tag. A caption will typically provide an adequate summary of the table’s contents. Complex tables may need a more detailed explanation using the <table> tag’s “summary” attribute.
  4. In the header row of the table, replace <td> (table data) tags with <th>(table header) tags to indicate the special function of those cells as column labels.

The WAVE tool is an automated checker that looks for potential accessibility issues on a webpage. The tool should be run on each page.

WAVE Tool: Summary Report

The first screen you see is a general report of all features that could affect accessibility on the page.

WAVE Summary

To look in more detail at report, click on the Flag icon. You can click on each flag to see where the potential problem is.

  • Red flags (errors) - these require attention
  • Yellow flags (alerts) - these require a manual check. The feature may not be a problem.

WAVE red and yellow flags

Outline View

Click on the outline view icon to see the structure of the page. You should see an outline of the content with properly nested headings.

WAVE outline view

Contrast Tab

Click over to the contrast tab. Although color is important for visual appeal, it is necessary to adjust colors to eliminate these errors for users with low vision or color blindness.

WAVE Tool contrast error report