Guideline-journey.com: an interactive experiment with WCAG JSON
Guideline-journey.com
Guideline-journey.com is an experiment I made in making the Web Content Accessibility Guidelines (WCAG) interactive in a slightly bespoke way. It is a small HTML/CSS/JS application using JSON formatted data from the guidelines.
The new stuff
Several versions of WCAG were recently released in JSON format. This project aimed to make use of this format into a small application, and giving proper credit back and linking back to the “mother project” of WAI and WCAG.
Concept
This practical project in progress was heavily inspired by my experience of making WSG-o-matic, detailed in a blog post.
Design goals
- Encourage Exploration
- Get someone deep into the content fast - ideally they will read their first successs criteria faster!
- Provide a fun or independent feeling experience
The basic idea… get people clicking/activating buttons! Just find something, a small chunk of the big texts, and engage with a new idea.
Development
You can see the basic flow of development in the GitHub Repository. Starting with the HTML5 Boilerplate project for a start, I began working to trim it and refine it for my basic experience in the form of a small “Single Page Application”.
Notably there is no dependencies to npm install… just a need to run a web server on the root folder.
Progress and experiences so far
As of right now, on a fresh load, it is pretty small!
6 requests 93.31 kB / 78.77 kB transferred
A significant sustainability and performance need is for the JSON to be cached on subsequent requests.
- The JSON is almost blemish-free. I have encountered many patterns that needed some adjustment to make my app work so far, but nothing that seemed to be a problem with the JSON. Thanks WCAG Contributors and editors!
- Its a little tricky keeping focus and took me a day or two to figure out how to start to ensure that focus was not lost when new dynamic content was loaded into the section container that is the “root” of this app. I hope its workable now, always improving it.
- People seem to like it overall! Ive had a great response
Some considerations
As of writing this, the back button doesn’t fully work yet. That is my big TODO: on the roadmap!
- Semantic HTML wherever possible but this is still a JS powered small app.
- Tested with Keyboard only usage
- Testing with Arc Toolkit, Axe DevTools, Lighthouse
- Landmarks - Header, Main, Footer
- Headings (overall, refining) - Trying to keep moving one level at a time
- Color Contrast paid attention to
- Using Semantic Buttons for interactive content inside page, styled anchor links for external links back to WAI etc
A work in progress
I have heavily marked up the project as in progress and under construction… even though that is kind of out of fashion… to indicate that its very much a learning aid for me and hopefully others.