Manual accessibility testing is essential to make sure your website is accessible.
Before doing any manual testing
Before doing any manual testing, it’s good practice to make sure that you’re not getting any errors when using automated accessibility testing tools. If you are, then you should fix these first.
Once you’re getting no errors in several browser plugins, you’re in a good place to start manual testing.
Manual testing against WCAG
The point of manual testing is to make sure you test every page of your application against the A and AA criteria of the Web Content Accessibility Guidelines 2.1.
The only way you can do this without missing anything is to research each of the WCAG criteria and understand what the failures are. If you find any of the failures on your service, you can use the advisory techniques to fix them.
You can use the W3C How to meet WCAG (Quick reference) with a filter to only show A and AA criteria.
Using Accessibility Insights
Accessibility Insights is a great tool for accessibility. Like a lot of other browser plugins; it can do automated testing, but what sets it apart is the assessment tool.
The assessment tool will guide you through checking the page against the WCAG criteria. It can overlay helpers onto the page itself. For example, to show you the tabbing order, which colours fail contrast ratios or what the level is of each heading.
There is guidance built in so, so before you do any tests it will explain what you need to do. Then, when you’ve completed the test you can record if it passed or failed. At the end of each assessment you can export the test data to a HTML report which will show you which WCAG criteria passed and failed.
As part of your manual tests you need to make sure the page works as expected using just a keyboard. Every part of the page must be able to be viewed, and every interactive element must be usable.
Links and form fields can be navigated using the tab key to go to the next item or shift + tab to move the previous one. Radio buttons can usually be navigated with arrow keys.
It must be obvious which element is focused ready to be interacted with. It should be visually different to other elements of the same type. For example, you might highlight a link with a border and a background colour. The highlight colour must have a 3:1 contrast ratio with any adjacent elements as focus styles are a common failure.
If the focus disappears off the screen at any point this is also a failure. If you have dynamic content or pop-ups you must make sure the focus does not get contained in a collapsed section or disappear behind a pop-up.