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
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.
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=””.
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.
Page title and Language 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”.
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.
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.
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.