Definitive Guide to Accessibility Bookmarklets

A bookmarklet is a link that contains Javascript that you can run on any web page. It is a bookmark that runs javascript on the current page instead of taking you to a new page.

Bookmarklets help web developers and designers see the entire perspective on website, it helps view hidden accessibility information in web pages.

For Example:

  1. Bookmarklets shows the hidden accessibility features on web pages (like ARIA landmarks, roles, labels and descriptions and alternative text for non-text objects) more visible.
  2. Shows whether HTML markup (like lists, headings, label elements, and appropriate landmark roles) is used with proper semantics for accessibility.
  3. Flags elements or regions on web pages where information that could improve

They are also useful for manual inspection of web pages for functional accessibility features. Bookmarks are especially useful if a web page is very long and hard to observe.

One way of making bookmarklet is writing javascript, let us see the steps involved:

  1. Write javascript code that you want in a bookmarklet (using the console)
  2. Put javascript: in front of the code
  3. Wrap everything in an IIFE

But, The most common and easy way of installing a bookmarklet is to drag and drop the bookmarklet link into your browser’s bookmarks or favourite toolbar. The shortcut for toggling the display of the bookmarks toolbar in Chrome, Firefox and Safari is Shift + Ctrl/Cmd + B.

There are alternative, browser-specific installation methods such as copying the link location of the bookmarklet link and pasting it into the Location field of a bookmark that you create using your browser’s Bookmark Manager or Show All Bookmarks feature.

Let us find out about this in more detail:

Installation and Usage

  1. Choose the item for testing Eg: Headings, Forms, Images etc.
  2. Drag the bookmarklet on to your browser bookmarks bar.
  3. Each bookmarklet link must be installed separately, but you can successively install any combination of them to suit your needs.
  4. Now open the page to be tested on the browser.
  5. Click the item to be tested from your bookmarks. Eg If you want to check the heading structure of the page activate the heading bookmarklet.

Let’s discuss about the labels in brief:

  • Landmarks: Highlights all ARIA landmarks, including HTML5 tags that are interpreted as landmarks
Landmarks Bookmarklet to identify all Landmarks markup on a web page
Landmark Bookmarklet
  • Headings: Highlights all H1 through H6 elements on a page
Heading Bookmarklet to identify all Headings on a web page
Heading Bookmarklet
  • List: Highlights every ordered list, unordered list, and definition list on a given page, along with how many list items exist for each list
Lists Bookmarklet to identify all Lists markup on a web page
List Bookmarklet
  • Images : Highlights the types of images on a page, along with their alt text

Image Bookmarklet to identify all Image markup on a web page
Images Bookmarklet
  • Forms: Highlights form-related elements and provides information on their associated labelling techniques, grouping labels and ARIA roles
Form Bookmarklet to identify all Form Labels, Field set and Legend Attribute on a web page
Form Bookmarklet

How to Use

How to use a Bookmarklet for Testing the Accessibility of a Web Page

Once installed, these bookmarklets can interact with most web pages.

  • To activate, click a bookmarklet in your bookmarks or favorites bar
  • To de-activate, simply click it again or refresh your page
  • It will also de-activate when you resize your window or navigate to another page

You can run multiple bookmarklets on the same page at the same time.

Screenshot showing available bookmarklet options with a toggle button next to it, giving us the option to choose what bookmarklets to view.
Bookmarklet Toggle Option

Some web pages have Content Security Policies that do not allow web browsers to run inline scripts. Because bookmarklets are functionally equivalent to inline scripts (when activated, they are inserted into the DOM of the web page), the browser will prevent any and all bookmarklets from running on such pages.

Supported Browsers

The drag-and-drop installation works on modern desktop browsers including:

  • Chrome, Firefox, Opera, and Internet Explorer 9+ on Windows 7, 8.x, and 10
  • Chrome, Firefox, Safari, and Opera on OS X
  • Bookmarklets are also supported on iOS and Android mobile devices
Screenshot of adding the Javascript of a bookmarklet (ARIA-Hidden) to the bookmark menu. Once saved, the bookmarklet will show up in the bookmark menu.
Example of Adding Javascript for Bookmarklet to the Bookmark menu

Installation using Various Browsers

As we had learned earlier that Bookmarklets works on most of the browsers, let us discuss in detail about the Installation steps on each of these browsers.

Chrome

To show the Bookmarks Bar in Chrome, press Ctrl + Shift + B.

To Install bookmarklet on Chrome using the keyboard:

  1. Press Ctrl + Shift + O to bring up Bookmark Manager.
  2. Select the “Organize” button menu.
  3. Select “Add New Bookmark”.
  4. Name the bookmark
  5. Copy and paste the JavaScript URL
  6. Press Save

Edge

To show the Favorites Bar in Edge (Chromium), press Ctrl + Shift + B.

To Install Bookmarklet on Edge (Chromium) using the keyboard:

  1. Press Ctrl + Shift + O to bring up Bookmark Manager.
  2. Select the “Organize” button menu.
  3. Select “Add New Bookmark”.
  4. Name the bookmark
  5. Copy and paste the JavaScript URL
  6. Press Save

Firefox

To show the Bookmarks Bar in Firefox, Press (Alt + V), select Toolbars, then “Bookmarks Toolbar”.

To Install Bookmarklet on Firefox using the keyboard:

  1. Right click on the link Ctrl + Shift + F10
  2. Select “Bookmark This Link”

Internet Explorer

To show the Favorites Bar in Internet Explorer, Press Alt + V, select Toolbars, then “Favorites Bar”.

To Install ANDI on Internet Explorer using the keyboard:

  1. Right click the link Ctrl + Shift + F10
  2. Select “Add to favorites bar”

Safari

To show the Favorites Bar in Safari, Press Command + Shift + B.
Unfortunately, Safari does not offer a simple keyboard accessible alternative to set a JavaScript favelet link as a favorite.

Explore Accessibility Bookmarklets

  1. Headings Bookmarklet
  2. Lists Bookmarklet
  3. Tables Bookmarklet
  4. Images Bookmarklet
  5. ARIA-Hidden Bookmarklet
  6. Iframe Bookmarklet
  7. Text Spacing Bookmarklet
  8. Tabindex Bookmarklet
  9. Force Focus Bookmarklet
  10. ARIA-Label Bookmarklet