{"id":18300423,"url":"https://github.com/jpdevries/a11y-quiz","last_synced_at":"2026-01-21T14:35:57.790Z","repository":{"id":140004590,"uuid":"62556789","full_name":"jpdevries/a11y-quiz","owner":"jpdevries","description":"An accessible HTML quiz about accessibility","archived":false,"fork":false,"pushed_at":"2016-07-06T14:49:29.000Z","size":69,"stargazers_count":4,"open_issues_count":1,"forks_count":1,"subscribers_count":1,"default_branch":"gh-pages","last_synced_at":"2025-04-09T09:37:45.236Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jpdevries.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-07-04T11:21:22.000Z","updated_at":"2021-11-17T14:38:22.000Z","dependencies_parsed_at":"2023-05-01T03:49:04.354Z","dependency_job_id":null,"html_url":"https://github.com/jpdevries/a11y-quiz","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/jpdevries/a11y-quiz","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jpdevries%2Fa11y-quiz","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jpdevries%2Fa11y-quiz/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jpdevries%2Fa11y-quiz/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jpdevries%2Fa11y-quiz/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jpdevries","download_url":"https://codeload.github.com/jpdevries/a11y-quiz/tar.gz/refs/heads/gh-pages","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jpdevries%2Fa11y-quiz/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28634850,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-21T04:47:28.174Z","status":"ssl_error","status_checked_at":"2026-01-21T04:47:22.943Z","response_time":86,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-05T15:12:22.453Z","updated_at":"2026-01-21T14:35:57.776Z","avatar_url":"https://github.com/jpdevries.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# a11y-quiz\nAn accessible HTML quiz about accessibility.\n\n## Demo\n[Take the quiz](https://jpdevries.github.io/a11y-quiz/).\n\n## Getting Started\nOnce you install the Node dependencies the Node server will be ready to\u0026nbsp;launch.\n\n```bash\ncd a11y-quiz\nnpm install\nnode server.js\n```\n\nYou should be able to access the quiz at http://localhost:1185. To run the quiz on a different port use the `PORT` environmental\u0026nbsp;variable:\n\n```bash\nPORT=8080 node server.js #http://localhost:8080\n```\n\n_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\u0026nbsp;endpoint._\n\n## HTML Semantics\n`\u003cmain\u003e`, `\u003cform\u003e`, `\u003cbutton\u003e`, `\u003cfieldset\u003e`, `\u003clegend\u003e`, `\u003cinput\u003e`, `\u003clabel\u003e`, `\u003cnav\u003e`, and `\u003cfooter\u003e` 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\u0026nbsp;`\u003ch6\u003e`.\n\nA `\u003cbutton type=\"reset\"\u003e` is used to allow the form to be reset both synchronously and\u0026nbsp;asynchronously.\n\n## Progressive Enhancement\nThis quiz is HTML\u0026ndash;first meaning that all the questions are accessible even with JavaScript\u0026nbsp;disabled. Synchronous form submissions are supported by the Node\u0026nbsp;server.\n\n![](http://j4p.us/3g3a2H3Q070m/Screen%20Shot%202016-07-04%20at%202.09.55%20PM.png)\n\nJavaScript is used to progressively enhance the quiz by showing one question at a time as well as asynchronously calculating and displaying the\u0026nbsp;score.\n\n![](http://j4p.us/3b3U0a1A0A28/Screen%20Shot%202016-07-05%20at%201.35.01%20AM.png)\n\nIn an effort to be mindful of user bandwidth, jQuery is only loaded if native `new FormData().entries()` support detection\u0026nbsp;fails.\n\n## CDN Fallback\nIf 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\u0026nbsp;locally. This helps keeps the asynchronous experience accessible even if the CDN is blocked or\u0026nbsp;down.\n\n## Synchronous Endpoints\nA simple Node backend, `server.js`, is used to support plain HTML. The `\u003cform action\u003e` 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\u0026nbsp;again.\n\n![](http://j4p.us/030O1m080z3Y/Screen%20Shot%202016-07-05%20at%201.33.01%20AM.png)\n\n## DRY JavaScript\nJavaScript 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\u0026nbsp;endpoint. This means adding a new answer to the answer bank only requires a change in one\u0026nbsp;place.\n\n## Adding Questions\n - Add a `\u003cfieldset\u003e` to `index.html` and make sure to follow the same HTML structure and semantics as the others\n - Add the answer to your question to `./assets/js/bank.js`\n\n## ARIA\n - `aria-hidden=\"true\"` is used to prevent numeric code representations of HTML tags like `\u003ch6\u003e` from being read aloud. Instead `.visually-hidden` text like \"Heading Level 6\" will be read\u0026nbsp;aloud.\n - `aria-live=\"assertive\"` is used to ensure whenever the scope component is updated the new score is read\u0026nbsp;aloud\n\n## Screencasts\n - [VoiceOver Example](https://vimeo.com/173343351)\n\n\n## Accessibility Proclaimer\nThis 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\u0026nbsp;concern.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjpdevries%2Fa11y-quiz","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjpdevries%2Fa11y-quiz","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjpdevries%2Fa11y-quiz/lists"}