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.

Headings bookmarklet activated on W3C's website

Usage

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.

Contributors

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:

  • Landi Lark at Pixo created the initial Landmarks bookmarklet and has done significant Javascript development for other bookmarklets, as well as developing the Accessibility Bookmarklets website that provides documentation and installation resources;
  • Nick Hoyt at DRES created the Javascript framework used to construct the current versions of the accessibility bookmarklets, which provide drag-and-drop functionality and access to HTML5 and ARIA standards-based information such as ARIA roles and accessible name calculations;
  • 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;
  • Aaron McNeal at Pixo worked on responsive CSS and Javascript development.

What is a bookmarklet?

A bookmarklet is a link that contains Javascript that you can run on any web page.