A11y audit bookmarklets

You know the deal - drag these to your toolbar or right-click and add to favourites. Then run them whenever you feel like it.

Important: many of these load in pop-up windows, so you will need to allow pop-ups for the page that you are testing for some of these to work

• NEW 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.
• NEW Reveal 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
  • This is a work in progress. It may be a little ... funky.
• List images
  • Lists all images, shows any alt attribute issues
  • Requires pop-up window to be allowed to show results
• 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
  • Requires pop-up window to be allowed to show results
• 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
  • Requires pop-up window to be allowed to show results
• 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
  • Requires pop-up window to be allowed to show results
• 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
  • WTFocus source is on Github
• NEW 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)
• 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)
• UPDATED Feb '22 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 calue 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
• Isolate images
  • Slightly experimental idea - this one does the opposite of some other tools (that hide images), and instead hides anything that is not an image
  • It zooms the page out so you can see more in one go - a wall of images
  • Aim of this is to be able to glance at the images and see if you can spot images that are actually just text which may not be obvious when scrolling the page in its normal state
  • Trying to weed out SC 1.4.5 Images of Text issues
• 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
• NEW Role Reverser
  • Finds all elements on the page with role attributes
  • Replaces non-semantic elements with native HTML equivalent
  • Summary of findings in alert, further diagnostics in the console
• 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 ...

Not really a11y tools but you might still find handy:

• NEW 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.
• NEW 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 it in Markdown format
  • Watch it in action here
• 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
  • Watch the Isolator bookmarklet in action here
• NEW 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)