A11y audit bookmarklets

Accessibility Diagnostics

Focus Tools (Related to 2.4.3 Focus Order, 2.4.7 Focus Visible)

• 🔖anchor for Show focus styles bookmarklet Show focus styles

  Finds all focusable items on page and applies focus style to them all at once

  More details about 'Show focus styles'

  

  • Runs through whole page,looking for focusable items and focuses them.
  • Focus style is captured and set as inline style.
  • You get a page that shows how all elements on the page will appear when they receive focus.
  • 🚨 NOTE: This is destructive, there is no 'undo' feature (just reload page).
• 🔖anchor for Lost focus alert bookmarklet Lost focus alert

  Displays warning message when focus on page is lost, even when it is not visible obvious

  More details about 'Lost focus alert'

  

  • Inspired by the revelation in this article How To Avoid Breaking Web Pages For Keyboard Users, specifically the video demonstration.
  • Run this bookmarklet before doing keyboard testing and it will alert any loss of focus issues that may not be immediately obvious.
  • It checks for elements that lose focus as a result of:
    • Being removed from DOM.
    • Being hidden.
    • Being set as disabled.
    • Being set as inert.
    • Link activated that goes to a target that lacks tabindex="-1" (if it is not a natively focusable element).
    • Having a blur() event set (unless immediately re-set with focus()).
• 🔖anchor for Focus Order bookmarklet Focus Order

  Show tabbing order of all keyboard-focusable elements

  More details about 'Focus Order'

  

  • Finds all focusable elements and shows the actual tabbing order.
  • Can draw path of tabbing order (redraws when window resized).
  • Helpful to identify SC 2.4.3 Focus Order (Level A) failures.
  • After running, you can quit by pressing 'q' and the tool will remove all highlights, restore markup back as it was before.

Structure Tools (Related to 1.3.1 Info and Relationships)

• 🔖anchor for Check headings bookmarklet Check headings

  Highlight all headings on page with their level

  More details about 'Check headings'

  

  • Checks the page for definite WCAG failures and also best practices.
  • Highlights problems on the page.
  • Provides an outline in the console (along with issues found).
  • After running, you can quit by pressing 'q' and the tool will remove all highlights, restore markup back as it was before.

Names, Roles, Values and all that jazz (Related to 4.1.2 Name, Role, Value)

• 🔖anchor for WTFocus bookmarklet WTFocus

  Provides information about any element as you tab through

  More details about 'WTFocus'

  

  • As you tab around the page, a panel shows alongside each element.
  • Show the accessible name, what the source of the accessible name is and indicates any name sources that have been overridden.
  • Alerts when no accessible name is found.
  • Also warns when use of role attribute may not be great.
  • NEW: Added a new curtain mode - screen is blanked out and all that shows as you tab through focusable elements is the accessible name and the role of that element.
  • NEW: Added a download text file feature (which lets you save a numbered list of all focusable elements, including the accessible name, role and description). Note that it does not work on all sites due to a URL size limit (the content is dynamically created via a data URI).
  • 🍿📽️ Watch an explanatory video here.
  • WTFocus source is on Github.

Hidden Content Tools

• 🔖anchor for Visually Hidden? bookmarklet Visually Hidden? New Dec 2024

  Reveals text that has been se as visually hidden

  More details about 'Visually Hidden?'

  

  • Looks for all elements that appear to be visually hidden (available to assistive technology users, but not visible on screen).
  • Looks for commonly-used classnames for this effect.
  • Also tries to match commonly-used CSS property/values in case the classname is not one of the usual suspects.
  • After running, you can quit by pressing 'q' and the tool will remove all highlights, restore markup back as it was before.
  • 🍿📽️ Watch the Visually Hidden? bookmarklet in action here.
