https://github.com/jpdevries/a11y-quiz
An accessible HTML quiz about accessibility
https://github.com/jpdevries/a11y-quiz
Last synced: 2 months ago
JSON representation
An accessible HTML quiz about accessibility
- Host: GitHub
- URL: https://github.com/jpdevries/a11y-quiz
- Owner: jpdevries
- License: mit
- Created: 2016-07-04T11:21:22.000Z (over 9 years ago)
- Default Branch: gh-pages
- Last Pushed: 2016-07-06T14:49:29.000Z (over 9 years ago)
- Last Synced: 2025-04-09T09:37:45.236Z (12 months ago)
- Language: HTML
- Size: 67.4 KB
- Stars: 4
- Watchers: 1
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# a11y-quiz
An accessible HTML quiz about accessibility.
## Demo
[Take the quiz](https://jpdevries.github.io/a11y-quiz/).
## Getting Started
Once you install the Node dependencies the Node server will be ready to launch.
```bash
cd a11y-quiz
npm install
node server.js
```
You should be able to access the quiz at http://localhost:1185. To run the quiz on a different port use the `PORT` environmental variable:
```bash
PORT=8080 node server.js #http://localhost:8080
```
_You can also just open `index.html` in a browser or from your local server, you just won't get the `.no-js` support provided by the Node server synchronous endpoint._
## HTML Semantics
``, ``, ``, ``, ``, ``, ``, ``, and `` are all semantically used to construct the Accessibility Quiz document. Accessibly hidden text is used along with `aria-hidden` to read the full tag names of tags. For example "Heading Level 6" will be read aloud instead of `
`.
A `` is used to allow the form to be reset both synchronously and asynchronously.
## Progressive Enhancement
This quiz is HTML–first meaning that all the questions are accessible even with JavaScript disabled. Synchronous form submissions are supported by the Node server.
JavaScript is used to progressively enhance the quiz by showing one question at a time as well as asynchronously calculating and displaying the score.
In an effort to be mindful of user bandwidth, jQuery is only loaded if native `new FormData().entries()` support detection fails.
## CDN Fallback
If jQuery is needed it will be loaded from `code.jquery.com`. If the CDN is unreachable an "h5bp style" fallback is used to load jQuery locally. This helps keeps the asynchronous experience accessible even if the CDN is blocked or down.
## Synchronous Endpoints
A simple Node backend, `server.js`, is used to support plain HTML. The `` will post data to a `/score` endpoint. Users will be taken to a new page at `/score` and presented with their score along with a link to play again.
## DRY JavaScript
JavaScript is kept DRY (Do not Repeat Yourself) by using the same modules on both the front end asyncronous experience as for the Node server syncronous endpoint. This means adding a new answer to the answer bank only requires a change in one place.
## Adding Questions
- Add a `` to `index.html` and make sure to follow the same HTML structure and semantics as the others
- Add the answer to your question to `./assets/js/bank.js`
## ARIA
- `aria-hidden="true"` is used to prevent numeric code representations of HTML tags like `
` from being read aloud. Instead `.visually-hidden` text like "Heading Level 6" will be read aloud.
- `aria-live="assertive"` is used to ensure whenever the scope component is updated the new score is read aloud
## Screencasts
- [VoiceOver Example](https://vimeo.com/173343351)
## Accessibility Proclaimer
This component strives for WCAG 2.0 Guidelines Level AA. Please [open an issue](https://github.com/jpdevries/a11y-quiz/issues/new) for any accessibility issue, feedback, or concern.