The Accessibility Bookmarklets are visualization tools that provide web accessibility testers with an initial view that indicates whether accessibility issues exist on a web page. For example, the Headings bookmarklet makes it readily apparent when heading levels are inappropriately skipped.

My Role

I was the lead designer and developer, working with two other accessibility experts and one other developer.

The project stakeholders, in conjunction with the design team, determined early on that the bookmarklets were not intended to provide detailed web accessibility evaluation data.

Rather, they would allow anyone with an interest in web accessibility to become familiar with certains categories of accessibility requirements through visualizations that clarify relationships among HTML elements.

These categories would include HTML heading structure, ARIA landmark regions, form control labels, list markup for grouping sequences of related items, and image alternative text.

They would be easy to install and because they are written in pure JavaScript, are compatible with all modern browsers. They are typically installed as bookmarks in the browser's 'Favorites' toolbar.

Useful for people just learning about web accessibility, as well as seasoned veterans

Labels for highlighted regions

Do not require sophisticated knowledge of accessibility requirements

Overlapping regions, especially with the Landmarks bookmarklet, led me to incorporate drag-and-drop functionality for the highlight overlays, which allows users to inspect partially hidden regions.

User testing to determine whether drag-and-drop functionality was discoverable