/a11y-quiz

An accessible HTML quiz about accessibility

Primary LanguageHTMLMIT LicenseMIT

a11y-quiz

An accessible HTML quiz about accessibility.

Demo

Take the quiz.

Getting Started

Once you install the Node dependencies the Node server will be ready to launch.

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:

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

<main>, <form>, <button>, <fieldset>, <legend>, <input>, <label>, <nav>, and <footer> 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 <h6>.

A <button type="reset"> 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 <form action> 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 <fieldset> 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 <h6> 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

Accessibility Proclaimer

This component strives for WCAG 2.0 Guidelines Level AA. Please open an issue for any accessibility issue, feedback, or concern.