Manual accessibility testing
Manual testing basics #
Manual accessibility testing uses keyboard, visual, and cognitive tests, tools, and techniques to find issues that automated tooling cannot. As automated tooling does not cover all of the success criteria identified in WCAG, it's vital that you do not run automated accessibility tests and then stop testing!
As technology advances, more tests could be covered by automated tooling alone, but today, both manual and assistive technology checks need to be added to your testing protocols to cover all of the applicable WCAG checkpoints.
Pros of manual accessibility tests:
- Reasonably straightforward and quick to run
- Catch a higher percentage of issues than automated tests alone
- Little tooling and expertise needed for success
Cons of manual accessibility tests:
- More complex and time-consuming than automated tests
- May be difficult to repeat at scale
- Require more accessibility expertise to run tests and interpret the results
Let's compare what accessibility elements and details can currently be detected by an automated tool, versus those that won't be detected.
|Can be automated||Can't be automated|
|Color contrast of text on solid backgrounds||Color contrast of text on gradients/images|
|Image alternative text exists||Image alternative text is accurate and is properly assigned|
|Headings, lists, and landmarks exist||Headings, lists, and landmarks are correctly marked-up and all elements are accounted for|
|ARIA is present||ARIA is being used appropriately and applied to the correct element(s)|
|Identifying keyboard-focusable elements||Which elements are missing keyboard focus, the focus order makes logical sense, and the focus indicator is visible|
|iFrame title detection||iFrame, the focus order makes logical sense, and the focus indicator is visible|
|Video element is present||Video element has appropriate alternative media present (such as captions and transcripts)|
|Tab||Moves forward one active element to another|
|Shift + Tab||Moves backward one active element to another|
|Arrows||Cycle through related controls|
|Spacebar||Toggles states and moves down the page|
|Shift + Spacebar||Moves up the page|
|Enter||Triggers specific controls|
|Escape||Dismisses dynamically displayed objects|
Visual checks #
Visual checks focus on visual elements of the page and utilize tools such as screen magnification or browser zoom to review the website or app for accessibility.
Visual checks can tell you:
- Are there color contrast issues that an automated tool could not pick up, such as text on top of a gradient or image?
- Are there any elements that look like headings, lists, and other structural elements but are not coded as such?
- Are navigation links and form inputs consistent throughout the website or app?
- Is there any flashing, strobing, or animation that exceeds the recommendations?
- Does the content have proper spacing? For letters, words, lines, and paragraphs?
- Can you see all the content using a screen magnifier or browser zoom?
Content checks #
Unlike visual tests that focus on layouts, movement, and colors, content checks focus on the words on the page. Not only should you be looking at the copy itself, but you should review the context to be sure it makes sense to others.
Content checks answer questions such as:
- Are page titles, headings, and form labels clear and descriptive?
- Are image alternatives concise, accurate, and useful?
- Is color alone used as the only way of conveying meaning or information?
- Are links descriptive or do you use generic text such as “read more” or “click here?”
- Are there any changes to the language within a page?
- Is plain language being used and are all acronyms spelled out when first referenced?
Demo: Manual test #
So far, we have run automated tests on our demo web page and found and remediated eight different issue types. We are now ready to run manual checks to see if we can discover even more accessibility issues.
Step 1 #
Our updated CodePen demo has all of the automated accessibility updates applied.
View it in debug mode to proceed with the next tests. This is important, as it removes the
<iframe> which surrounds the demo web page, which may interfere with some testing tools. Learn more about CodePen's debug mode.
Step 2 #
Start your manual testing process by setting your mouse or trackpad aside and navigate up and down the DOM using only your keyboard.
Issue 1: Visible focus indicator #
You should see the first keyboard issue right away—or rather, you shouldn't see it—as the visible focus indicator has been removed. When you scan the CSS in the demo, you should find the dreaded “outline: none” added to the codebase.
As you learned in the Keyboard focus module, you need to remove this line of code to allow web browsers to add a visible focus for users. You can go one step further and create a focus indicator styled to meet the aesthetics of your digital product.
outline: 3px dotted #008576;
Issue 2: Focus order #
Once you have modified the focus indicator and it's visible, be sure to tab through the page. As you do so, you should notice that the form input field used to subscribe to the newsletter does not receive focus. It has been removed from the natural focus order by a negative tabindex.
<input type="email" placeholder="Enter your e-mail address" aria-hidden="true" tabindex="-1" required>
Since we would like people to use this field to sign-up for our newsletter, all we need to do is remove the negative tabindex or set it to zero to allow the input to become keyboard focusable again.
<input type="email" placeholder="Enter your e-mail address" aria-hidden="true" required>
Step 3 #
Once keyboard focus has been checked, we move on to visual and content checks.
Issue 3: Link color contrast #
As you went through the keyboard tests by tabbing up and down the demo page, you probably noticed the keyboard focused on three visually hidden links in the paragraphs about the different medical conditions.
For our page to be accessible, links must stand out from the surrounding text and include a non-color style change on mouse hover and keyboard focus.Let's fix it.
A quick solution is to add an underline to the links inside the paragraphs to make them stand out. This would solve the accessibility issue, but it might not suit the overall design aesthetics you hope to achieve.
If you choose not to add an underline, you will need to modify the colors in such a way as to meet the requirements for both the background and copy.
When looking at the demo using a link contrast checker tool, you will see that the link color meets the 4.5:1 color contrast requirement between regular-sized text and the background. However, non-underlined links must also meet a 3:1 color contrast requirement against the surrounding text.
One option is to change the link color to match the other elements on the page. But if you change the link color to green, the body copy must also be modified to meet the overall color contrast requirements between all three elements: links, background, and surrounding text.
Issue 4: Icon color contrast #
Another missed color contrast issue is the social media icons. In the color and contrast module, you learned that essential icons need to meet a 3:1 color contrast against the background. However, in the demo, the social media icons have a contrast ratio of 1.3:1.Let's fix it.
To meet the 3:1 color contrast requirements, the social media icons are changed to a darker gray.
Issue 5: Content layout #
If you look at the layout of the paragraph content, the text is fully justified. As you learned in the Typography module, this creates "rivers of space," which may make the text difficult for some users to read.
To reset the text alignment in the demo, you can update the code to
text-align: left; or remove that line entirely from the CSS, as left is the default alignment for browsers. Be sure to test the code, in case other inherited styles remove the default text alignment.
Step 4 #
Once you've identified and fixed all the manual accessibility issues outlined in the previous steps, your page should look similar to our screenshot.
It's possible that you'll find more accessibility issues in your manual checks than we covered in this module. We'll discover many of these issues in the next module.
Next step #
Way to go! You have completed the automated and manual testing modules. You can view our updated CodePen, which has all the automated and manual accessibility fixes applied.
Now, head over to the last testing module focused on assistive technology testing.
What elements need to meet WCAG color contrast standards?Icons Headings Body text All of the above
Icons need to meet color contrast standards, but they're not the only option.
Headings need to meet color contrast standards, but they're not the only option.
Body text needs to meet color contrast standards, but that's not the only option.
Every element should meet contrast standards written by WCAG.