pa11y in Lando

Reading a post by Morgan on web performance and accessibility standards and I'm reminded of pa11y, a CLI tool for accessibility checking that we've used before.

Tools can't match expert assessment, but they can be useful to automate and frequency of checking can be a real boon to raising standards.

Here's pa11y in a Lando configuration - you can add the service and tooling entries below to some existing Lando environment, or use this entire config as-is for a standalone tool.

name: pa11y
services:
  pa11y:
    type: node
    overrides:
      image: registry.gitlab.com/gitlab-org/ci-cd/accessibility:latest
tooling:
  pa11y:
    service: pa11y
    cmd: pa11y --config /pa11y-configs/pa11y.json

Once those are in an environment, you can use pa11y alongside your project:

$ lando pa11y --sitemap https://my.lndo.site/sitemap.xml
$ lando pa11y https://example.org

This uses the image made available via Gitlab's Accessibility Testing tools; you can use their configuration to test accessibility in your Gitlab CI pipelines too.

chris@thip:~/Projects/lando-pa11y$ lando pa11y https://example.org --reporter cli

Welcome to Pa11y

 > Running Pa11y on URL https://example.org

Results for URL: https://example.org/

 • Error: The html element should have a lang or xml:lang attribute which describes the language of the document.
   ├── WCAG2AA.Principle3.Guideline3_1.3_1_1.H57.2
   ├── html
   └──  Example Domai...</html><br><br>1 Errors</code></pre>

</article>

		</main>

		<footer>
		</footer>

		<!-- Current page: /pa11y-in-lando/ -->
	</body>
</html>