Skip to content
Colorado State University

Information Technology

IT Services

  • IT Services Overview
  • Purchasing & Surplus
  • Software
  • Computer & Device Support
  • Computer Replacement Program
  • Security
  • Guides

Web Services

  • Web Services Overview
  • Design Process
  • Site Managers
  • Site Manager Introduction
  • Web Governance
  • Guides
  • Forms

Remote Resources

Resources for remote teaching and working.

Remote Resources

Guides

Search our self-help guides.

Self-Help Guides

Support

Reach out to us to get support.

Request Support

A College of Liberal Arts Division

Accessibility: Example Page

Home » Accessibility » Accessibility: Example Page
Last UpdatedNovember 25, 2019
Table of Contents
  1. Headings
      1. Improper Heading Level
      2. Another Heading Level
  2. Images
    1. Content Image
    2. Background Image
  3. Color
  4. Links
    1. Has No Context
    2. Has Context

Headings

Headings should be used to create an outline for the content found within the page/post.

Improper Heading Level

The above heading was improperly used because it skips from the "Headings" heading level 2 to a heading level 4. This heading should be a heading level 3, and then if the size/format doesn't look right it should be modified via CSS (though this has generally already been addressed by the site theme).

Another Heading Level

The above heading is actually used correctly because it is the same level (one level lower would have been acceptable too) as the heading that precedes it, thus it didn't skip a heading level.

Images

Content Image

molten glass pouring into mold

The above image has no alt attribute describing the content of the image. All content based images, with no adjacent text describing the picture, need an alt attribute.

Background Image

The above image is a background image that should be used purely as decoration (design) and thus needs no alt attribute and in fact cannot have an alt attribute.

Color

The heading above (being 18px or larger, or 14px or larger and bold) must have at least a 3:1 contrast ratio.

This text, being small/regular sized text, must have at least a 4.5:1 contrast ratio.

There are times that placing text on top of an image is necessary as part of the design, however adequate contrast between the text and the image must be ensured.

The contrast between this background image and this text is not adequate.

Note that the Accessibility Checker did not flag this for inadequate contrast because it's comparing the text color with the light gray background color, so always double check text on top of images and use your own judgement.

Generally speaking web accessibility compliance tools will not properly check for adequate contrast between text and a background image so your own best judgement must be used.

There are times when a different image must be used or an overlay may need to be added on top of the image to increase contrast.

Note that the Accessibility Checker also didn't flagged this text as inadequate contrast because the text color was set on a parent element (and therefore inherited).

Links

Has No Context

It's common to need to place links inline within text, however the link text must make sense outside of the context of the surrounding text, such as click here.

Has Context

Instead the link text should have context on its own, such as read more in our Links Guide.

Related Articles
  • Accessibility
  • Accessibility: Audio & Video
  • Accessibility: Checklist
  • Accessibility: Colors
  • Accessibility: Example Page
  • Accessibility: Headings
  • Accessibility: Images
  • Accessibility: Links
Categories
  • Accessibility8
  • Web20
Tags
  • Accessibility7
  • Example1
Share on facebookShare on linkedin Post on x

Post Navigation

Previous

Accessibility: Colors

Next

Accessibility: Headings

  • Liberal Arts
  • FSAS Login
  • CLA Brand
  • CLAHub
  • CLA Help Desk
  • Apply to CSU
  • Careers
  • Equal Opportunity
  • Privacy Statement
  • Accessibility Statement
  • Disclaimer
  • Login
Colorado State University
© 2025 Colorado State University - College of Liberal Arts, Fort Collins, Colorado 80523 USA