Skip to main content

A11Y Bookmarklets

These bookmarklets/favelets are designed for evaluating web accessibility, but are not necessarily tools for web developers. The primary purpose of these bookmarklets is to facilitate data collection of a site's accessibility alongside supporting some basic human verification.

The bookmarklets and their supporting code are an open source project on GitHub released under the Mozilla Public License Version 2.0.

Installation

To use any of the bookmarklets, drag the Bookmarklet to your browser's bookmark toolbar. Alternatively, manually create a new bookmark and copy-paste the bookmarklet code (see the Bookmarklet Details below) into the bookmark's location/URL.

A11Y Reporter A11Y LibGuide A11Y Graphics A11Y Tabbings

A11Y Bookmarklet Details

The A11Y Reporter performs and reports on a variety of accessibility tests and heuristics. The findings are reported in a human-readable, tab-separated format for easy insertion into a spreadsheet or database. Any columns requiring human validation have column headers beginning with "Human:".

Integrated into the report tool are the A11Y Graphics and A11Y Tabbings tools. These are meant to support the human validation efforts.

Tests & Heuristics
  • The full axe-core ruleset
  • Outline of headings for current page view
  • Heuristic detection of possible headings
  • ARIA/HTML5 Landmarks
  • Ordered list of detectable tabbable elements (requires human validation)
  • All graphic elements (img, svg, etc.) and their accessible name values (requires human validation)
  • Embedded audio/video elements (requires human validation>
  • Linked files and documents (requires human validation)
  • Detect of popular font-based icon frameworks
Usage Notes
  • Support tools are available under the Instructions section of the Reporter interface
  • After closing the Reporter, refresh/reload the page if you wish to use the page or if you want to run more tests. The Reporter tool does its best to not leave aftereffects, but this is not guaranteed.
Code

The A11Y LibGuide bookmarklet is a specialized version of the A11Y Reporter tool for Springshare's LibGuides platform. In addition to the general accessibility tests and heuristics, additional tests are performed specific to LibGuides:

LibGuide Specific Tests & Heuristics
  • Gathers information about the guide's layout (top or side navigation), use of a friendly URL, and any associated content owners (based on presence of profile boxes).
  • Adjusted information about graphics that includes tagging if an image is a book cover from the "Book from the Catalog" widget.
  • Detects potential copy-paste formatting of text that does not meet your regular formatting.
  • Adjusted information about linked files on guides, including the item's internal asset ID.
Usage Notes
  • This tool runs the same as the Reporter tool save for the different tests and heuristics. This includes the integration of the Graphics and Tabbings tools.
  • Running the LibGuides tool on a non-LibGuide page will produce erroneous results without any warning. Do not do this if you want useful data.
  • This tool works best on individual guide pages and may produce mixed results on other pages (e.g., landing page, A-Z list, search results, etc.).
Code

The A11Y Graphics bookmarklet supports review of graphical elements on a page. Upon loading, one can review the accessible name and any additional description if available.

The A11Y Graphics tool is integrated into the A11Y Reporter and A11Y LibGuides bookmarklets to facilitate human validation on the quality of accessible descriptions of graphics on a page.

Usage Notes
  • The bookmarklet detects all graphics in <img>, <svg>, and [role="img"] elements on the page. The tool does not currently detect <input type="image"> elements.
  • Graphics due to use of background-image CSS or font-based symbols are NOT detected by this tool.
  • When possible, graphics are displayed as they appear on a page using the same CSS and dimensions.
  • Due to image loading protocols, if an image does not appear properly in the tool, try moving to another image and back to trigger correct rendering.
Code

The A11Y Tabbings bookmarklet allows one to review the tabbable/focusable elements on a page. The interface follows along the page with the current focus on the page. At each focused element, the accessible name is provided.

The A11Y Tabbings tool is integrated into the A11Y Reporter and A11Y LibGuides bookmarklets to facilitate human validation on the quality of accessible descriptions of graphics on a page.

Usage Notes
  • The Tabbings tool starts at the beginning of the document and will reset to the position if necessary. You can press R at any time to reset the tabbing to this starting point.
  • The tabbing interface follows focus change. Generally, focus is changed via the TAB and Shift+TAB keys. For some interactive elements, the arrow keys may be used.
  • If the current focus is not visible, the F will draw a border around the current element. This feature should not be used when determining if the focus meets visibility requirements.
  • If a focus change moves to an element that was not expected (often due to dynamic changes in the DOM), the tool will report this sudden skip. Similar messages are indicated if the tab was expected but in a different order.
Code

Security Issues

Due to website Content Security Policies, many sites will not allow bookmarklets to run. Technically, this is a known browser implementation issue that has been known for quite a while. Until browsers determine a way to allow trusting of bookmarklets, these tools cannot be used on their own without the aid of other tools. The following browser extensions can temporarily mitigate any CSP restrictions:

Mozilla Firefox: Laboratory CSP Toolkit
This add-on allows one to disable any CSP policy temporarily for a site. To do so, click on the Laboratory icon. When the Content Security Panel opens, check the box that reads 'Record this site (will disable existing CSP while recording)'. Reload the page and you will be able to run any bookmarklet. When done, open the extension again and uncheck the box.
Google Chrome: Disable Content-Security-Policy
This extension allows one to toggle on and off the CSP for any site. To use, click the Disable CSP icon. Reload the tab. Any page loaded in the tab will be able to run any bookmarklet. To reactivate CSP for the tab, click the icon again or simply close the tab.

Acknowledgments

This project owes its completion to the open source efforts by dequelabs, davidtheclark, and WhatSock. Additional thanks go to the many fruitful conversations on the Web A11Y slack.