18 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 a accessibility bookmarklet

1. 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.
2. 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.
3. Jim Thatchers Favelets
4. 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:
   • 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
   • 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.
5. 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.
6. Firefocus
   Firefocus is a simple Firebug extension that tracks the element that currently has focus. Its primary purpose is to assist the debugging of advanced keyboard implementations without having to rely on platform specific tools such as MSAA Inspect.
7. 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
8. 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.
9. Diagnostic.css Bookmarklet
   What it Tests For
   • Deprecated elements
   • Deprecated and/ or presentational attributes
   • Inline frames without title attributes
   • Server-side image maps
   • Images without alt attributes
   • .Image buttons without alt attributes
   • Image Map area elements without alt attributes
   • Items with an img role without aria labels
   • Images without a valid src attribute
   • Links without a valid hypertext reference
   • Fieldsets without legends
   • Label elements without for attributes
   • Invalid dir attribute values
   • Empty TITLE elements
   • Implicit headings
   • Meta refresh
   • Missing lang attribute on the HTML element
   • Use of accesskey attributes
   • Empty table header cells
10. Web Evaluation Tools Bookmarklet by NC State University
    This set of tools allows you to check for several aspects of Web accessibility that other tools do not. It is not designed to replace any other tools, but rather to supplement them. This set of tools will allow you to:
    • View page headings, including hidden label text
    • View ARIA Landmarks, plus any accompanying aria-label or aria-labelledby text
    • View internal links, both their source and their target ◦If the target link does not have an explicit tabindex value set, an asterisk will appear next to the link count and the target link will indicate it as well
    • View any tabindex values
    • View any ARIA roles (other than landmarks) and ARIA attributes
    • Force the visual keyboard focus to always be seen (useful for keyboard testing.
    • View any language attributes and what parts of the page they apply to.
11. 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).
12. 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.
13. 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.
14. 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.
15. 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.
16. Find aria-hidden with this bookmarklet by Ted Drake
17. CSS Bookmarklets by Adrian Roselli
18. The visual ARIA Bookmarklet

About Raghavendra Satish Peri

Peri as he is fondly called brings in rich experience in Digital Accessibility; He has worked with various clients ranging from Travel & Hospitality, ecommerce, Entertainment, Banking & Finance. Presently, he works at Deque Software as Digital Accessibility Consultant slaying web accessibility & mobile accessibility challenges.