Skip to content Skip to navigation

JavaScript Bookmarklets

Introduction

Many people have created and freely share accessibility bookmarklets that help to identify and check for specific issues. This page cites a number of collections, in an effort to be comprehensive, although it is likely that some bookmarklets and/or similar functionality are duplicated. You are encouraged to explore options, and choose the bookmarklets that provide a user interface and functionality that suit your workflow.

HTML_CodeSniffer

HTML_CodeSniffer is perhaps the most robust of the bookmarklets currently available. It can be used as a bookmarklet, or you may paste the source code for a page into an edit box, and then run the tool on that code. This is a client-side tool, created entirely in JavaScript, that you may tailor to your testing needs. It can run automated tests against WCAG 2.0 and Section 508.

Jim Thatcher's Favelets for Checking Accessibility

Jim Thatcher, a well-known expert in the accessibility industry, has gathered a significant number of bookmarklets, including contributions from Suzanne Taylor at Pearson. Note that these favelets have since been incorporated into the Web Accessibility Toolbar for Internet Explorer, but they are included here for those who may not use it.

Currently, many of the following Favelets for Checking Accessibility are available; the page provides clear explanations of what each does:

  • Active Images
  • Larger Images
  • Formatting Images
  • Form Labels
  • Data Tables
  • Skip Links
  • Headings
  • ARIA Markup
  • Tabindex
  • Large Text
  • Frames
  • LandMarks
  • Slider

In addition, Jim describes how to install "favelets" in several different browsers.

Miscellaneous Collections

SSB Bart Group's Jonathan Avila discusses How to Create a Favlet for Accessibility Testing, and the a Complex Tables Favlet is one example. Jonathan has also posted an ARIA favlet. &Quot;This Favlet display[s] ARIA roles, states, and properties for the document and any frames in the same domain." The page for SSB Labs includes more bookmarklets that may be handy.

In his Accessibility Bookmarklets blog post, Ted Drake includes items from Yahoo!'s Accessibility Lab and a pointer to various W3C code validation options, among others. Several items here can help with tracking focus and identifying issues with links and buttons.

Zoe Gillenwater, via Bookmarklets for Accessibility Testing, offers two bookmarklets to "reveal whether CSS background images are being used in an inaccessible way on a page."

Heydon Pickering has developed REVENGE.CSS, a bookmarklet that uses selectors to find bad markup.

Finally, in CSS Bookmarklets for Testing and Fixing, Adrian Roselli provides some of what he has created to help him in his work. You will find bookmarklets to:

  • Restore Link Underlines
  • Restore Focus Outlines
  • Find Inline Styles
  • Find Duplicate ARIA Roles
  • Find Missing Alt Attributes
  • Reset Text Size
  • Find Empty Elements
Target Audience: 
Content Creator
Designer
Developer
Last modified: 
June 5, 2015