Accessibility evaluation tools
Tags: a11y, tooling
Published: 2021-08-27 06:12:53

<!-- wp:paragraph -->
<p>After learning about <a href="https://dev.to/elischei/web-accessibility-for-developers-part-two-5-principles-you-can-start-implementing-now-1dm0">different accessibility principles</a>, looking at <a href="https://dev.to/elischei/a-look-at-some-more-complex-accessibility-challenges-lah">more complex challenges</a>, and going <a href="https://dev.to/elischei/a-deep-dive-into-aria-5071">in depth on ARIA</a> we have finally arrived at the last part of this series. And it is time to talk (write) about accessibility evaluation tools. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>There are a lot of different tools to use for accessibility evaluation, in this post I will cover my personal preferences. If you know about an awesome tool I should try please let me know! </p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>What are accessibility evaluation tools?</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Like the name sugests accessibility evaluation tools are tools that help you evaluate how accessible a site is. These tools perform automated tests and gives you feedback on how accessible your site is according to the WCAG principles. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>Remember to think for yourself. </strong><br>These tools can be of great value, especially if you are new to accessibility. But it is important to remember to think for yourself as well. Focus on learning and understanding the different WCAG principles and how to implement them rather than relaying on tools only. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>I use these tools regularly but they are not a part of my everyday workflow. Typically I run one of them when I have finished a new feature - before deploying to test - to make sure I havn't missed anything. Or if I refacor a component and I'm afraid my changes might "break" something I run an evaluation to make sure the content is still accessible. </p>
<!-- /wp:paragraph -->
<!-- wp:heading -->
<h2>The tools I use</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>As I mentioned above there are a lot of different accessibility evaluation tools, and they mostly cover the same things. The decision of which tool to use often comes down to personal preference. </p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3><a href="https://chrome.google.com/webstore/detail/siteimprove-accessibility/efcfolpjihicnikpmhnmphjhhpiclljc/" target="_blank" rel="noreferrer noopener" title="https://chrome.google.com/webstore/detail/siteimprove-accessibility/efcfolpjihicnikpmhnmphjhhpiclljc/">Siteimprove</a></h3>
<!-- /wp:heading -->

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":"33.33%"} -->
<div class="wp-block-column" style="flex-basis:33.33%"><!-- wp:image {"align":"left","id":1109,"sizeSlug":"full","linkDestination":"none"} -->
<div class="wp-block-image"><figure class="alignleft size-full"><img src="https://elischei.com/wp-content/uploads/2021/08/siteimprove-2.png" alt="Screen shot of SiteImprove tab that lists detected accessibility issues." class="wp-image-1109"/></figure></div>
</div>


<div class="wp-block-column" style="flex-basis:66.66%">
<p><br>The Site Improve chrome extension gives you a button in your browser that will run an accessibility test on the page you are currently on. The results of the test shows up as a panel to the left in your browser window. It displays issues sorted into different categories and gives you details about what should be fixed - and also hints on how to fix it. </p>


<p>I love siteimprove. It's easy to use, it gives you a quick overview - and also provides details if you need them. It gives you a lot of information about the different areas of accessibility.</p>
</div>

<!-- wp:heading {"level":3} -->
<h3><a href="https://developers.google.com/web/tools/lighthouse/" target="_blank" rel="noreferrer noopener" title="https://developers.google.com/web/tools/lighthouse/">Lighthouse</a></h3>
<!-- /wp:heading -->


<p>Lighthouse is available as its own tab in chrome devtools</p>

<p>I mainly use Lighthouse to test the performance of a website (which is also an important part of accessibility - not everyone have access to a fast internet connection). But it will also give you an accessibility score and tell you what needs to be fixed. </p>

<figure class="wp-block-image size-large"><img src="https://elischei.com/wp-content/uploads/2021/08/lighthouse-accessibility-1024x441.png" alt="Screen shot of LightHousetab that lists detected accessibility issues." class="wp-image-1106"/></figure>


<!-- wp:heading {"level":3} -->
<h3><a href="https://chrome.google.com/webstore/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd/" target="_blank" rel="noreferrer noopener" title="https://chrome.google.com/webstore/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd/">Axe dev tools</a></h3>
<!-- /wp:heading -->


<p>Like lighthouse Axe dev tools has its own tab in devtools. You can scan the whole site, or only parts of it (requires you to log in). It presents a list of issues and possible solutions to fix them. </p>


<figure class="wp-block-image size-large"><img src="https://elischei.com/wp-content/uploads/2021/08/axeDevTools-1024x398.png" alt="Screenshot of Axe Dev Tools tab that lists detected accessibility issues." class="wp-image-1119"/></figure>


<!-- wp:heading {"level":3} -->
<h3>Tools for checking colors</h3>
<!-- /wp:heading -->


<p>There are a lot of different color checking tools out there. Some browsers also have their own built-in version in devtools. But the tools I use most are <a href="https://webaim.org/resources/contrastchecker/" target="_blank" rel="noreferrer noopener" title="https://webaim.org/resources/contrastchecker/">WebAIM contrast checker</a> and <a href="https://contrastchecker.com/" target="_blank" rel="noreferrer noopener" title="https://contrastchecker.com/">contrastchecker.com</a>.</p>

***

<h2>Other resources</h2>

<!-- wp:list -->
<ul><li><a href="https://www.w3.org/WAI/ER/tools/" target="_blank" rel="noreferrer noopener" title="https://www.w3.org/WAI/ER/tools/">List of accessibility tools</a> (W3C)</li><li><a href="https://webaim.org/articles/tools/" target="_blank" rel="noreferrer noopener" title="https://webaim.org/articles/tools/">Introduction to accessibility tools</a> (WebAIM)</li></ul>
<!-- /wp:list -->

***
Did you find this article usefull? [Follow me on twitter](https://twitter.com/acupof_dev) to be notified when I publish something new!

Also, if you have any feedback or questions, please let me know in the comments below. :)

Thank you for reading, and good luck with your accessibility evaluation!

/Eli