A11y Reference Website
Edit page
IntroductionAbout the project
Components
Rules

Accessibility Reference Website

An example website, build for testing accessibility issues.

Quick start

To get started, we first have to install some dependencies.

  1. Start by installing node-gyp dependencies.
  2. Install all project dependencies by running
    npm install
  3. Finally launch the project with
    npm start

Testing

To run unit tests, use the command

npm run test

To run integration tests (using Cypress), use the command

npm run cy:run

Who is behind this project?

This project is developed in co-operation between Norsk Regnesentral andWebstep, through funding by UnIKT (norwegian).

What is this?

The goal of the project is to develop a website with one accessible version, and one inaccessible version. It is supposed to be a more modern version of the "Before and After Demonstration" by W3C. In practice, we mean to implement that the user can toggle individual accessibility issues, to test each issue specifically.

In addition to looking more modern, it should use modern frontend tools and typical patterns found in real-life, so that it better represents actual sites users can encounter on the web today.

The components developed should also be able to use as examples of best practice implementations. If time permits, we will present them in a separate styleguide and publish them as a component library.

The actual site will mimic a web shop, though, of course, no purchase will be possible. User data submitted through checkout will only be saved on the user's computer.

Where can I find the site?

The site is live at Clothes4All.net.

Documentation

We have started building documentation for the site at Clothes4All.net/docs. There is not a whole lot there yet, but more will be written in the next few weeks.

To build the docs, use the command

npm run docz:dev
or
npm run docz:build
.

Translations

The site will initially be developed with translations for English and Norwegian. We hope for community translations to other languages, to make the site accessible to more users.

Contribute

After the initial project is finished, we will be open for contributions to both code and translations.

Please submit issues orpull-request if you find opportunities for improvements.