Koa11y: Accessibility Testing Tool
Tags: a11y, webdev
Published: 2021-12-12 20:58:00

<!-- wp:paragraph -->
<p><a href="https://open-indy.github.io/Koa11y/" data-type="URL" data-id="https://open-indy.github.io/Koa11y/">Koa11y</a> is another useful website development tool I came across recently. It is a downloadable desktop app that can be used to test out a website's accessibility. It is not the most user-friendly app - not as intuitive as <a href="https://wave.webaim.org/extension/" data-type="URL" data-id="https://wave.webaim.org/extension/">the WAVE extension in your browser</a>, for example - but a web developer should have no problem sorting out a few extra steps. Most importantly, it did return more detailed issues with the website I first tested against compared to WAVE, which can be valuable information to fix as many accessibility issues as possible.</p>
<!-- /wp:paragraph -->

<!-- wp:more -->
<!--more-->
<!-- /wp:more -->

<!-- wp:embed {"url":"https://www.youtube.com/watch?v=yoJDb018Edc","type":"video","providerNameSlug":"youtube","responsive":true,"className":"wp-embed-aspect-16-9 wp-has-aspect-ratio"} -->
<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
https://www.youtube.com/watch?v=yoJDb018Edc
</div><figcaption>Koa11y video</figcaption></figure>
<!-- /wp:embed -->

<!-- wp:heading -->
<h2>Koa11y demo</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>To try it out, simply download the zip file (Windows, in my case) from the link above and extract it. Launch the main executable to see a screen like this:</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":1768,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://ryanrobinson.technology/wp-content/uploads/2021/10/Koa11y-main-screen-1024x518.png" alt="" class="wp-image-1768"/><figcaption>Main options screen for Koa11y</figcaption></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Enter a website that you want to run accessibility tests against. For example, I tried for ryanrobinson.technology. It will generate an HTML file saved on your computer with all the details of the report. </p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":1769,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://ryanrobinson.technology/wp-content/uploads/2021/10/ryanrobinson-results-1024x655.png" alt="" class="wp-image-1769"/><figcaption>Results for this site. Yeah, I have some work to do.</figcaption></figure>
<!-- /wp:image -->

<!-- wp:heading -->
<h2>Pa11y</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>It is built on top of <a href="https://pa11y.org/" data-type="URL" data-id="https://pa11y.org/">pa11y</a>. Pa11y is a tool that iterates over a webpage and tells you all the accessibility errors found. It comes with a variety of configuration options. I first went down this route as I was investigating tools that might help me enforce more accessibility testing as part of a GitLab CI/CD pipeline. Unfortunately, it can only check websites which are publicly accessible, and our dev servers are protected and only accessible by our team. I wouldn't have been able to integrate it into our pipeline until any changes had already gone to production, which defeated the purpose. But it did lead me to Koa11y which can still be a useful tool to have in the belt to periodically review sites which are publicly-accessible. If you're looking for something a bit more programmatic in your workflow, though, give Pa11y a try. If Koa11y's results are any indication, it's a pretty powerful tool.</p>
<!-- /wp:paragraph -->