{"id":71435,"date":"2023-02-22T09:00:32","date_gmt":"2023-02-22T09:00:32","guid":{"rendered":"https:\/\/www.cryptocabaret.com\/?p=71435"},"modified":"2023-02-22T09:00:32","modified_gmt":"2023-02-22T09:00:32","slug":"how-i-do-automated-accessibility-testing-for-my-website","status":"publish","type":"post","link":"https:\/\/www.cryptocabaret.com\/?p=71435","title":{"rendered":"How I do automated accessibility testing for my website"},"content":{"rendered":"

How I do automated accessibility testing for my website<\/span>
\ndmundra<\/a><\/span>
\nWed, 02\/22\/2023 – 03:00<\/span><\/p>\n

\n

This article covers adding accessibility tests to your site using Pa11y<\/a> (pa11y-ci<\/a> with axe<\/a>) and Cypress<\/a> (with cypress-axe<\/a>) in GitLab CI\/CD<\/a>. I use a Jekyll<\/a> website as an example, but any website technology that runs in CI\/CD can leverage this setup.<\/p>\n

Prep your website<\/h2>\n

In addition to getting your website to run in CI\/CD, I recommend enabling an XML sitemap feature. A sitemap allows the accessibility tests to parse all URLs to find accessibility issues across the site. I recommend the jekyll-sitemap plugin<\/a> for Jekyll sites.<\/p>\n

Collecting a list of all major URLs is a good alternate step if a sitemap is not possible. The URLs should cover all potential layouts of the website, such as pages with the highest traffic or the most landings. This approach won’t catch all accessibility issues, especially content level concerns, but it will test the layout and main pages.<\/p>\n

This scenario requires the npm<\/a> or yarn<\/a> package managers. I used npm<\/code> for this article. If your project doesn’t have npm<\/code> initialized, run the npm init<\/code> command to create the package.json<\/code> file.<\/p>\n

Begin with Pa11y<\/h2>\n

Pa11y is a free and open source software that tests websites for accessibility issues. Pa11y-ci is the command line utility geared towards continuous integration (CI). Install pa11y-ci as a development dependency with npm<\/code>:<\/p>\n

\n$ npm i --save-dev pa11y-ci<\/code><\/pre>\n
After you complete the installation, edit the package.json<\/code> and add the following commands to the scripts<\/strong> section:<\/p>\n
\n\"start-detached\": \"bundle exec jekyll serve --detach\",\n\"pa11y-ci:home\": \"pa11y-ci http:\/\/127.0.0.1:4000\",\n\"pa11y-ci:sitemap\": \"pa11y-ci --sitemap http:\/\/127.0.0.1:4000\/sitemap.xml --sitemap-find https:\/\/accessibility.civicactions.com --sitemap-replace http:\/\/127.0.0.1:4000 --sitemap-exclude \"\/*.pdf\"\"<\/code><\/pre>\n