If you have found this page, you must be looking for a way to ensure the content you put online is accessible. Congratulations. In this post, I will show you some quick tests you can do to accomplish this.
The Quick Test
Most websites developed without accessibility in mind will have the same key issues. My post, The Top 5 most Costly Accessibility Issues, explains these in detail. I have provided a summary for these below.
Start the quick test by checking the experience against these five issues:
- Not including text alternatives for non-text content, or implementing this the wrong way.
- Not including a document structure described with headings, or doing this the wrong way.
- Not allowing all the website content to be accessed through the keyboard alone.
- Including forms that are difficult or impossible to submit for a user of assistive devices.
- Including forms that do not provide helpful or accessible error messaging if they are filled out incorrectly.
Tests 1 & 2
Use an automated tool like the WAVE toolbar to conduct the first two tests. Install an accessibility toolbar like the WAVE toolbar on your browser. The one I have linked to is for the Chrome browser. Click the "WAVE" icon in your browser's toolbar to test your page. The results will appear in a tab on the left of the page, and any issues on the page will be highlighted.
The errors panel will look like this. Hopefully your page won't have as many errors as the New York Times website does!
The first tab shows you a summary of the types of errors found on the page. There are some other tabs in the results that you can explore. The second tab is the most helpful, as it provides details on page issues.
Using the WAVE toolbar gives you a summary of the type and severity of accessibility issues on the page. The New York times example shows that one of their top issues is marking up images properly. They persist in including images without alt attributes. This is one of the issues from our list of the top 5 issues experienced by websites.
Using the WAVE toolbar also allows us to see at a glance if certain features exist on the site. For example, websites should have a semantic structure that employs headings. Running the WAVE test highlights page headings so that we can examine the page's document structure.
The WAVE toolbar results show that the New York Times does have a proper heading structure. That's great.
Moving on to quick test number three. Test number three is to navigate a "happy path" using just your keyboard. Try to complete some standard behavior on the website using just your keyboard. A "happy path" is a default scenario for a web experience. For example, for a website that sells products, a happy path might be:
- Navigating to a product listing page (e.g. Women's > Dresses),
- Selecting a product to explore the product details page,
- Adding it to your cart, then
- Attempting to check out.
Another happy path might be registering for a site or logging in. Test the critical happy paths first. The key here is that you test using your keyboard alone. Do not use your mouse. If you need to use your mouse to complete an action, this is an issue.
The key here is that you test using your keyboard alone. Do not use your mouse. If you need to use your mouse to complete an action, this is an issue.
After testing the happy paths, try using some of the following common website components that are usually inaccessible by keyboard:
- Image carousels
- Video players
- Global navigation menus, especially if they are "flyout" menus
Doing these quick assessments will give you a general idea of what kinds of problems keyboard users will face.
Tests 4 & 5
The fourth and fifth tests are easily done by finding a form on the site. Try finding a registration form or a contact form and do the following tests:
- Turn on your screen reader (on a mac, that is command + F5 to turn on VoiceOver) and see if the field's label is announced when the field has focus.
- If you don't have a screen reader, do a WAVE test on the page. The WAVE test will tell you if a field is not associated with it's label.
- Try submitting the form with your keyboard when you have left out one of the necessary fields. Do you hear the error message when you submit the form? Does the form field with the issue get the keyboard focus?
Once you have tested a website against these top 5 issues, you should have an understanding of how accessible it is, and some ideas to make it more accessible.
It's important to start somewhere, because it's important to start! See the next article in my series, coming soon, on how to perform an in-depth accessibility audit.
Let me know in the comments what other things you do for a quick accessibility audit.
It's important to start somewhere, because it's important to start!