Basic Web Accessibility Testing - Developer Skip to main content
Developer Portal

Basic Web Accessibility Testing

Testing and remediation for websites, courses, and other web content to align with the BYU Web Accessibility Policy and University Web Accessibility Guidelines.

There are several ways to many ways to help ensure content in your web page or online course 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/.

Contents

General Principles and Priorities

  1. If you're just getting started, an easy place to get going is to fix the errors identified by automated testing tools. These usually represent things that will be inaccessible (rather than just inconvenient).
  2. Automated testing is not enough. It should be coupled with targeted manual testing.
  3. Fixes to a template or theme are better by far than fixes to an individual page.
  4. While template fixes are ideal, it is important to train everyone who will be creating content. Everyone should at least know how to
    1. write accessible links,
    2. format accessible PDFs, and
    3. upload accessible videos.

Keyboard Testing

Keyboard testing may be the most important manual testing you can do, and should always be a part of your accessibility evaluations.

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.) Keyboard testing also helps you identify issues that could arise for screen readers.

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/.
  • If you don't see a highlight at any time, you probably have an element that is focused but not visibly highlighted. There's good advice on diagnosing and fixing the problem in this CSS Tricks article, "Focusing on Focus Style".

Test keyboard navigation on the mobile version of your site—especially the menu

In addition to those who use a site in their mobile device, many people also zoom into a website with their desktop browser. This can change a responsive website's display so that it uses a mobile layout (and a mobile-style menu) instead of the regular desktop design. Mobile menus can cause particular issues for keyboard navigation.

To Test

  1. On your web page, zoom in with your browser until it changes to the mobile layout (this is assuming you have a responsive site). This can usually be done using the View menu, or using key commands (such as cmd/ctrl +).
  2. Use the tab key to navigate until your mobile menu trigger is highlighted. Press enter.
  3. The mobile menu should open and the first item should be highlighted. If it is not, press tab and look to make sure the first item is highlighted.
  4. If your menu has multiple levels, use the tab key to navigate to them and press enter to open them. Press enter again to close them.
  5. If your menu is very large, make sure a user doesn't have to tab through everything to get through the menu.
  6. Tab through the entire menu, and press tab again. The menu should close and the focus should be back on the regular page content.
  7. You can also check to see that the Escape key closes the menu when focus is in it.

To fix

As you see above, there are lots of ways that the menu can go wrong. It will likely require Javascript fixes for the particular problems that you experience.

Automated 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.

Automated tools like this work well to a point, but should not be used in isolation. The UK accessibility blog describes it this way in the article, "What we found when we tested tools on the world’s least-accessible webpage":

A good analogy is to think of a testing tool as like using a spellchecker. It can certainly help you pick up issues, but it should never be used in isolation. To be most useful, automated tools should be combined with manual inspection and user research.
accessibility.blog.gov.uk

So feel free to use those automated tools, but don't forget to employ the other techniques listed on this page!

WAVE Tool
WAVE Tool Browser Extensions

Contrast Testing

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 Considerations

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.

Article: How to create content that works well with screen readers (gov.uk)

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/.

Make sure links are descriptive

It is common for screen readers to announce hyperlinks without their surrounding context. This means that link text like "click here" or "read more" become very ambiguous.

To Test

  1. The keyboard navigation testing described on this page can help with testing. Use the tab key to navigate through your web page.
  2. For each link you encounter, make sure it would be clear where the link will take you, even without surrounding context.

To fix

  • In many cases, a link can be fixed by either rewriting the text to be more clear, or just making more of the surrounding text clickable.
    • Example 1: text that says "see the article about web accessibliity" could easily be changed so the link text is expanded, "see the article about web accessibility".
    • Example 2: A button below a set of news articles that says "More" and leads to the main news page could be changed to say "More news" or "All news".
    • Example 3: Some links, while not descriptive, may be repetitive. A card may have the title that links to a page, along with a button that links to the same page. If the title is descriptive, there's no need for a user to hear both links.

Reduce or eliminate duplicate links

You can imagine that it would be frustrating to hear links over and over again when navigating via screen reader. Automated tools will sometimes alert you to duplicated links, but it's best to do a manual check as well.

To test

  1. Use the tab key to navigate through the links on your website
  2. Take note of the links that go to the same place. Cards or icons with text below them are common culprits.

To fix

  • If a link is not needed, it can be hidden from screen readers by changing the tabindex attribute to tabindex="-1"

Accessible 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)

Accessible 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