WCAG Tests: Step 2 of 5 Toward Web Accessibility Compliance

Step 2: Preliminary WCAG Tests and Checks

Now that your web accessibility statement is published, it’s time to get your hands dirty. We are going to take you through some preliminary checks. This is where we break the news to you that there isn’t a WCAG Checker or WCAG Validator out there that can guarantee your site is WCAG Compliant. WCAG checkers, whether paid or free, can tell you if you are missing meta titles, descriptions, image alt text, or proper headline structure; but they can’t determine if the image alt text in place is accessible. Only a human can do that. It’s going to take time to ensure the site has it all right. With that said, let’s get started on some preliminary checks.

Is everything focusable and actionable using a keyboard?

Keyboard only users need to be able to see where the “focus state” is on a page. Mouse users have an advantage and can move the mouse around the page, or see the arrow turn into a hand when they are on an actionable item. For example, sometimes an element has a hover state or changes to indicate it is clickable – for example an underline appears under a link or text becomes larger. Using only your keyboard, visit your website and use the [Tab] button to scroll down the page. Can you tell where your tab is focused, in other words, do you know where you are on the page? Next, use [Enter] to access a field or enter the next page. When going through this exercise, make note of:

• Page elements or content areas that are skipped
• Ability to focus on elements like links, search bars, calendar widgets, etc.
  • Can they be focused on and used without a mouse?
• Navigation elements
  • Are you forced to go through every drop down in the navigation before getting to the page content?
• Logical focus order
  • As you tab through the content, does the focus order follow the visual order of the content?
  • Some screen reader users experience a common error when a website’s navigation is updated but focus order isn’t. Let’s pretend we added a page on our navigation drop-down and when selected, a pop-up (or modal element) appears. If the focus order isn’t updated, the screen reader user may have to tab through the entire navigation and other content to get to the pop-up.
• Check out and complete an order
• Complete a Contact Us form
• Access any timers or timed elements
  • Can the timers be stopped or extended for those users that need more time

If you successfully completed all of the items above without any hiccups (and without using a mouse), you’re well on your way to being accessible, even for those users with screen readers and other assistive technologies. If you can’t easily navigate your site, place an order, fill out a contact form, etc. with only a keyboard, you need to work with a web developer to address these issues right away.

Add skip links

This is a quick and easy win! Save keyboard and screen reader users from being forced to listen to an entire navigation bar. Add a link at the very top of your website that says, “Skip to content” – this drops the user to the start of the main content on the page.

Scrolling Dialogue Boxes

If you use scrolling dialogue boxes anywhere on your site (for example in a form), make room for the options. Having only two lines viewable of a list of fifty options is hard to use and contributes to cognitive overload. Make sure many options are viewable and that they are intuitively listed, such as alphabetically.

Custom Voice Shortcuts

Provide a mechanism to allow users to remap or turn off character key shortcuts. Allow users to say a phrase and complete a task. For example being able to speak “print this,” instead of requiring “CTRL+P” or navigating to print options via mouse.

• Make sure you use phrases instead of a letter or number.

Finally, allow users to customize, save, and share voice shortcuts. Find more tips for success at Understanding Success Criterion 2.1.4: Character Key Shortcuts. Continue on to the Step 3: Going Mobile section of the guide, or browse the other chapters below.

The AIMCLEAR Guide to Web Accessibility and WCAG Best Practices

• Introduction

A Guide to Help Make Your Content Accessible

• What is WCAG and why is it important?
• WCAG Section 508 & The Laws

5 Steps to WCAG Compliance and A Better User Experience

• Step 1: Web Accessibility Statement
• Step 2: Preliminary WCAG Tests and Checks
• Step 3: Going Mobile
• Step 4: Accessible Off and On-Page Elements (Your SEO was right)
• Step 5: Audio, Video, Forms and Design

Summary and Next Steps

• Start Making Your Web Sites & Apps Accessible