a11y-wcag v0.5.1

Table of Contents

1. Quick Start
2. Troubleshooting
3. More

Quick Start

Prerequisites

Make sure you have the following installed on your machine:

• Git
• Node.js
• npm (Node Package Manager)

Install the package

npm i a11y-wcag

Use in the project

If you are using a simple vanilla JavaScript/TypeScript project, you just need to add the following in the html file.

<wcag-card size="small" criterion="1.1.1"></wcag-card>

• The attribute size is optional (by default, it will take 'medium'). You can choose between small, medium and large.
• The criterion should be one of the available in the WCAG 2.2 Standard. For example, 4.1.1 is obsolete and therefore not here.

Troubleshooting

If you are using some frameworks/libraries like React, Astro or Svelte, you might come up with some problems because of the nature of web components. Depending on the framework, you should look for a different solutions (Astro uses some kind of Astro.glob() method and with React I could lazy import the index.js of the web component from the node_modules).

All in all, I do not recommend for the moment the use of the package with a framework/library.

More

I was deeply inspired by the amazing Figma design by Johannes Lehner.

Also thanks to Thomas Puppe for the amazing idea of creating web components for the cards!