Web Accessibility Testing

Start at the top of the page and hit the Tab key throughout the page. As you go through, consider three questions:

1. Can you get to all areas of the website? If there are features that seem clickable, but aren't reachable by keyboard, it's likely only usable by mouse and not keyboard.
2. Do features like links, buttons, form inputs, or other widgets lose focus? Anything a user could interact with needs to have some kind of focus indicator.
3. Do you get stuck anywhere on the page when trying to tab through? This is the sign of a keyboard trap, and if there's no way to get out without using a mouse, it makes the page unusable for keyboard only navigation.

Why is this important?

A user should be able to go to all relevant content using keys like Tab, Shift + Tab, arrow keys, Escape, and Enter/Return. There also shouldn’t be “keyboard traps,” when a user can’t exit certain features using only a keyboard.

If a user navigates by keyboard or keyboard-like technologies, focus indicators should tell the user where they are at on the screen. This could be a border around an element, a highlight, change in background, or some other visual that clearly shows location on screen.

If you see a form with text inputs, radio buttons, checkboxes, etc., try to click the label next to the field. Clicking the label should drop the cursor into the field or select that option.

Why is this important?

Selecting an option or going into an input by clicking the related label means the option or input is properly named and associated. This helps users that rely on assistive technology to understand what the field is for and what info to provide.

It also increases the target area for users that can't use a mouse, or for users on touch devices where the click area might be smaller.

If there is video or audio-only content, check if there are transcripts or captions nearby or within the media player. These should be true captions and transcripts with no errors, and not auto-generated.

Why is this important?

Audio-only and audiovisual content like podcasts, videos, or screencasts need text-based alternatives so users can still access the content, even if they can't see or hear it.

For media like audio or podcasts, transcripts must be provided. For video or other audiovisual content, transcripts and captions are both provided.

Shrink down your browser and try to use the site, or use the site on your mobile device. There should be no loss in content or functionality, and shouldn't require you to scroll horizontally on the page.

Why is this important?

Users that need to have their device locked in certain orientations, or users that don't have the motor function to scroll horizontally, may not be able to reach content if it's not within the device width.

If you're on Windows, you can turn on High Contrast mode and see if all features on the webpage still exist. On a Mac, you can increase contrast by adjusting display preferences and see if text or other info starts to disappear.

Why is this important?

Users with low vision, color vision deficiencies, reading disabilities, or other vision-related disabilities may find it easier to navigate web pages with higher contrast modes. If there isn't enough contrast, these elements can be harder to see in these modes, or may vanish altogether.