Accessibility Bookmarklets

Bookmarkets are links that you can install in your browser’s bookmarks or favorites bar. These accessibility bookmarkets contain Javascript that you can run on any web page to help visualize accessibility information about the content. These bookmarkets are intended for desktop/laptop browsers, not mobile devices. See the installation page for more details about installation and getting started.

Bookmarklet Features

Each bookmarklet puts a colored border, or overlay, around what it highlights (landmarks, headings, etc). In the upper right-hand corner of the overlay, there is a label. When you hover over a label, a tooltip will pop up with additional information. The table below explains what the content of the label and tooltip will be for each bookmarklet.

	Label	Tooltip	Related Specifications
Landmarks	One of the following ARIA Roles: complementary contentinfo application navigation banner search main	The HTML element and the accessible name (ACC. NAME) for that landmark	Accessible Rich Internet Applications (WAI-ARIA) 1.0 Specification: Landmark Roles ARIA11: Using ARIA landmarks to identify regions of a page ARIA13: Using aria-labelledby to name regions and landmarks ARIA14: Using aria-label to provide an invisible label where a visible label cannot be used HTML5: Sections
Headings	The HTML element (heading level) for that heading	The text content inside of the heading	G130: Providing descriptive headings G141: Organizing a page using headings HTML 4.01 Specification: Headings: The H1, H2, H3, H4, H5, H6 elements
Lists	The HTML element (list type) for that list	The accessible name (ACC. NAME) for and the number of immediate child list items in that list	HTML 4.01 Specification: 12.2 The A element HTML 4.01 Specification: The title attribute Accessible Rich Internet Applications (WAI-ARIA) 1.0: The aria-describedby attribute Accessible Rich Internet Applications (WAI-ARIA) 1.0: The aria-label attribute Accessible Rich Internet Applications (WAI-ARIA) 1.0: The aria-labelledby attribute H30: Providing link text that describes the purpose of a link for anchor elements
Images	The HTML element (img, area, or svg tags) for that image	The accessible name (ACC. NAME) for that image	HTML 4.01 Specification: 13.8 How to specify alternate text HTML 5 Specification: 12.2 The img element Accessibility at Penn State: Text Equivalents for Images Accessible Rich Internet Applications (WAI-ARIA) 1.0: The img role Diagram Center: Digital Image And Graphic Resources for Accessible Materials G94: Providing text alternative for non-text content that serves the same purpose and presents the same information as the non-text content G95: Providing text alternatives that provide a brief description of the non-text content
Forms	The HTML form-related element (button, input, keygen, meter, output, progress, select, textarea)	The HTML element and, when applicable, the accessible name (ACC. NAME), the source of the accessible name (FROM), the accessible description (ACC. DESC.), the source of the accessible description (FROM), the grouping label (GRP. LABEL), the source of the accessible grouping label (FROM) and the ARIA role.	HTML5 Form Elements Accessible Name and Description: Computation and API Mappings 1.1 H71: Providing a description for groups of form controls using fieldset and legend elements HTML 4.01 Specification: The label element H44: Using label elements to associate text labels with form controls Accessible Rich Internet Applications (WAI-ARIA) 1.0: The aria-label attribute Accessible Rich Internet Applications (WAI-ARIA) 1.0: The aria-labelledby attribute H65: Using the title attribute to identify form controls when the label element cannot be used HTML 4.01 Specification: The title attribute

Accessible Names

Accessible name is the name communicated to assistive technologies. It can be computed using many different HTML and ARIA attributes, text content, and mixed content.

Working with Overlays

The outlined area (e.g., a heading outline with label 'h2') is referred to as an overlay. It has the same geometry as the element it outlines.
Hovering over the label of an overlay (the solid-color rectangle in the top-right corner) will display a tooltip with information on the underlying element's type, label, text content or accessible name, as detailed above.
You can move an overlay with mouse drag-and-drop using its label as the drag handle. After moving an overlay, double clicking its label will move the overlay back to its original position.
The last overlay that was clicked or moved has the highest z-index of all overlays. Thus if the label of one overlay is partially obscured by the label of another, clicking the partially obscured label will expose the entire label.
In some cases, one overlay may completely obscure another, hiding even the label of the other overlay. We plan to address this issue by adding page-level information that indicates how many overlays of each type were found on the page.

Report a Bug? Want to Contribute?

This open source project welcomes all interested collaborators and contributions. If you have a bug or a feature suggestion, please create an issue in GitHub. If you want to contribute a code fix or new feature, feel free to fork the bookmarket repository in GitHub and submit a pull request.