Exploring accessibility testing with Pa11y

04 Oct 2019

Accessibility is a priority in all of my projects. I'm pretty good at making my code base accessible, but am aware that this is a huge field of information that is worth exploring more if it's going to be a serious priority.

Ideally, I want some kind of accessiblity tool that integrates with my project. I want it to flag areas that do not meet accessibility criteria, or help me discover ways I can improve accessibility in general.

So I did a quick Google search for an npm-based accessibility tester. I use npm for other things like node-sass which is why I searched for npm-based stuff.

One of the results which looks good is Pa11y, so will be starting with that. There are a few articles introducing it that I'll look through and takes notes from below.

Accessibility Testing with Pa11y - Single files

Accessibility Testing with pa11y - Multiple files


{
  "defaults": {
    "hideElements": "#carbonads",
    "ignore": [ "notice", "warning" ]
  },
  "urls": [
    "https://webpage.com",
    "https://second-webpage.com",
    {
      "url": "webpage.com",
      "hideElements: "#carbonads, #disqus_thread"
    }
  ]
}


{
  "defaults": {
    "standard": "WCAG2A",
    "rules": [ 'Principle1.Guideline1_4.1_4_6_AAA' ]
  }
}


"urls": [
  {
    "url": "http://webpage.com/subscribe",
    "actions": [
      "set field #email to pa11y@testing.com",
      "set field #username to Tester",
      "click element #subscribe",
      "wait for url to not be http://webpage.com/subscribe"
    ],
    "timeout": 6000
  }
}


{
  "defaults": {
    "page": {
      "viewport": { "width": 320, "height": 480 }
    }
  }
}

Using actions in pa11y

Imagine we have an online pie shop. We want users to press a button to obtain a delicious pie, be redirected to a login page to input their account details, and then redirect them again to the delivery confirmation page. We're interested in the accessibility of the delivery confirmation page only.

Actions are used to test pages once an action has been completed. The confirmation page will look different once a delivery has been confirmed than it would before it was confirmed.


var test = pa11y({
  actions: [
    'click element #addToCartButton',
    'wait for url to be http://the-pa11y-pie-shop/login',
    'set field #username to exampleUser',
    'set field #password to password1234',
    'click element #submit',
    'wait for url to be http://the-pa11y-pie-shop/delivery-confirmation/5px372aa8j'
  ]
});