Ashley Sheridan​

Improvements to the Accessibility Checklist Tool

Posted on


Since the initial blog post about my accessibility checklist tool, I've made further improvements which make the tool easier to use and more useful.

Navigating to Previous Steps

The first version was extremely linear, only allowing you to start from the beginning and progress to the next step. Now, you can move back to any previous step by using the link in the main steps outline.

Steps bar showing current step as 2 with cursor over step 1 having hover state indicating it is a link

This should make it easier to correct mistakes made during earlier selections.

Visual Progress Indicator

I've now added a more visual indicator to show the show the progress of checkedd off guidelines. Earlier, this was just a basic line of text that said you had marked of x of y tests. Now, the percentage of completeness is shown on a circular progress bar to make it immediately more obvious how much is left to complete.

Circular progress bar showing what percentage of guidelines has been checked off

Saving State

You can now save and load your current state, to allow you to more easily leave and return to your list another day.

State is saved into your local storage, so it only follows as far as your current browser. This choice has been made with privacy in mind, paving the way ahead to ensure that whatever direction the app takes, privacy will be essential to its users.

Currently, only one state can be saved at a time, and a prompt will warn you if you attempt to save a state whilst one already exists.

The save confirmation modal warning about overwriting an existing save

Likewise, when loading a saved state, a prompt will warn about your current selections. This all ensures that you don't accidentally make a mistake that can't be undone.

The load confirmation modal warning about loading a save that would overwrite the current state

Improve Snippet Tests

Some code snippetes for testing were broken, through a mix of bad escaping and wrong syntax when minified. These problems have been resolved, some tests have been improved, and some tests have been added to guidelines where appropriate.

Where Can You Get These Updates?

The live version of the accessibility checklist tool is updated regularly to follow the latest from the source code, but you're also welcome to check the project out and build it yourself, or fork it if you wish.


Leave a comment