• 🔖anchor for Blackout bookmarklet Blackout New Dec 2024

  Redacts all parts of a page that will be hidden to AT users

  More details about 'Blackout'

  

  • Finds all elements on a page that are set as aria-hidden="true" and blacks them out, to visually indicate elements that will not be available to assistive technology (AT) users.
  • In addition, also finds aria-hidden elements that are keyboard-focusable (which will be problematic for AT users).
  • Visually flags focusable but hidden-to-AT-users with a pulsing red outline.
  • After running, you can quit by pressing 'q' and the tool will remove all highlights, restore markup back as it was before.
  • 🍿📽️ Watch the Blackout bookmarklet in action here.

Miscellaneous Tools

• 🔖anchor for Non-underlined links bookmarklet Non-underlined links
  [Related to 1.4.1 Use of Color]

  Reveals all links that lack underlines that also have low contrast with adjacent text

  More details about 'Non-underlined links'

  

  • Finds any links on the page that do not appear to be underlined (text-decoration set to none and no detectable border-bottom).
  • Indicates these non-underlined links in a big obvious red outline.
  • Provides xpath reference for all affected links.
  • Ignores non-underlined links that are inside a nav/role="navigation" element.
  • Where links without underlines are found, it checks color contrast and flags any under 3:1 ratio (which may indicate a 1.4.1 Use of Color issue).
  • After running, you can quit by pressing 'q' and the tool will remove all highlights, restore markup back as it was before.
• 🔖anchor for Suggest autocomplete values bookmarklet Suggest autocomplete values
  [Related to 1.3.5 Identify Input Purpose]

  Lets you pick autocomplete values for fields that lack them with easier-to-understand categories

  More details about 'Suggest autocomplete values'

  

  • Finds all fields on fields on a page that don't currently have autocomplete and highlights them.
  • Provides a select list that you can choose the appropriate autocomplete value for.
  • Logs any changes that you make (so you can copy from console).
  • Has option for cleaning up the page after so that your candidates for autocomplete are highlighted (and the select lists are removed) ready for screenshotting.
• 🔖anchor for Live Region Watcher bookmarklet Live Region Watcher New Jul 2024
  [Related to 4.1.3 Status Messages]

  Keeps track of changes to any live region (visible and hidden)

  

  More details about 'Live Region Watcher'

  • Finds all likely live regions on the pages (looks for [role=alert], [role=log], [role=marquee], [role=status], [aria-live]).
  • Visually highlights any visible live regions.
  • Logs details to console for each (id, role, aria-live, aria-atomic, aria-relevant, inner HTML content).
  • Watches for any content changes in each and updates console as they happen.
• 🔖anchor for Screen Reader Simulation bookmarklet Screen Reader Simulation

  Does a *basic* interpretation of what a screen reader user will get relayed to them

  More details about 'Screen Reader Simulation'

  

  • A script that attempts to show a styled site in a way similar to how screen reader users might perceive it. It does this by:
    • Replacing images that have NO alt with the filename.
    • Replacing images that have alts with the alt content.
    • Removing images that have alt="".
    • Finding visually hidden text, exposing as visible text.
    • Hiding anything that is marked as hidden to AT.
    • Removing all styling, flattening layout.
    • Applying some very basic styling back to the now unstyled document.
  • There is also an option to append a role (only for link or button) so that it is more clear what the controls are and to hint at how a screen reader would announce them.
  • Images that are changed to text are given green outline.
  • Images that have empty alts are given red outline.
  • Text that was previously visually hidden is given purple outline.
  • And yes, I will come up with a scheme that does not rely on use of color to indicate these.
  • This is a work in progress. It will be far from perfect.
  • 🚨 NOTE: This is destructive, there is no 'undo' feature (just reload page).

List in pop-up window

Important: the following load in pop-up windows, so you will need to allow pop-ups for the page that you are testing.

• 🔖anchor for List images bookmarklet List images
  [Related to 1.1.1 Non-text Content]

  Lists all images found on page and shows alternative text, source and any possible issues

  More details about 'List images'

  

  • Lists all images, shows any alt attribute issues.
