Testing pages with rha11y-tools bookmarklets

This project comprises a collection of bookmarklets (basically unitasking browser extensions) to help you with page testing. They are all works in progress. So, if you're using them for production work, verify any issues manually!

To install a bookmarklet, go to its section below for instructions. To run each, go to the page you want to test, and click the bookmarklet link you installed. It's recommended that you refresh the page you're testing before running each bookmarklet, so they don't conflict with one another.

rha11y-grayscaler: toggle color saturation on a page

Drag this link to your bookmarks bar to install: grayscaler

View the rha11y-grayscaler demo

When run, the grayscaler bookmarklet toggles the desaturation of all colors on a page. This bookmarklet is useful for ensuring that you incorporate non-color cues for users. Can you still read everything? Can you still identify links and buttons and other interactive elements because of context, styling, or decoration?

rha11y-img-checker: test the accessibility of all page images

Drag this link to your bookmarks bar to install: rha11y-img-checker

View the rha11y-img-checker demo

When run, the rha11y-img-checker bookmarklet identifies all images on a page (including inline SVGs and images in the shadow DOM) and returns accessibility information in the following ways:

  1. All identified and tested images on the page are given 8px outlines:
    • Blue outline = image passed accessibility checks or is hidden from accessible tech
    • Orange outline = image failed accessibility checks and is not hidden from accessible tech
    • No outline = image was not successfully identified
    • Background images are faded to white, as they don't require testing
  2. Detailed accessibility test processes and results are displayed in the browser console.

rha11y-img-hide: hide all images on a page

Drag this link to your bookmarks bar to install: rha11y-img-hide

View the rha11y-img-hide demo

The rha11y-img-hide bookmarklet hides all images on a page, including background images. This bookmarklet is useful for making sure you can still view your page text if images don't load.

rha11y-img-filesize: ensure images aren't too large

Drag this link to your bookmarks bar to install: rha11y-img-filesize

View the rha11y-img-filesize demo

The rha11y-img-filesize bookmarklet tests all non-background images to ensure none has a filesize of over 200k, per Red Hat standards. Images are outlined in blue (pass) or orange (fail). You can also view filesize details for each image in the browser console. (This isn't specifically an accessibility tool. But we perform this check for our page QA and are sharing the bookmarklet for anyone else who may find it useful.)

rha11y-heading-h1: list a page's <h1> elements

Drag this link to your bookmarks bar to install: rha11y-heading-h1

View the rha11y-heading-h1 demo

The rha11y-heading-h1 bookmarklet helps you verify that your page has only a single <h1> tag. When run, the script opens a modal that lists (and counts) all the page's <h1> elements.

Drag this link to your bookmarks bar to install: rha11y-link-target

View the rha11y-link-target demo

The rha11y-link-target bookmarklet checks all <a> tags with href attributes and makes sure they don't have a target set to open in a new window. When run, links that pass this check are outlined in blue, and links that fail are outlined in orange. (Note: this bookmarklet only checks the page source and won't catch JavaScripts that open new windows.)

rha11y-form-labels: check all form inputs for labels

Drag this link to your bookmarks bar to install: rha11y-form-labels

View the rha11y-form-labels demo

The rha11y-form-labels bookmarklet checks all non-button, non-hidden form inputs on a page and opens a modal that lists whether each has an associated (or enclosing) label.

rha11y-media-motion: checks your motion preferences

Drag this link to your bookmarks bar to install: rha11y-media-motion

View the rha11y-media-motion demo

The rha11y-media-motion bookmarklet doesn't actually check the page you're visiting. It checks your machine to see whether you have a reduced motion preference enabled and verifies that your browser can determine that setting. It can be useful for testing pages with animations, so you can make sure your setting reflects what the site is presenting to you.

rha11y-page-info: gets page title, language, and description

Drag this link to your bookmarks bar to install: rha11y-page-info

View the rha11y-page-info demo

The rha11y-page-info 3-in-1 bookmarklet gathers some basic information about the current page. When run, the script opens a modal that displays the page's title, language setting, and meta description.

rha11y-meta-og: gets Open Graph meta tag info

Drag this link to your bookmarks bar to install: rha11y-meta-og

View the rha11y-meta-og demo

The rha11y-meta-og bookmarklet gathers all Open Graph meta tag information for the current page. When run, the script opens a modal that displays these tags' properties and values.

Colophon

These scripts are branded to RHa11y, Red Hat's accessibility volunteer group.

View this project on GitHub.