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.

Headings are used to create an outline, or table of contents, that helps users to navigate the content more efficiently. You can apply the concept of headings in almost every kind of electronic content, including 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

Your links should make sense when taken out of context:

  • Links such as “Click here” or “Read more” are not helpful to users who cannot see because the links are often heard in a list, not inline with the text.
  • "Read more" doesn’t tell you where the link goes, and there may be more than one on the page.
  • Links beginning with http://... are difficult for anyone to read, and especially cumbersome for someone who is listening to the page.

On the other hand, links such as “Declaration of Independence” and “Thomas Jefferson” are helpful because they tell you where they're going, and they're 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 difference between text and the background. Low contrast affects readers with low vision and color blindness.

Tips for Color Use
  • 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.)
  • Avoid the following color combinations:
    • Green and gold from the CSU brand should not be used for text (use this combination for decoration only).
    • Green and red (or related colors)
    • Blue and yellow (or related colors)
  • Use larger text and simple (not ornate) fonts. Sans serif fonts are preferable.
  • Use a contrast checking tool. We recommend the Colour Contrast Analyser by the Paciello Group.
  • If you are building a webpage, check it with a color blindness simulation tool.
  • 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
Installing the Colour Contrast Analyser (CCA)

When text is placed against a solid color background, we recommend you use the free Colour Contrast Analyser (CCA) to determine whether the contrast ratio passes WCAG AA standards.

On the download page under Assets:

  • For Mac, download the CCA-3.0.1.dmg file
  • For Windows, download the CCA-Setup-3.0.1.exe file

Download page with .dmg and .exe options

Using the CCA

Use the eyedropper tool to select foreground and background colors. The results display immediately, showing either pass or fail for both AA and AAA standards. 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

There is insufficient contrast between orange text and the white background. To find a different color with sufficient contrast, you can use the drop-down menu or insert hex codes. 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

AA vs AAA

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