Accessible Mockups Using Vanilla JS

Why another vanilla JS repo?
Sometimes it's easier to write accessible front-ends in vanilla JS, then refactor for libraries like React, Svelte, or Vue.

What this repo is

This repo is an ongoing experiment in discrete, accessible components. Each directory (folder) is a complete component. This includes HTML, CSS, and JavaScript. Support for ES6 and ESModules are assumed.

What this repo is not

This repo is not production-ready code. These components are proofs-of-concept only. If they warrant further exploration, I will move the components into my webComponentsA11y or react-bytes repositories.

Getting started

Each directory is its own self-contained experiment. To get started, I assume a couple of things:

1. You have NodeJS installed
2. You're comfortable with the command line

If both of these are true, clone the vanilla-accessibility-js repository to your local machine, and change into the vanilla-accessibility-js directory. Then change into the directory of the experiment you want to test. I'm using figure-figcaption for these sample instructions. The $ should not be typed, that's just how I note the Terminal prompt.

1. $ cd figure-figcaption
2. $ npm install
3. $ npm run start
4. Open a browser window and type in localhost:8080 or 127.0.0.1:8080
5. Test as needed

Resources

• MDN: Using the Fetch API
• How to Use Fetch with async/await