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 page featuring different content 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.

Note that text which is bolded or italicized would be read as plain text, and does not provide the structure that you see on screen. Headings and labels should be used to describe a topic or purpose, and not for text formatting. Design your headings as if you are creating an outline for the page. The page should begin with an h1 that matches your page title and main topic. Read more about accessible semantic structure.

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 (or alt-text) or a description for all informational images or graphics. 

In Omni CMS, when you include 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. 

Alt text describes the content of images, graphs and charts in a way that makes sense to users employing assistive technology such as screen readers. Alt text should answer this question: What is the content conveyed by the image?  

Tip: When including an image, always consider how the page would appear without the embedded image. Is the user receiving the same information that s/he would if the image were visible? 

Note: Purely decorative images, which don’t add information to the content of a page, should not be described in alt tags. However, such images must be provided with null (empty) alt text (alt="") so that they can be ignored by assistive technologies, such as screen readers. The W3C alt text decision tree can assist you in determining if the image is decorative.

Read more about how to create accurate 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'

Link text and button labels such as: 

• “Click here”
• :”Read more”
• “Register” (by itself)

Should not be used. 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 a Minimum Contrast of 4.5:1 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 to verify that your contrast is accessible. Read more about Color Contrast.

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. Tables should never be use strictly for visual formatting.

Ensure That Your Site is Accessible Aia the Keyboard

Disconnect the mouse, cover the trackpad, and work your way through your entire site.

• You must be able to activate all links and controls via the keyboard. 

• Tab through the page and make sure that the tab order is logical and that you can see the keyboard focus.
• Make sure that you do not encounter any keyboard traps.

Ensure That the Visual Presentation of Content is Accessible

• Do not upload images of text, if the same information could be represented as text. 

• If text is bolded or color is used for emphasis, you must indicate the emphasis in the language used.

• Instructions must not rely on color, shape, or direction as the single method of indicating action.

• The page must still be readable, and functional, when text size is doubled or zoomed to 400%.

• No content on the page can flash more than three times in one second.

• Content that automatically blinks, or scrolls for more than 5 seconds must be able to be paused via the keyboard.

Provide Accessible Multimedia

• All publicly facing videos must contain Close Captions that reflect all audio information, including sound effects or music, and identify speakers

• If the video  includes visual information that is not communicated in the dialog, you must provide a described video.

• All publicly posted audio/podcasts must be published along with a transcript.

Be Accessible on Social Media

Accessibility protocol extends beyond your website to your soclal media platforms as well, particularly concerning audio and visual content.

Make sure you use "alt text" in Twitter images and gifs you post on  Twitter, Facebook, and Instagram. When posting videos on YouTube, Facebook, or Instagram, make sure the videos include closed captions and audio descriptions.

Learn more at our Social Media Guidelines page.