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
- Point your browser to http://www.pauljadam.com/bookmarklets/index.html or click Paul Adam accessibility bookmarklet
. - Choose the item for testing from the list. Eg: Headings, Forms, Images etc.
- Drag the bookmarklet on to your browser bookmarks bar.
- Now open the page to be tested on the browser.
- 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 here.
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 here.
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 here.
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 here.
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 here.
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 here.
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 here.
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 here.
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 iOS.
Want to Thank Paul Adam for this wonderful work, reach out to him on twitter @pauljadam.