Paul Adam Bookmarklets For Accessibility

Paul J Adam the well known expert in the accessibility industry has published bookmarklets for testing the accessibility bugs on web pages. These bookmarklets are easy to use. All that you need is a web browser and internet connection to use them.

Installing and using Paul Adam accessibility bookmarklets

  1. Point your browser to http://www.pauljadam.com/bookmarklets/index.html or click Paul Adam accessibility bookmarkletExternal Website.
  2. Choose the item for testing from the list. Eg: Headings, Forms, Images etc.
  3. Drag the bookmarklet on to your browser bookmarks bar.
  4. Now open the page to be tested on the browser.
  5. Click the item to be tested from your bookmarks. Eg If you want to check the heading structure of the page activate the heading bookmarklet.

Let us understand how do you find the issues on the page using these bookmarklets

Finding accessibility bugs using Paul Adam bookmarklets

Forms bookmarklet

Complete information including demo fields and javascript code to insert the bookmarklet can be found hereExternal Website.

Headings Bookmarklet

Headings Bookmarklet for Accessibility Testing inserts a black on yellow opening and closing tag into the DOM around each H1-H6 and WAI-ARIA role=heading aria-level=1-6.

Complete information including demo headings and javascript code to insert the bookmarklet can be found hereExternal Website.

Images bookmarklet

Images Bookmarklet for Accessibility Testing inserts a green dashed outline around images that have alt values and a red solid outline around images with no alt attribute. Alt attribute vaules are displayed in black on yellow text on top of the images. Images with empty alt values, are shown as alt=””.

Complete information including demo images and javascript code to insert the bookmarklet can be found hereExternal Website.

Landmarks bookmarklet

Landmark bookmarklet shows the landmark role used on the page. Eg: role=”navigation” at the navigation area, role=”main” at main content area if they are used. This helps to identify if any landmark role is used in an incorrect region.

Complete information including demo landmarks and javascript code to insert the bookmarklet can be found hereExternal Website.

Page title and Language bookmarklet

Page Title + Language Bookmarklet for Accessibility Testing displays a JavaScript alert () dialog with the title of the document and the language if present. You can test this in any page you currently are on. With a single click two wcag 2.0 success criteria can be tested.

Complete information including demo page and javascript code to insert the bookmarklet can be found hereExternal Website.

Tabindex bookmarklet

Tabindex bookmarklet helps users to identify the use of tabindex attribute on the page. This bookmarklet can recognize the negative tabindexes such as tabindex=”-1”, tabindex=”0” and positive indexes such as tabindex=”1”.

Complete information including demo page and javascript code to insert the bookmarklet can be found hereExternal Website.

Title bookmarklet

The title bookmarklet helps identify the title of different elements on the page. Use of title attribute has different effects on the page. Use of same title as the link text announces the link information for screen reader users which causes too much verbiage. Frames on the page should have titles mentioned to identify the content they contain and also to differentiate if more than one frame is available on the page.

Complete information including demo page and javascript code to insert the bookmarklet can be found hereExternal Website.

Reset Page bookmarklet

Though reset bookmarklet is not to check any particular functionality of a web page it helps to bring the page to the original state after applying any of the above bookmarklets and check for accessibility findings.

Complete information including demo page and javascript code to insert the bookmarklet can be found hereExternal Website.

The bookmarklets can also be used on mobile to perform accessibility testing. If you are unsure how to favorite a bookmarklet look at Install Bookmarklets for Accessibility Testing Directly on iOSExternal Website.

Want to Thank Paul Adam for this wonderful work, reach out to him on twitter @pauljadam.

4 Comments to "Paul Adam Bookmarklets For Accessibility"

  1. navya's Gravatar navya
    November 26, 2015 - 4:34 am | Permalink

    This post has multiple link text “here” – something not expected to see by an accessibility professional. Request you to edit so that users can see the good part of the post!

  2. Navya's Gravatar Navya
    November 28, 2015 - 10:13 am | Permalink

    In the true accessibility about user experience and not just guidelines. Also your response caters to only one disability, we dont need to aria everthing. When we miss the user experience in midst of guidelines the whole purpose of accessibility is defeated. It is your call on how you perceive accessibility and communicate it to your readers.

Comments are closed.