Making Accessibility Visible
Accessibility of web pages can be hard to observe. These bookmarklets help web developers and designers see the "big picture" regarding web accessibility.
The bookmarklets do this by:
- Making otherwise hidden accessibility features on web pages (like ARIA landmarks, roles, labels and descriptions and alternative text for non-text objects) more visible
- Showing whether HTML markup (like lists, headings, label elements, and appropriate landmark roles) is used with proper semantics for accessibility
- Flagging elements or regions on web pages where information that could improve accessibility (like elements not contained in landmarks, image alt text or long descriptions, list accessible names or descriptions, or form control labels) is missing
For example, having headings highlighted in the screenshot below allows a quick visual inspection of their structure and nesting. The headings bookmarklet is just one available in this free collection.
To get started using the bookmarklets, follow the installation instructions.
Our bookmarklets are based on WCAG 2.0, ARIA 1.0, and HTML5 requirements. They are designed for use on modern desktop browsers (Chrome, Firefox, Safari, Opera, and IE 9 or above). For more about what each bookmarklet offers, see the documentation.
The bookmarklets make accessibility information visible by showing information on top of the page that relates to the design of accessible web resources. They are intended as a helpful aid for web designers and developers. They are not intended to provide specific compliance results or recommendations.
These bookmarklets were originally created by Pixo and Disability Resources and Educational Services (DRES) at the University of Illinois at Urbana-Champaign. The bookmarklets and this web page are open source in GitHub, and anyone can contribute.
Special credit goes to the following contributions:
- Brandon Bowersox-Johnson at Pixo contributed documentation and strategic advice;
- Jon Gunderson at DRES provided leadership on standards and techniques and helped advise the group on usability;
What is a bookmarklet?