Video breakdowns and demos coming soon!
The best, easiest, and most cost-effective way to address accessibility is at the beginning of a project, but that’s not always what happens. That doesn’t necessarily mean you have to completely redo your site in order to make it accessible.
If you’d like to get started with testing and improving the accessibility of your site, it can be hard to know where to start. Should you find a tool you can plug your URL into? How reliable or comprehensive are their results? Are they just trying to sell you on their product or service? Are there other ways to test for accessibility or double check what you’re already doing?
Testing Methods
There are three main ways to test a site for accessibility: automated scanning, testing with assistive tools like bookmarklets and browser extensions, and manual testing.
When an accessibility expert reviews your site, all three of these testing methods come together with their knowledge of accessibility requirements and best practices to provide you with your path towards making your site accessible for your audience.
Knowing what tools to use can be a major step forward in making sure your site is accessible. These tools aren’t going to pick up everything, and nothing can replace a human reviewing your site, but catching some of the quick wins and easier fixes now will help you catch some repeating accessibility issues and keep from making the same mistakes.
It can even help when you do get a full accessibility audit of your site. Instead of spending their time pointing out repetitive issues or things that are easier to catch, they can focus on the more complex things, the gray areas, and the “it depends” scenarios.
So let’s go over some of the scanning and testing tools you can use to get started.
Why not just use an overlay widget?
Because they don’t work. The often have the opposite effect, and is actually more likely to get you sued.
Bookmarklets (or “favelets”)
I find being able to interact with a site directly and doing as much as I can before getting to those external tools is best for my workflow. It’s helpful for getting intimate with some of the problem areas or repeating issues of a site, and for not having a huge report to have to sift through.
Individual tools are also more helpful in certain situations, like when checking blog posts, most of the time the scope in what might need to be adjusted is limited to things like heading order and alt text. So that’s where we’ll start.
Bookmarklets are great because they’re easy to add, easy to replace, and they don’t require you to install a browser extension that can possibly read the sites you use, slow down the browser, or end up no longer supported — sometimes without warning or explanation.
A brief disclaimer: bookmarklets are bits of code that run when you click on them, so make sure you trust the place you’re getting them from.
How do they work?
They look just like other bookmarks when you’re looking at them. But they’re actually a tiny bit of code that runs, usually involving the page you’re viewing.
You can add a bookmarklet through the “add bookmark” or “bookmark manager” method in your browser. You’d give it a name and instead of a URL, you paste in the javascript.
If there’s a bookmarklet link somewhere on a page, you can also just drag that right into your bookmarks bar (or inside a folder on your bookmarks bar to keep them organized).
How do you choose?
You’ll most likely use a combination of bookmarklets from different sources. There may be different bookmarklets that do the same thing in a slightly different way, so you’ll want to test them out and go with the one that works best and that you like best.
The best place to start is with this group of 5 bookmarklets for landmarks, headings, lists, images, and forms. All 5 are really solid options and will help you get the hang of bookmarklets and accessibility testing.
Once you’ve gotten a good feel for those, you can move on to the collection put together by A11y Tools. This is a nicely varied group of tools that will extend what you can look into on your site.
There are also some individual bookmarklets from around the internet that are helpful and worth checking out:
Looking for more? There are a couple other bookmarklet collections that you can pick through and find what works for you. These are very large lists of bookmarklets, and I don’t know the frequency that they are tested, but I have found a ton of helpful ones through them:
Brief Disclaimer
Bookmarklets are bits of code that run when you click on them. So make sure that you trust the place you’re getting them from.
Browser Extensions
I use browser extensions to get a fuller picture of what’s going on with a page. They’re also great for more advanced things that can’t be done with a bookmarklet. So when you’ve fixed the first layer of issues, these tools are going to come in handy.
Multi-Purpose Extensions
Hoverify is a really versatile extension that is primarily marketed as a development tool but also has some really great use cases for accessibility.
The inspector is great for hovering around the page to make sure parts of the page are tagged correctly, check on the sizing and spacing of elements, and a ton more. It also generates a font list and color palette, which makes it really easy to test readability and color contrast.
There’s a responsive view, which can provide a bit of context for things like too much animation when scrolling, font sizes, mobile menus, mobile features that are different from desktop, and other reflow issues.
SEO overlaps quite a bit with accessibility, so their SEO area is great for checking on links, headers, title, language, and more.
It even has the ability to capture screenshots of the full page, a specific element, or a defined area, which is extremely helpful when identifying parts of the page that need attention or have to be called out in some way.
And that’s not even mentioning the more developer-focused tools like identifying the site stack (which helps with anticipating quirks with certain tools) and the debug feature (which lets you easily clear browsing data for a particular site and inject some code into a page to test out).
I would highly recommend checking out Hoverify to see if you find it helpful. It’s currently priced at $30/year, which is one of the most reasonably priced tools I’ve seen, and I use it on a regular basis.
Single-Purpose Extensions
There are some great free resources for responsive testing. Responsive Viewer is a Chrome extension, and there’s a desktop app called Responsively that has an extension that lets you open the current website in their app.
For checking color contrast, there’s a really great extension called WCAG Contrast Checker that has links to versions for Chrome, Firefox, and Edge at the bottom of the page.
Checking ARIA usually requires a bit of experience with when to use ARIA and what the proper usage is. ARIA DevTools is a really helpful tool for visualizing how the page is laid out and where ARIA might be misused or missing. They have extension links for Chrome and Firefox.
Brief Disclaimer
Browser extensions are bits of code that run when you click on them. So make sure that you trust the place you’re getting them from.
Site Scanners
This list of site or page scanners are mostly browser extensions that are going to give you a more in-depth list of things to fix without having to use individual tools. They’re great for seeing the overall status of a page at a glance and seeing all the issues that can be picked up from an automatic scanner in one place.
They all have their strengths and weaknesses, so test them all out for a bit and pick the one that works best for you.
- Accessible Web Helper is a good extension for finding some areas to fix. It’s a solid tool and a great place to start to fix what it picks up. They have a paid version and have a tool on their site that you can paste a URL into.
- WAVE Evaluation Tool is a pretty comprehensive extension that looks for errors as well as provides a list of other helpful things that might need manual investigation. There are some additional tools built into this extension to give a pretty good picture of what’s on the page. They have a tool on their site you can paste a URL into as well.
- axe DevTools is something you use in the Developer Tools when you inspect a page. They have various guided tests, scans, and other things that will let you do some interactive work with the automated and human-guided testing. You’ll want to see what you can do with the free version and then upgrade when you need to.
- Accessibility Checker Plugin is a great option if you have a WordPress site. They have a ton of resources on their site regardless of your platform, though. It’s a great site scanner that will often take context into account, like checking if you have a transcript added for your videos. And since it’s installed on your site, you have the opportunity to automatically scan pages, track your progress, save your ignored errors. They also have a pro version that expands the plugin’s capabilities.
Checklists
Having a list of what you need to check on your site is a great way to make sure you’re covering all the major areas and all the guidelines that apply to your site are followed.
When I was preparing for my presentation for WordCamp Montclair on Simplifying WCAG, I collected a few checklists for beginner, moderate, and advanced experience levels. Each of those checklists had great features as well as some shortcomings.
The two beginner options have just the basics, almost like a curated list of tasks that either didn’t mention which criteria it was referencing or didn’t include a ton of extra info. The moderate checklists end up having some repeating tasks, don’t include the latest WCAG additions, or don’t give much additional information. And the advanced option is a really interesting tool but is meant for a more of a developer/tester audience.
Some of the checklists I found include filters to narrow down the long list of tasks, but I didn’t quite find one tool that did everything I needed. I’d have to use a combination of tools in order to feel like I had a complete look at what I needed to keep track of for a site.
So I created my own checklist.
NEWT is the Nifty Evaluator for WCAG Testing. You answer questions about the features on your website and it gives you an organized, filterable list of the corresponding accessibility guidelines (WCAG).
The results include some additional information about what the guideline actually means as well as the WCAG number and some additional links to learn more. There’s also a filter to narrow down your results. It modifies the URL based on your answers and filter selections so you can bookmark the results and come back, or you can download your results as a CSV.
Honorable Mentions
There are also websites that provide similar services, which are especially helpful when there’s no website yet, like putting together things like branding and content.
Color Contrast
- Who Can Use gives a great visualization of the color contrast of your chosen colors.
- OddContrast lets you input colors in more than just HEX formats.
- EightShapes Contrast Grid lets you generate a full grid of color combinations
- Text on Background is an incredible tool that lets you upload an image and test what text color is going to have the best contrast on it.
Readability
- Hemingway App is a great tool that provides a few different checks to make sure your content is readable.
- Web FX has a readability test that lets you paste in your URL or enter text to analyze how easy it is to understand your content.
It doesn’t end here.
These tools don’t cover everything.
Some of these tools go into more detail than others or take more context into consideration, but there are things you’re going to need a human for — like knowing when there are false positives or things the tools missed, checking the readability of fonts, screen reader testing, and so on.
But these tools are a great place to start.
Explanation of tools listed and disclaimers.
This isn’t an exhaustive list of every tool and scanner available. These are tools that I’ve used and can recommend. If you know of a tool that’s not listed here, reach out! It’s possible I don’t know about it, or it’s possible it’s not a tool I’d recommend. Either way, it would be great to know!
The Hoverify link is an affiliate link, which means I may be given credit if you use my link and make a purchase. I recommend them whether you use my link or search them out on your own.
