Our Accessibility Roadshow post by Anthony Vasquez discussed raising awareness about accessibility. At the roadshow, Anthony demonstrated how he uses the web via a screen reader. When people see the impact of an inaccessible website, they “get it”. They understand why accessibility is critical. That’s an “aha” moment.

You don’t need special equipment to do a mini check of your site. By learning a few basic techniques you can provide an “aha” moment to others. I will provide a few simple tests to help you uncover accessibility issues. It is not a complete review but will find some of the potential problems. Next, go show others so they understand the barriers encountered on your site. You can create their “aha” moment.

Keyboard

Were you aware that you can navigate the web with only a keyboard? A person who cannot operate a mouse due to blindness or mobility impairments relies on the keyboard to navigate the computer. Give it a try. Use the following keys to navigate:

  • Tab and Shift-Tab Press the tab key to move the focus forward to each interactive element. These include buttons, form controls, and links. Use Shift+Tab to navigate backward.
  • Space Pressing space or enter activates the currently focused button or checkbox.
  • Enter Pressing enter activates the currently focused link, button, or other control.
  • Arrow keys Using the arrow keys will scroll the page or interact with radio, sliders, and other controls.

Practice using the keyboard on an accessible website. Knowbility or the World Wide Web (W3C) Web Accessibility Initiative sites are good examples. See our post on Keyboard Testing Basics for more details. Then try to navigate your own site.

Visible Focus

When you tab through the site you should see what item has focus and is active. Or, does nothing seem to happen as you press the tab key? If so, chances are you are navigating on the page but can not tell what item has focus. Unfortunately, many site authors turn off the default focus indicator. This makes it very difficult to navigate with only the keyboard. To use the keyboard you need to know what item has focus. How can you enter data into a form if you don’t know what field has focus? It becomes a game of chance to find and activate a link. If your site did correctly show focus, try to find a site that does not. Go to a local newspaper site and use the keyboard. These types of sites often have no focus indicator. Can you navigate?

Lack of visible focus and poor keyboard support are common issues on many websites. Pick a task to complete on your website. It may be finding information about a specific topic or buying an item. Try to complete this task using only your keyboard. Can you do it? Challenge the accessibility skeptics in your organization to try the same task. Prove to them why keyboard accessibility and visible focus is important. Take the no mouse challenge!

Do you have a large navigation menu at the top of the page? Count how many tab presses it takes to reach the main content. Imagine you had to tab through the entire navigation each time you visited the page. Wouldn’t it be great to skip all that? Pick a task that requires navigating through the entire menu. Show others. Send your designers and developers to our posts Skip Links are Important and Skip Links Design Showcase to learn more.

Multimedia

If you have media on your site here are a few things to check:

  • Does your site have videos or audio recordings? Make sure they don’t start playing right away. This is very distracting, especially for someone using a screen reader. The sound from your media will drown out the screen reader and make it very difficult to navigate.
  • Can you start and stop the media without the mouse?
  • Turn off the sound on your computer. Are there captions for the video?
  • Can you turn captions on and off using only the keyboard?
  • Is there a text transcript for an audio only recording? What about a video with text or visuals only and no soundtrack?
  • Cover the screen while the video plays, do you know what is happening?

The reason and impact of the media is lost if people can’t access it. Show people why captions, audio descriptions, and transcripts matter.

Moving Content

Carousels are all the rage. These are blocks of content that scroll across the page one after the other. How can people focus on your content if it is moving?

  • If your site has a carousel with text, try reading the text out loud and pausing between each word. Can you finish reading before it scrolls out of view? People with cognitive and/or learning disabilities may need more time.
  • Using the keyboard only, can you access any links within the content before it moves?
  • Can you stop the moving content? There must be a mechanism to stop the moving content that works via the keyboard.

Give a presentation to accessibility skeptics with a carousel displaying behind you. Provide some detailed information, then ask the audience a question about it. It is likely the carousel will distract them and they won’t be able to answer. If that doesn’t convince them that carousels can be a problem, send them to should I use a carousel. Don’t distract your website audience.

Test and Share

Use these 5 simple techniques to test your website. You won’t find all errors but it is an important start. When you find an issue, show it to others. Demonstrate how you cannot achieve the main function of the website because of one of these issues. No matter what the task, if there is no or broken keyboard support, some users won’t be able to complete it. Show how the video message is lost for people who can’t see or hear it. Explain how carousels distract and cause frustration. Download our Create your own AHA Moment PDF worksheet. Learn these simple tests, demonstrate the problems to others. Spread accessibility awareness and “aha” moments to all.