How do I know if my site is accessible?

There are a few ways to make sure that your website is accessible. Some accessibility issues can be identified through automated checkers such as the page check in Omni CMS. Others must be identified by manual checks.

Automated checks

Automated checks in Omni CMS are primarily for issues that can be identified at the code level, such as:

  • making sure that headers are nested properly
  • making sure that images have alternate text (alt tags)
  • making sure that tables have defined table headers

An automated checker in Adobe Acrobat can also check for accessibility issues in PDFs.

Manual checks

Some items needs to be checked via human interaction, such as:

  • making sure that all the content on the page can be accessed using the keyboard
  • making sure all the text is readable and has approrpriate color contrast
  • making sure images that include embedded text also include that same text in alt tags
  • making sure that embedded or linked videos have captions

Checking your pages

Omni CMS page check

Omni CMS includes a built-in page check that checks for spelling errors, broken links, and accessibility issues.

Adobe Acrobat

Adobe Acrobat provides tools for checking PDF files for accessibility issues.

Resolving issues

Headers

Having "properly nested headers" means that the order of headers on the page is logical. Think of using headings as if you are creating an outline or table of contents on your page to help visitors find the information they are looking for.

Adding headers

Headers can be added by selecting text and choosing the appropriate option from the drop-down in Omni CMS:

Screenshot showing heading selection options in Omni CMS

Headers serve a functional purpose in navigating pages and in providing information to search engines.

  • Do not use headers simply to format text to be larger, bold, etc.
  • On most websites, heading 1 is used for the page title and should only be used once per page.
  • Headings 2-6 may be used as many times as necessary per page, as long as they are in the correct order.
  • Following the page title, the next header used should be heading 2. Following heading 2 would be either another heading 2 or a heading 3, and so on.
  • Do not skip headings. For example, do not follow heading 1 with heading 4 without heading 2 and heading 3 between.

Navigating pages

Remember, not all website visitors are able to use a computer mouse.

A simple way to test how easily your pages can be navigated and to make sure that all the page content is available via keyboard is opening your page in a browser window and using the "tab" key on your keyboard to move through the page. As you use the tab key, you should be able to move through the page in a logical order without jumping randomly from one spot to another. You should also be able to access all of the content on the page, including content in accordions or other interactive elements using the keyboard.

Images and graphics (charts, etc.)

Embedded text in images should be only very rarely used, and only when there is no alternative solution — contact WMS for help when needed. 

Images should never be the only way that information is conveyed. Not only is it not mobile friendly because images generally resize to fit the device size, which means that text on images will get smaller on mobile devices, it's also unfriendly to search engines because they cannot extract text from images to report in search results, and, of course, it is not friendly to screen readers.

Complex graphics such as charts and graphs also require descriptive text. Depending on the complexity of the graphic, descriptive text can added as an alt tag, as text alongside the graphic, or via an external linked file.

Tables

Tables should not be used to align content or configure a page layout. Tables have a specific purpose for conveying data in columns and rows.

Tables are one of the most complex page elements, and can be difficult to screen readers to interpret. Adding tables to a page requires thinking carefully about how the content in the table is associated and structuring the table in the simplest way possible. Tables should include defined table headers and descriptive captions.

PDFs and Word docs

When PDFs and Word documents aren't created with accessibility in mind, they can have many of the same issues as websites, including problems with navigating through the page, improperly nested headers, inadequate color contrast, and missing tags.

Color contrast and font size

Remember, even if a visitor is not blind, they may have vision impairment or color blindness that makes certain fonts, text sizes, or color combinations difficult or impossible to see.

  • Use the WebAIM color contrast checker by copying and pasting your background and text colors to see if they meet WCAG AA color contrast requirements.
  • Contact WMS for assistance with finding accessible color options.

Videos

Not only are captions vital for those with hearing loss or deafness, they are also useful for visitors who are viewing videos in noisy environments, or when visitors may need to keep audio muted.