48 Accessibility Bookmarklets You Can Use For A11Y Testing

These nifty accessibility bookmarklets perform various accessibility audit functions & will come in handy during an accessibility automation evaluation. They can also be deployed on mobile browsers to test responsive design.

How to use an accessibility bookmarklet

A detailed guide on how to install and use an Accessibility Bookmarklet by Holistic Accessibility

1. DigitalA11Y Tublets
   If you are a developer, accessibility expert, or any accessibility professional who want to quickly identify the accessibility defects in the underlying code semantics, we have your companion here!
2. 1.4.12 Text Spacing Bookmarklet by DylanDarrell
   I wrote a bookmarklet for testing WCAG 2.1 S.C. 1.4.12 Text Spacing because the existing ones don’t always work well with CSS as JS
3. 3 Simple Design Bookmarklets by Thomas Park
   Grayscale to gauge contrast between light and dark, rather than by colors…Blurry to examine the composition of colors…Upside-down to get a fresh perspective on composition and balance…” Try using the Gray one to check for instances of color alone.
4. 44×44 Pixel Cursor Bookmarklet
   Drag the following link to your Bookmarks bar to create a bookmarklet to change your cursor to 44×44 pixels square for testing WCAG Target Size and Pointer Target Spacing requirements Target Size and 2.5.5
5. a11y checker
   Identifies accessibility issues in HTML markup.
6. a11y-audit-tools
   A collection of tools that might help you when auditing web sites/apps for accessibility.
   I have created a handful of tools – total one-trick ponies! – to help identify accessibility issues on web pages. Almost everything here is available in some shape or form in other fully-featured auditing suites, but I often found that for very common mistakes, some issues can get lost in the ‘noise’ of the big reports.
   These tools aim to pull out such issues in standalone reports that you can easily copy/paste into a word doc (other office apps are available)
7. a11y.css
   Pronounced « Alix ». Because it’s fun.
   This CSS file intends to warn developers about possible risks and mistakes that exist in HTML code. It can also be used to roughly evaluate a site’s quality by simply including it as an external stylesheet.If you want to get involved in this project, be sure to take a look at its wiki.
8. Accessibility Bookmarklets
   A curated list of accessibility bookmarklets by Ted Drake