• 🔖anchor for List links bookmarklet List links
  [Related to 2.4.4 Link Purpose (In Context), 2.5.3 Label in Name, 4.1.2 Name, Role, Value]

  Lists all links found on page and shows comparison of visible text, accessible name, and any possible issues

  More details about 'List links'

  

  • Searches for all real links on the page, and any element given a role=link.
  • Reports on the visible text, the accessible name (so you can compare side-by-side).
  • Flags any issues that might affect usage, such as keyboard focusability, Label in Name and more.
  • Notes any superfluous elements that could be removed.
• 🔖anchor for List Buttons bookmarklet List Buttons
  [Related to 4.1.2 Name, Role, Value]

  Lists all buttons found on page and shows comparison of visible text, accessible name, and any possible issues

  More details about 'List Buttons'

  

  • Searches for all real buttons on the page, and any element given a role=button.
  • Reports on the visible text, the accessible name (so you can compare side-by-side).
  • Flags any issues that might affect usage, such as keyboard focusability, Label in Name and more.
  • Notes any superfluous elements that could be removed.
• 🔖anchor for List things with titles bookmarklet List things with titles

  Lists all elements found on page that have a title attribute, flags possible issues with discoverability

  More details about 'List things with titles'

  

  • Finds all elements that have a title attribute.
  • Warns where the title attribute is a duplicate of the visible text (can be filtered out from results).
  • Highlights where the title attribute is different from the on-screen text.
  • Automatically console.logs a phrase for each instance of an element with different title content that you can copy/paste for reporting purposes.

Non a11y-specific tools, just generally useful dev tools (one hopes)

DOM Manipulation Tools

• 🔖anchor for Attribute Stripper bookmarklet Attribute Stripper New Dec 2024

  Remove any attributes you like from all page elements

  More details about 'Attribute Stripper'

  

  • Enter any attributes you want to strip out (comma-separated).
  • Well ... then they attributes are stripped.
  • That's basically it. I mean, not sure what else I can add.
  • 🚨 NOTE: This is destructive, there is no 'undo' feature (just reload page).
• 🔖anchor for Element Stripper bookmarklet Element Stripper New Dec 2024

  Remove any page elements that you want to

  More details about 'Element Stripper'

  

  • Enter HTML element (or any other valid CSS selector).
  • Poof! They're all removed from the page!.
  • 🚨 NOTE: This is destructive, there is no 'undo' feature (just reload page).
• 🔖anchor for Node Killer bookmarklet Node Killer New Dec 2024

  Delete any part of the page with a single click (also keyboard-operable)

  More details about 'Node Killer'

  

  • This tool lets you click on any node on a web page to remove it from the DOM.
  • You can also navigate using arrow keys and then remove the node using ENTER.
  • Might be handy for removing discrete parts of a page before running a diagnostic tool.
  • It is (sort of) the opposite of the Isolator bookmarklet.
  • NEW FEATURE: hold down ALT/Option key while clicking or pressing ENTER and it will keep the selected elements but remove all sibling elements (and leave rest of page intact).
  • 🚨 NOTE: This is destructive, there is no 'undo' feature (just reload page).
  • 🍿📽️ Watch the Node Killer bookmarklet in action here.
• 🔖anchor for Isolator bookmarklet Isolator

  Isolate any part of the page with a single click (also keyboard-operable)

  More details about 'Isolator'

  

  • Isolates a section of a web page by hiding all sibling elements of it, and all parent elements.
  • Hover over on elements on the page, then click when the correct element is highlighted.
  • Press the arrow keys to fine tune your selection (choose parent, child and sibling elements in the DOM) and confirm that selection with Enter.
  • 🚨 NOTE: This is destructive, there is no 'undo' feature (just reload page).
  • 🍿📽️Watch the Isolator bookmarklet in action here.

Document/Node info Tools

• 🔖anchor for Selector Selector bookmarklet Selector Selector New Dec 2024

  Collect references to multiple page elements (outputs in several formats)

  More details about 'Selector Selector'

  

  • A tool that lets you click on multiple elements on a web page (or navigate the DOM using arrow keys, ENTER to select) and gets all nodes referenced that can be shown as XPATH, JS or CSS selector.
  • Press the 'I am done' button when you've finished capturing.
  • All captured values are shown in a dialog and easy to copy individually.
  • You can copy all values in one go, too.
  • 🍿📽️ Watch the Selector Selector bookmarklet in action here.
