Skip Navigation
Search

OU Campus Support Site

Version 2 Responsive Templates

Accessibility Checklist

Here are some basic things you can do to ensure that your website is accessible.

Use Accurate Page Titles

Web pages need to be properly titled to indicate that the user has moved from one web page to another. For users of assistive technology, it is often only the page title that indicates when they have moved from a one page to another in the same site. Pages must be uniquely titled to describe the purpose or topic of the page.

Use Proper Heading Structure

Logical and sequential use of 'Headings' (using tags like H1, H2, H3 etc.) is essential. Assistive technology users often navigate a website through its headings and links. It can be confusing if the headings are not in a logical and sequential order, or if the links do not have appropriate names. Headings and labels should be used to describe a topic or purpose, and not just for text formatting.

A Quick Example

The heading above is an <h3>. This is the right heading to use, since the heading preceeding in this section is <h2>, and the page heading at the top is <h1>

Use headings in order, as you would envision a hierarchical list:

  • <h1>
    • <h2>
      • <h3>
        • <p>
      • <h3>
        • <p>
    • <h2>
      • <h3>
        • <p>

Alternative Text for Images

Provide alternative text (alt-text) or a description for every image or graphic. In OmniUpdate, when you place an image, you MUST fill in the description field or else you will get an error message reminding you to do so. The description text should be as accurate as possible. Screen readers, used by the visually impaired, will use the description text to describe what the image is.

Read more about how to create good alt text for images

Provide a Text Equivalent for Non-Text Elements

If you have an infographic, make sure you have a text equivalent of that graphic that does not rely in visuals to convey information. For smaller on-page graphics this can be done with alt text. For larger or full-page infographics, link to a separate page.

Use Descriptive Link Text Instead of 'Click Here'

There's no clicking on a mobile device, and you provide a better user experience by using calls to action or descriptive text in your links. Also, users with screen readers will be required to open every 'click here' link to determine the content of those links.

So instead of 'Click Here' use text like:

  • Browse all events
  • Explore academic programs
  • View the 2017 Gala photos
  • Sign up now!
  • Register today

For more information, see our content guidelines on button and link text.

Use Clear and Simple Language

Web users typically scan for  information and come to your website with a specific task in mind. When developing your site’s content, know your audience and keep your users’ tasks in mind while using clear and simple language to help them accomplish their objectives.

Read more at Usability.gov

Provide Contrast Between Text and Background Colors

Ensure plenty of contrast between the foreground and background colors. Dark text on a white or lightly colored background is recommended, and using text over a background image should be done with care.

Use the WebAIM color contrast checker

Use Responsive Data Tables

If you need to display content in a data table, make sure you use the responsive data table property, which uses the <TH> tag to represet a tabular heading, and the <TD> tag to represent tabular data.

Learn more about working with tables and editing data tables.

Be Accessible on Social Media

Accessibility protocol extends beyond your website to your soclal media platforms as well, particularly concerning images.

Make sure you use "alt text" in Twitter images and adjust your accessibility settings to enable alt text. For Facebook and Instagram, make sure your post includes descriptive text of the images you post. When posting videos on YouTube or Facebook, make sure the videos include closed captions.

Learn more at our Social Media Guidelines page.

Login to Edit