9. Accessibility Bookmarklets by Pixo & Disability Resources and Educational Services
   Accessibility of web pages can be hard to observe. These bookmarklets help web developers and designers see the “big picture” regarding web accessibility.
   The bookmarklets do this by:
   • Flagging elements or regions on web pages where information that could improve accessibility (like elements not contained in landmarks, image alt text or long descriptions, list accessible names.
   • Making otherwise hidden accessibility features on web pages (like ARIA landmarks, roles, labels and descriptions and alternative text for non-text objects) more visible
   • Showing whether HTML markup (like lists, headings, label elements, and appropriate landmark roles) is used with proper semantics for accessibility
10. Accessibility Bookmarklets by The Paciello Group
    A couple of Accessibility bookmarklets developed & shared by “The Paciello Group”
11. ANDI – Accessibility Testing Tool
    ANDI is a “favelet” or “bookmarklet” that will:
    • Give practical suggestions to improve accessibility and check 508 compliance
      ANDI is like having an accessibility expert at your side, helping you make your web pages more accessible.Use it during development or testing.Whether your knowledge of accessibility is vast or you’re just getting started,you, your product, your end users will benefit from the guidance ANDI provides.
      
    • Provide automated detection of accessibility issues
    • Reveal what a screen reader should say for interactive elements
12. ARIA Label Bookmarklet
    I love simple bookmarklets that visualize coding patterns. I was working on a project today and wanted to verify that aria-labels were sufficiently descriptive. So I put together this quick bookmarklet.
13. ASLint –Accessibility testing tool
    • Color contrast recommendations
    • Does not send content or data externally, so can be used for internal-only purposes.
    • Easy locating issues on the page from the results using element detector or XPath
    • Provides code snippet to add to build pipeline (e.g. for automation tests) or developer console, or can run as a bookmarklet.
    • Review results and determine the impact on the business.
    • Tests can be run asynchronously (without blocking the UI) or synchronously.
    • Verify accessibility of your content in real-time, including Single Page Applications.
14. ATBAR
    ATbar has been created as an open-source, cross-browser toolbar to help users customise the way they view and interact with web pages. The concept behind ATbar is simple: One toolbar to provide all of the functionality you would usually achieve through the use of different settings or products.
15. Bookmarklets for accessibility testing by Zomigi
    Zomigi created two simple bookmarklets to reveal whether CSS background images are being used in an inaccessible way on a page. Use them yourself, or help me learn how to improve them.
16. Character key shortcut bookmarklet
17. Complex Table Inspector
    Developers are encouraged to use summary, headers, axis, scope, and abbr for complex data tables to aid usability and accessibility. To help developers determine if they’ve used those features correctly, I’ve created a complex table inspector bookmark that reveals the hidden information.
18. Contrast analysis widget By Ada Rose Edwards
19. CSS Bookmarklets by Adrian Roselli
20. Deque Bookmarklet that allows you to validate the full DOM HTML
    This bookmarklet uses the W3C HTML Validator service, with several advantages (and one noteworthy disadvantage; see “important note” below) over the W3C’s online form. The bookmarklet:
    • Allows you to validate different states of a web page (with modals activated or not, with form error messages on the screen or not, with regions expanded or not, with custom controls activated or not, etc.). To do this, get the page to the state you want, and validate with the bookmarklet, and repeat on the same page as many times as necessary to validate all the states.
      Important note: This bookmarklet will NOT check the raw HTML. This is both a feature and a “bug.” It’s a feature in the sense that we do need to check the end result after JavaScript is applied, which this bookmarklet does. It’s a bug in the sense that it can’t evaluate the HTML before the browser applies basic DOM fixes. Ideally, you would validate both the final DOM with the bookmarklet (for dynamic content), and the HTML from the raw source code with the W3C online tool (for pre-DOM content).
      
    • Allows you to validate local files and localhost files
    • Allows you to validate password-protected pages
    • Allows you to validate the page you’re currently on from within your browser
    • Captures the full DOM, after JavaScript is applied, not just the raw source code (especially useful for single-page apps and dynamic content)
21. Diagnostic.css Bookmarklet
    What it Tests For :
    • .Image buttons without alt attributes
    • Deprecated and/ or presentational attributes
    • Deprecated elements
    • Empty table header cells
    • Empty TITLE elements
    • Fieldsets without legends
    • Image Map area elements without alt attributes
    • Images without a valid src attribute
    • Images without alt attributes
    • Implicit headings
    • Inline frames without title attributes
    • Invalid dir attribute values
    • Items with an img role without aria labels
    • Label elements without for attributes
    • Links without a valid hypertext reference
    • Meta refresh
    • Missing lang attribute on the HTML element
    • Server-side image maps
    • Use of accesskey attributes
22. Document Active Element Bookmarklet
    Document Active Element (DAE) is a JavaScript bookmarklet intended to help you more easily identify where the activeElement is on your screen.
23. Favelets For The Validator
    Favelets are small snippets of JavaScript embedded in a Bookmark URL that allow Bookmarks in browsers to do various advanced things. More Favelets can be found at Favelets.com
24. Find aria-hidden with this bookmarklet by Ted Drake
25. Focus Order Favlet by Level Access
26. h123 – An bookmarklet that shows headings like a screenreader
    See the headings like a screenreader!
27. HTML_CodeSniffer by Squiz
    Checks a HTML document and detects violations of a defined coding standard. Comes with standards that cover the three conformance levels of WCAG 2.0 and the U.S. Section 508 legislation. An auditor interface is provided by a bookmarklet to let you try out these accessibility checks on any web page.
28. Jim Thatchers Favelets
29. LogFocus – handy Bookmarklet for Keyboard Accessibility testing
    Offering usability for Users without Mouse is one of the biggest and most important Steps when building accessible Websites. While testing for Keyboard Accessibility you might find yourself very often in Situations like “Where is my Cursor?” or “What Element has the Focus right now?”. Especially when Elements get moved offscreen things might end up confusing.
30. LogFocus – handy Bookmarklet for Keyboard Accessibility testing
    Offering usability for Users without Mouse is one of the biggest and most important Steps when building accessible Websites. While testing for Keyboard Accessibility you might find yourself very often in Situations like “Where is my Cursor?” or “What Element has the Focus right now?”. Especially when Elements get moved offscreen things might end up confusing. To install the Bookmarklet simply drag the following Link into your Bookmarks.
    here you can run it on every Page by simply clicking on it.
31. NerdeFocus Bookmarklet
    NerdeFocus is a quick way to debug focus problems when testing a page for accessibility issues. When activated, it will animate and accentuate the focus ring and display the CSS selector of the currently focused item. NerdeFocus will alert you when there is a focus reset, and when the focus indicator is hidden or off-screen.
32. Neutered Link Bookmarklet
    This bookmarklet will place a big red border around links that do not include an href attribute. Simply drag the link to your browser’s bookmark bar and then click it when you want to test a page. It will draw a red border around any links that do not have an href attribute.
33. Nu Markup Validation Service Bookmarklets by The Paciello Group
    This is the basic “Validate Page” Bookmarklet. It simply submits the URL for the currently viewed page to the Nu Markup Validation Service for processing. Results appear in the same window.Validate Page (New Window)Like the last Bookmarklet, this also submits the URL of the current page to the Nu Markup Validation Service for processing, but this version will show the results in a new window (tab).Validate Page…Puts up a dialog with a text entry field where you can type in the URL of a page you would like to Validate. The results appear in the current window.Validate Page… (New Window)Same as above but shows results in a new window (tab).
34. Paul J Adam Bookmarklets
    Paul J Adam accessibility Evangelist has created a set of bookmarklets that will help identify few accessibility bugs easily. These bookmarklets also work great on mobile web with both Chrome & Firefox.
35. Reading Order Bookmarklet by Adrian Roselli
36. REVENGE.CSS
    Revenge.css is a CSS bookmarklet that reports bad html using pseudo content. If the page you use it with has malformed links, deprecated attributes, inside inline elements, inaccessible buttons, badly nested sections or other errors, you’ll see some ugly, pink errors written in nobody’s favorite font: Comic Sans.
37. Sa11y – accessibility quality assurance
    Sa11y works as a simple in-page checker that is designed to be easily customized and integrated into any content management system (CMS) to facilitate good accessibility practices. Sa11y works best in a templated CMS environment, although can also work as a bookmarklet. Sa11y is not a comprehensive code analysis tool.
38. Safari VoiceOver Helper Bookmarklet
    This bookmarklet hides the content of the page, and shows a quick guide to using VoiceOver. 
    This does not replace a professional accessibility audit, or user research with people who have access needs. It’s designed to help you learn how to use the basics of VoiceOver, which can help you design and build your service to better meet the needs of screen-reader users.
    
39. text spacing bookmarklet by Steve Faulkner
40. The Screen Curtain Bookmarklet
    The Screen Curtain Bookmarklet allows engineers, testers, educators, and students to temporarily obscure web technologies while using screen readers in order to simulate the experience of using such technologies without sight. 
    This is analogous to the Screen Curtain mode provided on iPhone and iPad devices when using VoiceOver to experience the same. This bookmarklet should be used in combination with JAWS or NVDA on Windows when testing the non-sighted experience of typical screen reader users.
    
41. The visual ARIA Bookmarklet
42. tota11y – an accessibility visualization toolkit
    The process of testing for accessibility (a11y) is often tedious and confusing. In many cases, developers must have some prior accessibility knowledge in order to make sense of the results.
    Instead, tota11y aims to reduce this barrier of entry by helping visualize accessibility violations (and successes), while educating on best practices.
43. Total Immersion Keyboard Testing by joe.chidzik.me
44. Touch Bookmarklet
    Simulate touch events (swipe, rotate, pinch) with a mouse, for fun and profit.
45. WAI-ARIA usage
    Add the WAI-ARIA usage bookmarklet to evaluate document conformance requirements for use of ARIA attributes in HTML and allowed ARIA roles, states, and properties.
46. WCAG 2.0 Parsing Validation Tools by Dotjay
47. WCAG 2.1 parsing error bookmarklet
48. What has focus? by Scott Vinkle.
    “When something receives keyboard focus via Tab key, the current element will be logged to the JavaScript console so you can determine which element currently has focus! This will come in handy when debugging accessibility issues with somebody else’s code or a third-party library.”

They are all bookmarklets/favelets that you run against a page which will load the results into a new window. Sometimes they even work!

Note: We have provided a definitive guide on how to perform accessibility testing using some of these tools. This guide is comprehensive and will help you get started on conducting an accessibility audit for your website.