• 🔖anchor for Xpath getter bookmarklet Xpath & Source Getter UPDATED Dec 2024

  Get XPATH and formatted HTML source of any part of the page with a single click (also keyboard-operable)

  More details about 'Xpath getter'

  

  • Click on elements on the page.
  • As you click, the XPATH reference for each element is added to a list in console.
  • You can copy that list or click on the download link to get all the captured nodes (saved as an HTML file that includes the XPATH reference and formatted/indented HTML source.
  • After running, you can quit by pressing 'q' and the tool will remove all panels, buttons, event listeners, and restore markup back as it was before.

Miscellaneous Tools

• 🔖anchor for Outliner bookmarklet Outliner

  Appluy an outline to any collection elements using CSS selector

  More details about 'Outliner'

  

  • Enter HTML element (or any other valid CSS selector).
  • Choose a colour.
  • Bam! All those bad boys are highlighted on the page. Sure it's a one-trick pony. Nothing wrong with ponies.
  • After running, you can quit by pressing 'q' and the tool will remove all highlights, restore markup back as it was before.
• 🔖anchor for Blur Everything bookmarklet Blur Everything New Dec 2024

  Well, it just ... blurs everything

  More details about 'Blur Everything'

  

  • Not entirely useful but hey, maybe you might just want a quick way of showing how small fonts or low contrast text is difficult for old farts like me..
  • Run the bookmarklet, everything blurs.
  • You can increase/decrease the amount of blur after that by pressing up/down arrow keys.
  • If you want to reset, just arrow down to zero blur.
• 🔖anchor for Blur Everything Except... bookmarklet Blur Everything Except... New Dec 2024

  Blurs everything apart from whatever you click on (also keyboard-operable)

  More details about 'Blur Everything Except...'

  

  • Click on any section of a web page and everything else on the page becomes a blur, while the selected portion gets a clear border.
  • You can also navigate and select using arrow keys and then remove the node using ENTER.
  • Possibly a handy tool to use when indicating a part of a page in documentation, error reporting and such like.
• 🔖anchor for Grayscale Everything bookmarklet Grayscale Everything New Dec 2024

  Make your web page 50 Shades of Gray (no, not that kind)

  More details about 'Grayscale Everything'

  

  • A tool that is useful to get an idea about how difficult it might be people with poor (or no) colour perception to use a web page or app.
  • Not sure what else there is to say. Other than: There will be more than 50 shades.
• 🔖anchor for Grayscale Images bookmarklet Grayscale Images New Dec 2024

  Set images to grayscale only. Not sure why I made this ... must have been a reason

  More details about 'Grayscale Images'

  

  • Images are set to grayscale.
  • Does not affect CSS background images.
  • All other site colours remain as intended.
• 🔖anchor for Smart Invert bookmarklet Smart Invert New Dec 2024

  Invert colour scheme of page, but not images (because they look SUPER weird otherwise)

  More details about 'Smart Invert'

  

  • Inverts the whole page.
  • Does not invert images (or rather it inverts them a second time to take it back to default).
  • Does not affect CSS background images.
• 🔖anchor for Freeze the DOM (debugger) bookmarklet Freeze the DOM (debugger)

  Starts the debugger after a countdown so that you keep temporary elements in view

  More details about 'Freeze the DOM (debugger)'

  

  • Kick starts the dev tools debugger.
  • Provides a 3-second countdown while you 'prepare your DOM'.
  • Debugger takes over so you can then start inspecting dynamic content that might otherwise disappear (dialogs, hover content etc).
• 🔖anchor for Unframe iFrames bookmarklet Unframe iFrames

  Finds iframes on a page and then opens them all in a new tab

  More details about 'Unframe iFrames'

  

  • Finds all iframe elements that start with http in the src.
  • Opens each of the iframes in a new window.
  • That's it. Do whatever you need to do with those pages after that ...