Accessibility bookmarklets

Bookmarkets are links that can be installed the browser’s bookmarks (or favorites) bar. These accessibility bookmarkets contain Javascript that can run on any web page to help visualize accessibility information about the content.

Installation

A bookmarklet is a link that contains JavaScript. When a bookmarklet link is activated, the browser runs the JavaScript code that it contains.

The idea is to have these links in the bookmarks bar in the browser, so you can use them when you want in any page.

The most common way of installing a bookmarklet is to drag and drop the bookmarklet link into your browser's bookmarks (or favorites) toolbar (watch the video to see how to do it in Fiferox). The shortcut for toggling the display of the bookmarks toolbar is usually Shift + Ctrl/Cmd + B.

There are alternative installation methods (such as copying the link location of the bookmarklet link, create manually the bookmarlet using the browser's Bookmark Manager, and paste it in the URL field.

This video shows visually how the bookmarklets can be dragged to the bookmarks bar. If your browser does not show this bar, go to "Bookmarks" option in the browser menu to show it.

Bookmarklets

Bookmarklet	Used to
aria-label	Helps creating an indicator that is placed in the center of any visible element with aria-label attribute. When moving the mouse over the indicator, it shows the content of the aria-label attribute. It also shows an outline surrounding the element (so it is easier to identify it)
target size	This bookmarlet helps creating some indicators in the center of all interactive elements. The green ones mean that the target size is 24x24 CSS pixels or bigger. The others (red ones), are smaller. You have to review them and see if, even if they are smaller than the requirement, they are exceptions.
isolator	It solates elements in the view, so the rest of contents disappear. After activating it, moving the mouse over the contents generates an outline that surrounds the element to isolate. When the element to isolate is identified, click the mouse and the rest of elements will be hidden. Clicking the bookmarklet again makes all the elements to be back. To facilitate the selection, when selecting the element to isolate, you can keep the mouse static in a position and use the arrow keys in the keyboard to modify the selection: up: to move the selection to the parent element down: to move it to the first child (if there is one) left: to move it to the previous sibling (if there is one) right: to move it to the next sibling (if there is one)
remover	It removes elements from the view. After activating it, moving the mouse over the contents generates an outline that surrounds the element to remove. When the element to remove is identified, click the mouse and it will be removed from the view. Clicking the bookmarklet again makes it appear again. To remove more than one element, keep the key Ctrl pressed while using it. To stop the selection, press the Esc key. To facilitate the selection, when selecting the element to remove, you can keep the mouse static in a position and use the arrow keys in the keyboard to modify the selection: up: to move the selection to the parent element down: to move it to the first child (if there is one) left: to move it to the previous sibling (if there is one) right: to move it to the next sibling (if there is one)
grayscale	Applies a filter to display all colors in grayscale
focus order	Shows the order of the focus when browsing with keyboard. When active, moving the mouse over the order indicator, outlines the element that is identified
toggle styles	Removes the styles (CSS and inline styles)
text spacing	This bookmarlet helps by applying styles to the texts based on accessibility requirements from WCAG, so you can check whether there is something (content or functionality) lost. In content implemented using markup languages that support the following text style properties, no loss of content or functionality occurs by setting all of the following and by changing no other style property: Line height (line spacing) to at least 1.5 times the font size; Spacing following paragraphs to at least 2 times the font size; Letter spacing (tracking) to at least 0.12 times the font size; Word spacing to at least 0.16 times the font size.

Bookmarklet

Used to

aria-label

Helps creating an indicator that is placed in the center of any visible element with aria-label attribute. When moving the mouse over the indicator, it shows the content of the aria-label attribute. It also shows an outline surrounding the element (so it is easier to identify it)

target size

This bookmarlet helps creating some indicators in the center of all interactive elements. The green ones mean that the target size is 24x24 CSS pixels or bigger. The others (red ones), are smaller. You have to review them and see if, even if they are smaller than the requirement, they are exceptions.

isolator

It solates elements in the view, so the rest of contents disappear. After activating it, moving the mouse over the contents generates an outline that surrounds the element to isolate. When the element to isolate is identified, click the mouse and the rest of elements will be hidden. Clicking the bookmarklet again makes all the elements to be back.

To facilitate the selection, when selecting the element to isolate, you can keep the mouse static in a position and use the arrow keys in the keyboard to modify the selection:

up: to move the selection to the parent element
down: to move it to the first child (if there is one)
left: to move it to the previous sibling (if there is one)
right: to move it to the next sibling (if there is one)

remover

It removes elements from the view. After activating it, moving the mouse over the contents generates an outline that surrounds the element to remove. When the element to remove is identified, click the mouse and it will be removed from the view. Clicking the bookmarklet again makes it appear again.

To remove more than one element, keep the key Ctrl pressed while using it. To stop the selection, press the Esc key.

To facilitate the selection, when selecting the element to remove, you can keep the mouse static in a position and use the arrow keys in the keyboard to modify the selection:

up: to move the selection to the parent element
down: to move it to the first child (if there is one)
left: to move it to the previous sibling (if there is one)
right: to move it to the next sibling (if there is one)

grayscale

Applies a filter to display all colors in grayscale

focus order

Shows the order of the focus when browsing with keyboard. When active, moving the mouse over the order indicator, outlines the element that is identified

toggle styles

Removes the styles (CSS and inline styles)

text spacing

This bookmarlet helps by applying styles to the texts based on accessibility requirements from WCAG, so you can check whether there is something (content or functionality) lost. In content implemented using markup languages that support the following text style properties, no loss of content or functionality occurs by setting all of the following and by changing no other style property:

Line height (line spacing) to at least 1.5 times the font size;
Spacing following paragraphs to at least 2 times the font size;
Letter spacing (tracking) to at least 0.12 times the font size;
Word spacing to at least 0.16 times the font size.

How to use

Once installed, these bookmarklets can interact with most web pages and applications