This repository lets you create WCAG EM Reports based on EARL files, for example generated by Polypane.cloud. It is based on Eleventy WCAG Reporter by Hidde de Vries.

• Automatically generates a base report based on EARL
• Issues as Markdown files
• Create reports in English, Dutch, Brazilian Portuguese, Spanish or German
• Automatically output a score card in the report
• Includes boilerplate so that you can focus on describing more complex issues and provide additional context.

It is built on Eleventy is a static site generator. In this project we use it to combine all Markdown files into one HTML file that is a report.

Want to contribute a language? Create an issue (to indicate you'd like to take this on; the template has some instructions) and file a Pull Request.

1. On the command line, install Eleventy globally with npm install -g @11ty/eleventy
2. Get the project files; best fork this project, then clone your copy.
3. When the project files are on your computer, go to folder that contains the project files
4. Run npm install to install all dependencies this project needs.
5. Run npm run dev or eleventy --serve to start a local server and look at the example report. The default url is localhost:1337.
6. Download the EARL report json file from Polypane.cloud and put it in the top level of the project folder (or wherever you want.
7. Create a new report

From now on, you'll onlly need to run that last step: npm run dev or eleventy --serve.

You can run npm run add-earl your-report.json, which will ask for the project name and create a new folder in the /reports folder with the name you provided.

The EARL file contains programatically determinable accessibility issues. To add issues that require human judgement, you can:

1. Add issues as Markdown files the report's folder
2. Add metadata as YAML frontmatter

Issues accept some meta data to help create the report:

1. After initial setup, run eleventy --serve or npm run dev to start a server, this should show you links to all your reports.

This tool is meant to help generate WCAG EM reports effectively. Nothing is set in stone, you can change it to your liking.

This section explains where things live.

There are a couple of reporting-related filters available.

Creates a link to a success criterion in the WCAG QuickRef, based on a WCAG SC number.

The mapping from number (e.g. 1.1.1) to slug (e.g. non-text-content) is done in .src/data/sc_to_slug.json.

For instance:

{% 1.1.1 | sc_uri(targetWcagVersion, language) %}

where:

• language is the page's language (required)
• targetWcagVersion is the WCAG version you're evaluating against, for example 2.1 or "2.0" (required)

displays: https://www.w3.org/WAI/WCAG21/quickref/?versions=2.1&showtechniques=248#non-text-content

This can be used in a link, like so:

<a href="{% 1.1.1 | sc_uri(targetWcagVersion, language) %}">1.1.1</a>

And this content can be variable. If the SC number is in a variable called sc, this is how to link:

<a href="{% sc | sc_uri(targetWcagVersion, language) %}">{{ sc }}</a>

A table of results can be generated like this:

{% sc_table issueList, language, targetLevel %}

where:

• issueList is an object with all issues for this report (assumes each issue has sc in front matter with a number, like 1.1.1) (required)
• language is the page's language (required)
• targetLevel is the evaluation target, one of these options: A, AA or AAA (required)
• targetWcagVersion is the WCAG version you're evaluating against, for example: 2.1 (required)

With the sample_image shortcode, you can output the URL of a screenshot for a sample.

{% sample_image id, reportName %}

You'll need to add the id of the sample (e.g. sample-1) and the folder name of the report (e.g. example).

This will then output either images/sample-1.png (if it exists) or the URL to a default image.

The default can be changed by updating .src/reports/example/images/default-screenshot.png.

The EARL file is a JSON file that contains all the issues found in the evaluation. It can be generated by any tool that supports the format, for example Polypane.cloud, where you can find it on the "export EARL" page.

The expected format of this EARL file is somewhat different from other testing tools. Most testing tools do not test all pages but they select a subset of pages. Issues found are then shown per page or type.

With automated testing, we can scan and audit all the pages on a site. Since there can be significantly more pages than unique issues, and since most issues are replicated across pages, the format of this EARL file lists issues and the pages they occur on, instead of pages and the issues they contain.

We welcome all tools to build exports or imports of our EARL format. Use the provided schema.json file to validate your EARL file.

Submit a PR to add your tool to the README.