How to test using a pa11y dashboard

Nidhi Kumari
4 min readAug 16, 2020

--

In my previous blog, I wrote about setting up a pa11y dashboard. This blog post is on how to test using a pa11y dashboard. With pa11y dashboard, we can test any URL and generate an accessibility report. , We can use pa11y to test the websites which are behind a proxy as well as those which do not require any kind of authentication.

pa11y dashboard page

Let’s start with the steps:

Step 1: Add the URL on Dashboard Page

To test any URL, click on the add new URL tab on the dashboard page and it will route us to the next page where we have to add details.

Step 2: Adding the Details:

After we are routed to the next page, we need to follow these steps

1. Add the name of the URL:

We can add whatever name we wish to add.

Name and URL section

2. Add the URL:

Add the URL that we want to test

3. Set Standard:

We can select any of the standards listed

4. Set Timeout:

If our server is taking too long to reply to a data request made, we can ask it to stop after a certain period of time, called time out.

5. Set Wait :

In some case, the page waits for the content to be loaded first, for that we can add a wait.

6. Actions:

Then we have an action section. Actions are additional interactions that we can make Pa11y perform before the tests are run. They allow us to do things like click on a button, enter a value in a form, wait for a redirect, or wait for the URL fragment to change. To learn more about pa11y actions, refer here

7. Username and Password :

If our website is behind a firewall or proxy, we need to pass credentials to log in to the website and further test it.

8. Hide elements:

If we want to hide any elements from the pa11y test, we can add them to this section.

9. Add Headers:

If we want to add cookies, we can add them to this section.

10. Ignore rules:

If we want to ignore a certain set of rules, we can add them here.

11. Click on Add URL button

Step 3: URL added

After The URL is added, we will be routed to this page which means our URL is added and here we can see options like edit the URL, Delete this task and run pa11y. To generate accessibility results for the page, click on run pa11y.

Screenshot of the page when URL is added

Step 4. Results Page

Now we will be routed to the results generated. On this page, We can see the errors, warnings and notices. If we click on the Errors, we can see the accessibility issues. Pa11y also gives us the hints to solution for the issues as well. We can download the CSV or JSON report also.

Example of an Accessibility report

This is how we can test any URL using pa11y dashboard. Thanks for reading the blog. If you have any doubts or suggestions, do let me in the comments. You can also reach out to me here

--

--

Nidhi Kumari

GSoC'20 & GSoC’19 @DIAL_community | Intern @Ushahidi | Open Source enthusiast | JS lover ❤️ |