Quick Non-technical Accessibility Tests

You have been asked to:

  • Purchase some information technology (IT)
  • Install some IT in Canvas
  • Assess some IT
  • Distribute some IT document widely

For all these cases, you can partially evaluate the accessibility of the IT with quick non-technical tests.

1. Do a Quick Keyboard Test

Some of your users will only be able to use the keyboard to interact with the IT. Let’s test as them. Put the mouse away!

Navigate through the controls (links, buttons, form elements) of the IT using only the:

tab key to go forward from control to control
shift + tab keys to go backwards.

  • Does each element have a visual focus indicator (e.g., a dotted line or color change) to indicate it is currently receiving focus? Does this focus indicator have good color contrast with the background?
  • Can you travel to every element that looks like it should be a control (link, button, menu, etc)?
  • Does the travel pattern you are making go from top to bottom and left to right?

Bonus Points

Give the following keys a try.

  • enter
    use this to trigger a currently focused link or button
  • spacebar
    use this to trigger a currently focused interactive element (dropdowns, buttons, checkboxes, etc.)
  • up / down arrows
    use these to navigate menus, choose radio buttons, adjust number inputs 
  • right / left arrows
    use these to navigate menus, adjust sliders, etc.
  • escape
    use this to close menus and dialogs

Also look for keyboard traps. These are situations where you can get into an element using keyboard commands but can’t get out. For example, you might be able to access a pop-up window with keyboard commands, but encounter a keyboard trap when you try to close the window and return to the main page.

2. Do a Quick Visual Inspection for Contrast

Some of your users will have a variety of low vision problems. Let’s look at the IT through their eyes.

  • Adjacent color combinations (often text color and the background color on which it sits) must have sufficient contrast to be seen by users with low vision (the U-M standard is WCAG 2.1 AA). If you spot any instances on screens that may have poor contrast, they probably are a problem. The Colour Contrast Analyser (CCA) is a useful free checker tool, particularly for web pages that are not yet posted online. CCA lets you use “eyedroppers” to choose text (foreground) and background colors to compare for contrast.
  • Look also for places where color is the only means used for conveying meaning: this will represent problems for color blind users.

Bonus Points

Verify your suspicions. Compare foreground and background. The more you do this the better you will get at spotting bad contrast issues without resorting to actual analysis.

You will need to install a color picker utility called ColorZilla in your browser, ColorZilla for Chrome and ColorZilla for Firefox.

With it, you will pick the foreground and background color values and use the WebAIM Contrast Checker to examine the contrast ratio between them. See a screencast on analyzing contrast.

Have Your Browser Simulate Low Vision

You will need to install a low vision simulator in your browser (Web Disability Simulator for Chrome).

Removing color from your IT is probably the easiest way to spot problems. See a screencast on how to simulate low vision.

3. See If the View Can Be Zoomed Without Loss of Meaning or Functionality

Increase the size of your page to 200% (Control + for Windows or Command + for MacOS) and check that:

  • All functionality is still available
  • There is no horizontal scrolling (except as required by tables)
  • Side by side columns will stack one on top of the other
  • No content is hidden

You can use Control - or Command - to resize things back.

4. Check to See That Links are Visually Distinguishable and Clearly Worded

  • Take a look at the links in the page. It should be clear that they are links even without the color (e.g., are they underlined?). Imagine them as the same color as the surrounding text. Can you still tell they are links? If not, people with colorblindness may not be able to either.
  • Does the text of the links describe what will happen when they are activated? In other words, do you have enough information from the link text alone to decide if you need to activate it? A good way to test for this is to construct a mental list of the links. Is each item in the list descriptive enough?
    • Bad examples: "click here", "this article"
    • Good examples: "more about synchronicity", "how to build a trebuchet", "the BBC home page"
  • Are all the link names on the page unique if they lead to different destinations?

5. Be Sure That Text is Legible

Check to see that:

  • Simple and common fonts are used
  • Text is left-aligned and not justified
  • Bold, italic and capitalized text is used sparingly

6. Check to See if Text is Understandable

There is a bit of subjectivity to this, but you should trust your intuition and decide if the text and the control labels are clear and intuitive to your intended audience. If the IT you are examining is critical, you might want to use a text analysis tool to back your conclusions. We recommend the Readability Formulas Readability Checker.

If you are examining a Word document, the application itself performs a readability analysis. See how to get your Word doc's readability and level statistics.

7. Check That Views are Titled and the Title Describes the View

Does the title of the page describe clearly and succinctly what the page is about? Take a look at the name of the tab - that is the title. If it is truncated, it may be because you have a lot of tabs open. Open the page in a new window to see it in full.

As you navigate through the IT, does the title change to reflect the new content?

8. Check Forms to See if Elements Have Logical and Visual Labels

Form elements usually have visible text near them to inform the user what the form element is asking for. Think of a login form: the labels will be “user name” and “password”, for example. Are the labels logically associated with the elements?

A simple test is to click with your mouse on the text label. If the corresponding form element reacts to the click then there is a logical relationship.

Element Clicking on the label will…
Text input (small or large), password fields Make a cursor appear inside of input
Pick list (or drop-down list) Pass the focus to the pick list. Some browser/framework combinations do not show a highlight on pick lists. Test if it has focus by using the arrow down key. If the list is displayed, it has focus.
Radio and checkboxes Select or un-select the radio or checkbox

9. Check for Non-interfering Elements

There are three situations where certain page features might block individuals from using the rest of the page. All of these are easy to spot and test:

  • Audio Control. Is there any element on the page that automatically plays audio for more than three seconds? If so, it is compliant only if it can be turned off, paused, or have its volume level controlled. 
  • Flashing Items. Is there any element on the page that flashes quickly (e.g., a large strobing emoji)? This could cause seizures for individuals with photosensitive epilepsy.
  • Moving items. Is there any element on the page that conveys a sense of motion--e.g., a carousel? If so, it is compliant only if it can be paused, stopped, or hidden, or if it is essential; e.g., a page update.

10. Check for Alt Text

Images are used on websites for a variety of reasons:

  • Decoration
  • Branding
  • Augment text information
  • Chart or graph
  • Image-links (an image that acts as a link to a new page)

Non-decorative images (including images meant to connect a user with a brand, theme, or message) should have a text alternative for each image. The most common way to provide these on websites is through “alt text” (or alternative text). Alt text is text information attached to images that is not visibly apparent on a webpage for most sighted users.

You can check for alt text by right-clicking or two-finger touching on an image on a webpage and selecting “inspect element.” This allows you to view the code on a website. The image (or “img” tag) should include an “alt attribute (or “alt” attribute), enclosed in the corresponding img tag. Alt text should be present, unless the image is purely decorative, and alt text should describe the image within the context it appears.

Bonus Points: Take a Look at the IT with a Semi-Automated Tester

Each of these tools will provide you with a lot of details - for the purpose of a quick test it will be enough to know if there were any errors.

We recommend: