Skip to content
tally learning

Single-Purpose Bookmarklets

15 minute read

Last updated:

Summary

Section titled “Summary”

Most automated accessibility test tools check many requirements at once. An accessibility bookmarklet, or favelet, is a special bookmark designed for a single purpose. It allows you to check a single accessibility requirement. A bookmarklet contains code, usually written in JavaScript, that is easy to install and use. These small but mighty tools may only do one task at a time, but they can be quicker and easier than a multipurpose test tool. This article looks at some of the many single-purpose bookmarklets available.

Overview

Section titled “Overview”

Even though there are many automatic tools for checking website accessibility, bookmarklets remain useful. The advantages of bookmarklets are that they:

  • are easy to install and use;
  • can be a handy tool to check a specific requirement;
  • usually show test results that are easy to understand.

For example, suppose you want to see how your website’s Home page looks for people who override specified text spacing to improve their reading experience. You want to verify that the content is still readable and operable. You can run a special Text Spacing Bookmarklet that will change the look of your website’s Home page according to style properties defined in WCAG Success Criterion 1.4.12 Text Spacing.

Bookmarklets also fill a void when new WCAG requirements are published. Multipurpose test tools from large accessibility companies take time to update. Bookmarklets are often available to test new requirements long before you can test them with other tools.

Who is Helped

Section titled “Who is Helped”

With so many single-purpose bookmarklets available, one or more of these handy tools help almost every disability group. This article discusses each tool and includes information on who it helps.

General Guidance

Section titled “General Guidance”

Bookmarklet How-to’s

Section titled “Bookmarklet How-to’s”
  • How to install a bookmarklet: Simply drag and drop a link to your bookmarks bar. If your bookmarks bar is not displayed, press Ctrl + Shift + B.
  • How to use bookmarklets: Navigate to a web page you want to check and click on a saved bookmark. An activated bookmarklet will run its code and instantly show you the result.
  • How to turn the bookmarklet off: Refresh the webpage.

Some bookmarklets do not have draggable links, ready to be dropped onto the bookmarks bar. Here is how to add a bookmarklet if all you have is JavaScript code:

  1. Press Ctrl + Shift + O (or right-click on the bookmarks bar) to open Bookmarks Manager.
  2. In the upper right corner, click on the vertical ellipsis to open the Organize menu. Choose “Add new bookmark” if you’re in Chrome browser or click on the “Add Favorite” button in the Edge browser.
  3. In the opened dialog window, type in the name for your bookmarklet, e.g., “Page Title”, and paste the bookmarklet’s JavaScript code in the URL text field. Code example:
javascript:(function(){prompt('Press Command + C to Copy Page Title', document.title);})();

The example above uses Paul J. Adam’s Page Title Bookmarklet. This bookmarklet is discussed in more depth later in this article in the Page Title Bookmarklet section.

WCAG Criteria and Bookmarklets

Section titled “WCAG Criteria and Bookmarklets”

Table 1 lists the bookmarklets reviewed in this article and the WCAG criterion they check. These are a representative sampling of the many bookmarklets available.

Table 1: WCAG Criteria and Bookmarklets
BookmarkletWCAG Success Criteria
Images
Title Attributes
Headings
Landmarks
Lists

1.3.1 Info and Relationships

Forms

1.3.1 Info and Relationships

Tables

1.3.1 Info and Relationships

Contrast Checker
Grayscale
Text Spacing

1.4.12 Text Spacing

Force Focus
Page Title

2.4.2 Page Titled

Tabindex

2.4.3 Focus Order

44x44 Pixel Cursor

2.5.5 Target Size (Enhanced)

ARIA

4.1.2 Name, Role, Value

Images Bookmarklet

Section titled “Images Bookmarklet”

This bookmarklet shows alternative (alt) text for images or annotates an image if it has no alt text. Alternative text is the only way for blind people to know what an image is about.

Figure 1 below, the Accessible Community Home page, illustrates how this bookmarklet works. The bookmarklet marks the image in the upper right corner of the page “NO ALT” and displays the alt text for the large image at the bottom of the page.

Images Bookmarklet shows alternative text over a bitmoji and identifies a logo as an image without alt text. For better visibility, the bookmarklet highlights alternative text in yellow.
Figure 1: Web Page With Applied Images Bookmarklet

Title Attributes Bookmarklet

Section titled “Title Attributes Bookmarklet”

This bookmarklet helps to find missing or improperly defined <title> attributes. When executed, it displays all the titles on the page. A proper title is important for people relying on screen readers, as it helps describe web page content. When no other accessible name is available, most screen readers can use the title attribute to supply an element’s name.

Figure 2 below shows a video on the U. S. Department of Health and Human Services Home page. With the bookmarklet applied, we can easily see the video’s title without needing other testing tools or checking the source code.

Web page with the title highlighted in yellow on the video thumbnail.
Figure 2: Web Page With Applied Title Attributes Bookmarklet

Headings Bookmarklet

Section titled “Headings Bookmarklet”

Well-structured headings organize content, which helps people with cognitive and learning disabilities. They are also important for screen reader users. Headings help them to navigate a web page easily. This bookmarklet shows the opening and closing tags around headings (<h1> to <h6>) as well as elements with role=heading and aria-level=1 through 6.

Figure 3 below, the Accessible Community Home page, illustrates how this bookmarklet works.

The bookmarklet surrounds all Headings on the web page with corresponding `<H>` tags highlighted with yellow for better contrast.
Figure 3: Web Page With Applied Headings Bookmarklet

Landmarks Bookmarklet

Section titled “Landmarks Bookmarklet”

You should include all content on the webpage inside landmark regions. This guidance helps screen reader users quickly navigate a webpage by skipping unnecessary content blocks. To verify this is true, you can use this bookmarklet. It instantly shows what content is in each landmark region with a green border around it and the name of each landmark region. If any content falls outside the landmark regions, this tool also makes that easy to see.

Figure 4 below, the Accessible Community Home page, illustrates how this bookmarklet works. The Landmark Bookmarklet visually divides the web page into blocks outlined by green rectangles. Each block has a name, highlighted in yellow, that identifies the header, main, and two navigation (nav) landmark regions.

The Landmark Bookmarklet visually divides the web page into blocks. The bookmarklet marks the top part of the page as the header region and the area below it as the main region. The header region contains two navigation landmark regions.
Figure 4: Web Page With Applied Landmarks Bookmarklet

Lists Bookmarklet

Section titled “Lists Bookmarklet”

Lists help organize content by grouping related information to make it easier to understand. Organized content helps people with cognitive and learning disabilities.

This bookmarklet checks for list elements (<ul>, <ol> and <dl>) on the page. This bookmarklet finds all elements coded as lists, even if they don’t look like lists. For example, websites often use lists for site navigation menus. It highlights these lists and shows the list markup so you can verify whether they are properly structured, which is helpful for people who use assistive technologies like screen readers.

Figure 5 shows a web page from the Americans with Disabilities Act (ADA) Standards for Accessible Design that has several lists.

A web page shows one of the accessible design standards. The page is visually organized with several lists.
Figure 5: Web Page With Several Lists

Figure 6 shows the same web page with the Lists Bookmarklet applied. The bookmarklet has identified an ordered and unordered list. The displayed markup makes it easy to see that the lists and their associated list items are correctly marked.

If a list contains an error, the bookmarklet outlines the element where the error occurs and marks the whole list with a red border. It also adds a red cross with a short error description.

A web page shows one of the accessible design standards. The Lists Bookmarklet adds green outlines around recognizable lists. The unordered list with Table of Contents is on the left part, and the ordered list with Standards exceptions is on the right. The bookmarklet shows the list markup around each element, highlighting all tags for lists and list items in yellow for better visibility.
Figure 6: Web Page With Applied Lists Bookmarklet

Forms Bookmarklet

Section titled “Forms Bookmarklet”

Form completion is the most challenging task on a web page. Developers must implement forms correctly to reduce errors when filling them out and ensure assistive technologies will work with them. This bookmarklet helps identify form-related issues, such as missing labels, placeholders used instead of labels, or labels with a FOR/ID mismatch.

Forms Bookmarklet outlines all form fields with a green border. It shows the code for all form fields and their corresponding labels, highlighted in yellow for better contrast.
Figure 7: Online Registration Form With Applied Forms Bookmarklet

Figure 7 above shows the Registration form on the Accessible Community Home page. The applied Forms Bookmarklet illustrates that this form is correctly implemented by outlining all form fields with a green border and displaying no errors. The bookmarklet also shows the code for all form fields and their corresponding labels, highlighted in yellow. For example, after applying the bookmarklet, the form field “Last Name” displays the corresponding code:

<label for=”mce-LNAME”>Last Name</label>
<input ID=”mce-LNAME”>

If the bookmarklet finds an error, it marks it with a red or orange outline, a red cross, and a short message in uppercase letters, e.g., “NO ID” or “NO ID MATCH.”

Tables Bookmarklet

Section titled “Tables Bookmarklet”

Information presented as a table helps sighted individuals process a large amount of data more easily. However, you must thoughtfully implement tables to ensure they are accessible and usable by people with low-vision or blind people who rely on screen readers. This bookmarklet helps identify accessibility issues by displaying the structure of <table> elements and identifying missing or improperly set table attributes.

Figure 8 shows an example of a data table from the Data Catalog, and Figure 9 demonstrates how the applied Table Bookmarklet transforms this table. The displayed markup makes it easy to see that all header (<th>) and data (<td>) cells in the table are correctly marked up. The header cells are additionally marked with an icon of a person in a wheelchair to indicate they are an accessibility feature.

Data Table with three columns and nine rows. The first row looks like a header row.
Figure 8: Web Page With a Data Table
All table headers have `<th>` tags, and all table cells have `<td>` tags. The Tables Bookmarklet highlights all tags in yellow for better visibility and shows no errors.
Figure 9: Web Page With A Data Table and Applied Tables Bookmarklet

If the bookmarklet finds an error, for example, when an ID references a non-existent ID, it marks it with a red cross, a red dotted outline, and a short message in uppercase letters, “NO ID MATCH”.

Contrast Checker Bookmarklet

Section titled “Contrast Checker Bookmarklet”

Good color choices make reading and understanding content much easier.

When activated, this bookmarklet opens a small popup window on the web page. To check the contrast, move the cursor to any object. The popup window will display the color contrast ratio and the recommended values. For example, see Figure 10 below. It shows the Registration form on the Accessible Community Home page. The applied Contrast Checker Bookmarklet illustrates that the dark green “Sign Up” button has a contrast ratio of 8.7:1 against the white background.

Registration form displays an applied Contrast Checker Bookmarklet at the bottom left corner. This bookmarklet illustrates that the “Sign Up” button against a white background has a contrast ratio of 8.7:1.
Figure 10: Online Registration Form With Applied Contrast Checker Bookmarklet

Grayscale Bookmarklet

Section titled “Grayscale Bookmarklet”

The Grayscale bookmarklet removes all colors from a web page and displays the page in shades of gray. This check provides a quick indication of color issues that may impact people who are color blind. If you cannot understand all the information when the page is in grayscale, you must add indicators like text labels or good contrast to ensure accessibility.

Figures 11 and 12 show the Accessible Community Home page and illustrate the same page in color and grayscale. You can still understand this page’s content after applying the Grayscale Bookmarklet.

Web page shown in its original blue-gray colors.
Figure 11: Web Page With Original Color
Web page shown in grayscale. All color is replaced with a corresponding shade of gray.
Figure 12: Web Page With Applied Grayscale Bookmarklet

Text Spacing Bookmarklet

Section titled “Text Spacing Bookmarklet”

Some people, primarily those with low vision, adjust text appearance to improve readability. Increased spacing between lines, words, and letters makes text easier to read.

This bookmarklet applies text formatting according to style properties defined in WCAG Success Criterion 1.4.12 Text Spacing. These changes can be helpful for all who want better readability. Web page authors can use this bookmarklet to ensure that their page is still readable after modifying the spacing and that there is no overlapped and truncated text.

Figures 13 and 14 show the Accessible Community Home page and illustrate the same page with original and modified text spacing. All the text in this example can still be read after applying the Text Spacing Bookmarklet.

Web page shown with its original text spacing.
Figure 13: Web Page With Original Text Spacing
Web page with increased text spacing illustrates no overlapped or truncated text.
Figure 14: Web Page With Applied Text Spacing Bookmarklet

Force Focus Bookmarklet

Section titled “Force Focus Bookmarklet”

A visible focus indicator is essential for people who rely on keyboard navigation.

This bookmarklet shows a thick orange focus indicator around any interactive object you TAB to on a web page. This forced indicator can be helpful to:

  • developers or testers who can quickly check whether all interactive objects are reachable by keyboard navigation and have a visible focus indicator;
  • people who want a more distinguishable focus indicator for easier navigation.

Comparing keyboard navigation results with and without this bookmarklet can inform developers and testers of keyboard navigation and focus issues.

Figure 15 below, the Accessible Community Home page, illustrates this focus indicator. In this example, the Force Focus Bookmarklet replaces the website’s focus indicator, a white outline, with its thick orange outline.

The web link receiving focus has a highly visible thick orange outline.
Figure 15: Web Page With Applied Force Focus Bookmarklet

Page Title Bookmarklet

Section titled “Page Title Bookmarklet”

Descriptive page titles are necessary to distinguish open web pages and navigate between them. This bookmarklet displays the page title at the top of the browser window in a dialog box. Clear titles help not only people with disabilities, such as those using screen readers, but everyone benefits from them.

To install this bookmarklet, select this JavaScript code from the Page Title Bookmarklet page:

javascript:(function(){prompt('Press Command + C to Copy Page Title', document.title);})();

Copy and paste it into the browser’s URL text field (see How-to in the General Guidance section above).

Figure 16 below, the Learn about Accessibility page, illustrates how this bookmarklet works.

At the top of the page, the dialog box shows the page title, “Learn about Accessibility. Ta11y.”
Figure 16: Web Page With Applied Page Title Bookmarklet

Tabindex Bookmarklet

Section titled “Tabindex Bookmarklet”

Positive tabindex values in Hypertext Markup Language (HTML) code can adjust the tab order of elements on the page. Additionally, this attribute can add non-interactive elements into the focus order (tabindex=”0”) or remove interactive ones (tabindex=”-1”).

This bookmarklet helps find all elements with a tabindex attribute. Generally, you should avoid using positive tabindex values, which can create an unpredictable and confusing focus order.

The bookmarklet marks elements with the following:

  • Positive tabindex values with a red cross;
  • tabindex values of “0” with markup highlighted in yellow;
  • tabindex values of “-1” with markup highlighted in yellow.

These markings can indicate potential issues, helping prevent unexpected focus behavior.

Figure 17 below shows the Collections page from the Museum of Broken Things. This page shows an intentionally broken focus order created by adding positive tabindex values. The purpose of this online Museum is to demonstrate typical accessibility problems that people with different types of disabilities face while browsing the internet. With this bookmarklet applied, you can instantly see each added tabindex and its assigned value without needing additional testing or inspecting the source code.

The Tabindex Bookmarklet highlights tabindex attributes and their values in yellow. The shown tabindex values are positive, so they all have a red outline with a red cross.
Figure 17: Web Page With Applied Tabindex Bookmarklet

Target Size Bookmarklet

Section titled “Target Size Bookmarklet”

The clickable area of an interactive element should be big enough to tap easily without accidentally hitting nearby elements. The minimum required target area is 24 by 24 pixels, but the best practice is to use a 44 by 44 pixel target area.

This bookmarklet helps developers and testers check if elements have adequate space around them to meet the preferred target area size of 44 by 44 pixels.

Note that this size of a target refers to the clickable area, not to the size of the icon or text.

The Target Size Bookmarklet turns the cursor into a black cross with a 44-pixel (px) square around it. You can move the cursor over the interactive elements on the page to verify that they meet the target size. Figure 18 below, the Accessible Community Home page, illustrates how your cursor looks when this bookmarklet is applied (the 44x44 px cursor has a red circle drawn around it).

At the top of the page is a modified cursor highlighted with a red circle. It is a 44 by 44 pixels square with a black cross in the center.
Figure 18: Web Page With Applied Target Size Bookmarklet

ARIA Bookmarklet

Section titled “ARIA Bookmarklet”

Accessible Rich Internet Applications (ARIA) is a technology that ensures assistive technologies can understand Web content and applications. By providing a special set of roles and attributes, ARIA enhances the web experience for people using screen readers, keyboard navigation, or other assistive technologies. This bookmarklet checks and highlights all elements with ARIA attributes.

Figure 19 below shows a Volunteer Form on the Accessible Community Volunteer page, and Figure 20 illustrates how the same page looks after applying this bookmarklet. It demonstrates a correctly implemented form by outlining all form fields with a green border and displaying no errors. The bookmarklet also shows roles and corresponding ARIA attributes, which are highlighted in yellow. For example, after applying the bookmarklet in Figure 20, we see the top menu item “About” has been assigned role=”button” and currently has the aria-expanded=”false” attribute.

If the bookmarklet finds an error, it outlines it with a red dotted border, marks it with a red cross, and displays a short message in uppercase letters, e.g., “NO ID MATCH”.

Empty form with text fields asking for contact information: First and Last Names, Email, Country, and accommodations, if any.
Figure 19: Web Page With a Form
The ARIA Bookmarklet displays all ARIA attributes close to elements they belong to and highlights them in yellow to be more distinguishable.
Figure 20: Web Page With a Form And Applied ARIA Bookmarklet

References

Section titled “References”

The bookmarklets in this article are just a few of the many that exist. The references listed below include these bookmarklets as well as many others.