Skip to main content

Basic Web Accessibility Testing

There are several ways to test your web page to see whether the content is usable by people with disabilities or those who access the internet in a less-traditional way.

The W3C has published several very good tutorials on writing accessible website code here: https://www.w3.org/WAI/tutorials/.

Keyboard only


Some people are not able to use a mouse and need to access your site using a keyboard. (For example, someone without use of their hands may use a mouth stick keyboard.)

Use the tab key to navigate through your web page

To Test

  1. Open the web page you want to test
  2. Press the Tab key to enter the page. You should see the first link highlighted.
  3. Continue pressing the Tab key to move to the next link, or Shift + Tab for the previous link.
  4. If you want to click on a link, press Enter or Return.
  5. If you have drop-down menus, make sure that you can open and close them with the keyboard.
    1. Drop-downs should close automatically when you tab to a link that is outside the menu.
    2. You can also enable the Esc key to close the menu.
  6. Pay attention to links that do not appear highlighted in any way when they are in focus, and links that are skipped altogether.

To Fix

  • If important elements are not reachable by tabbing, you can add a tabindex attribute (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex).
    • Browsers tab between links by default. If elements do not have a tabindex value, the browser will use the HTML source order to determine the order of tabbing.
    • Elements with a tabindex will be reached before elements without one.
    • Each tabindex attribute does not need to increment up (1, 2, 3, ...) . If there are several elements that have the same tabindex number, the browser will use the order of the markup to determine which item to highlight first.
    • If an element should not be reached via keyboard, you can add a tabindex attribute value of -1.
  • If you're working with a menu, the W3C has published information on making menus accessible: https://www.w3.org/WAI/tutorials/menus/.

Low Vision


People with low vision require text and background to have enough contrast that they can perceive the letters and words.

Make sure text has enough contrast to be easily read

To Test

To Fix

  • Update the CSS for text color and/or background color with colors that have enough contrast.
    • To find colors that meet the standards, go to https://webaim.org/resources/contrastchecker/ and enter your current text color and background color. Then use the sliders to darken or lighten them until the indicator says that they pass.

Screen Reader


Some people access your website via audio screen reader or refreshable braille display. This means that the text of a page is read aloud or represented using braille.

Make sure each image has an appropriate alt attribute

To Test

  • To test a specific image, use a browser inspector to make sure the image tag has an alt attribute
  • To test a full web page, use the WAVE tool browser plugin or go to https://wave.webaim.org/ and enter the URL you want to test. Pay attention to empty image link and missing alt text errors.

To Fix

  • Make sure each image has an appropriate alt tag.
    • If the image is meant to be visual content, the alt tag should briefly describe the relevant content of the image.
    • If the image is contained in a link, a screen reader will use the alt attribute of the image as the text of the link. The alt attribute should describe where the link will go.
    • If the image is purely for decoration and has no relevant content, the alt attribute should be set to an empty string (alt=""). Further markup is possible, described here:
      https://www.w3.org/WAI/tutorials/images/decorative/.

PDFs

In many cases, especially when publishing just text and images, it is better to publish web content in web pages rather than in PDFs. But if you do need to publish a PDF on the web, Adobe Acrobat DC includes accessibility tools to make PDFs more accessible.

Instructions for Making PDFs Accessible (accessible PDF)

Videos


Video content needs to be captioned, whether it's on a site owned by the university or posted to another platform like YouTube, Vimeo, Facebook, or Twitter.

If you upload your video to YouTube, it can automatically add captions. See
https://support.google.com/youtube/answer/6373554?hl=en

Here are some more options for captioning your video:
https://photography.tutsplus.com/tutorials/3-ways-to-subtitle-and-caption-your-videos-automatically-using-artificial-intelligence--cms-26834

General Testing


The WAVE tool tests for compliance with web accessibility guidelines. A page can be tested by going to https://wave.webaim.org/ and entering the address of the page you want to test. You can also install browser extensions in Chrome and Firefox to make testing easier.

WAVE Tool
WAVE Tool Browser Extensions