Desktop and Mobile Accessibility Testing with Jim Thatcher's Favelets

Table of Contents

Abstract

Learn how to use Jim Thatcher's Favelets, also called JavaScript Bookmarklets, to do page-by-page accessibility testing from a phone, tablet, or desktop computer.

Extended Abstract

Did you know that screen readers aren't required for accessibility testing and neither are desktop computers! This presentation will teach you how to use Jim Thatcher's Favelets to do page-by-page accessibility testing from a phone, tablet, or desktop computer.

The beauty of Favelets, also called JavaScript Bookmarklets, is that they can run on any Internet and JavaScript enabled device by adding the favelet as a bookmark to your device's web browser. You simply visit the page to test and then activate the bookmarklet from you browser bookmarks toolbar. The accessibility favelet will analyze the page's code and then modify the browser's DOM to inject useful accessibility errors. These visible error messages directly highlight the problems on the page and make for excellent screenshots to explain accessibility issues to developers.

In this Live Testing Session we'll use Before & After Demos from Washington.edu's Accessible University 2.0 and the W3C's BAD – Before and After Demo mock accessibility-training sites. These before and after demos are an excellent way to learn how to use accessibility testing tools and screen readers to find problems.

Often I work with clients who have browser installation restrictions and block add-ons or extensions. This can make accessibility testing more difficult but an easy solution is to use JavaScript Bookmarklets which have never been blocked in my experience.

Simply visit Jim's Favelets page, find The human review favelets heading and drag and drop each of the preferred favelets into your browser bookmarks toolbar in the order you like.

Drag-and-drop installation won't work on iOS or Android so for that I suggest you first add the bookmarklets to your desktop browser and then sync your bookmarklets to your mobile browser. The bookmark syncing is done automatically for iOS and OS X Safar and Mobile Safari users. You can also sync Firefox and Chrome desktop bookmarks to Firefox and Chrome for Android.

This session is designed to be interactive and we can do live accessibility testing on the iPad while connected to the projector. Bring your sites to test live on your device or on the big screen if you're open to sharing your site's accessibility problems with the group.

What's nice about JavaScript bookmarklets is that they simply modify the DOM of the current HTML page and inject accessibility error messages as text directly on the page. A blind user can still use these favelets and scan through the modified page to find those automatically discovered violations.

We'll also discuss other JavaScript Accessibility Testing Bookmarklets like the HTML_CodeSniffer which can actually test color contrast!

With a bookmarklet that automatically test HTML text for color contrast problems you can have a blind accessibility tester find contrast problems directly on the mobile device that they cannot actually see. 

Did you know you can even make your own accessibility testing bookmarklets! It's pretty easy and I'll show you how I made a simple bookmarklet to display title attributes visibly in red text next to their elements in the DOM.

Key Take-aways

1. Understand what a JavaScript Bookmarklet, or Favelet, is and how they're useful for testing HTML accessibility.
2. Learn how to use 10 of Jim Thatcher's Favelets to test your websites for accessibility.
3. Install the bookmarlets in your favorite web browser or right on your iPhone or Android device to keep handy for quick accessibility testing.  

Slideshow URL

http://pauljadam.com/favelets

Presenter

Paul J. Adam

Accessibility Evangelist at Deque Systems, Inc.

@pauljadam on Twitter

Paul@PaulJAdam.com

Slideshow

Press the Left/Right Arrow Keys or Page Up/Down to navigate through slides, the Home key takes you home to the table of contents.

This slideshow has been developed with jQuery Mobile to create a universally accessible presentation that will work on any accessibility enabled device. PowerPoint & PDF formats are not universally accessible.

Installing Jim Thatcher's Favelets

Firefox Add-on

You can get the Firefox toolbar add-on directly from Jim's Favelets site if you look under the Installation on Firefox heading. Direct link here, FaveletToolbar.xpi. It's not available in the Add-ons store.

Installing as Bookmarks

Often I work with clients who have browser installation restrictions and block add-ons or extensions. This can make accessibility testing more difficult but an easy solution is to use JavaScript Bookmarklets which have never been blocked in my experience.

Simply visit Jim's Favelets page, find The human review favelets heading and drag and drop each of the preferred favelets into your browser bookmarks toolbar in the order you like.

Drag-and-drop installation won't work on iOS or Android so for that I suggest you first add the bookmarlets to your desktop browser and then sync your bookmarklets to your mobile browser. The bookmark syncing is done automatically for iOS and OS X Safar and Mobile Safari users. I imagine you can also sync Firefox and Chrome desktop bookmarks to Firefox and Chrome for Android.

Manual Installation using Mobile Safari

The hardest way to install them is directly from the mobile browser and you have to jump through a few hoops.

1. Bookmark this page or any page and give it the name of the bookmarklet you want to add.
2. Edit your bookmarks in the Mobile Safari toolbar and then replace the old URL that was added automatically with the new JavaScript code below.
3. Save bookmark and then when you activate it now the new JavaScript code will run rather than loading a URL.

Faster Manual Install Method

1. Tap on the #hash links below which will modify the URL in your address bar.
2. Bookmark this page and change the page name to the name of the bookmarklet you clicked on.
3. Edit that bookmark to remove all text in the URL above the word "javascript", so remove the # and everything up to the http://.

Active Images

javascript:void((function(){var element=document.createElement('script');element.setAttribute('src','http://jimthatcher.com/IBM/js/AltInActiveImage.js');document.body.appendChild(element)})());

Larger Images

javascript:void((function(){var element=document.createElement('script');element.setAttribute('src','http://jimthatcher.com/IBM/js/AltInLargerImage.js');document.body.appendChild(element)})());

Formatting Images

javascript:void((function(){var element=document.createElement('script');element.setAttribute('src','http://jimthatcher.com/IBM/js/AltInSmallImage.js');document.body.appendChild(element)})());

Form Labels

javascript:void((function(){var element=document.createElement('script');element.setAttribute('src','http://jimthatcher.com/IBM/js/FormLabels.js');document.body.appendChild(element)})());

Data Tables

javascript:void((function(){var element=document.createElement('script');element.setAttribute('src','http://jimthatcher.com/IBM/js/DataTables.js');document.body.appendChild(element)})());

Skip Links

javascript:void((function(){var element=document.createElement('script');element.setAttribute('src','http://jimthatcher.com/IBM/js/AnchorsForSkipLinks2.js');document.body.appendChild(element)})());

Headings

javascript:void((function(){var element=document.createElement('script');element.setAttribute('src','http://jimthatcher.com/IBM/js/Headings.js');document.body.appendChild(element)})());

ARIA Markup

javascript:void((function(){var%20element=document.createElement('script');element.setAttribute('src','http://www.manateeroad.com/favelets/revealARIA.js');document.body.appendChild(element)})());

Tabindex

javascript:void((function(){var element=document.createElement('script');element.setAttribute('src','http://jimthatcher.com/IBM/js/tabindex.js');document.body.appendChild(element)})());

Large Text

javascript:void((function(){var element=document.createElement('script');element.setAttribute('src','http://jimthatcher.com/IBM/js/large_text.js');document.body.appendChild(element)})());

Frames

javascript:void((function(){var element=document.createElement('script');element.setAttribute('src','http://jimthatcher.com/IBM/js/Frames.js');document.body.appendChild(element)})());

Landmarks

javascript:void((function(){var element=document.createElement('script');element.setAttribute('src','http://jimthatcher.com/IBM/js/LandMarks.js');document.body.appendChild(element)})());

Iframed In Page for Drag & Drop Installation

Before & After Demo Sites for Accessibility Testing

Accessible University 2.0

W3C's BAD - Before and After Demo

Images

Form Labels

Data Tables

Skip Links

Headings

ARIA Markup

Landmarks

Tabindex

Frames

HTML_CodeSniffer

HTML_CodeSniffer

Color contrast from a JS Bookmarklet! Only one I know of.

Learn More about Me...

• Presentations
• Twitter
• Apps
• Company (Deque Systems, Inc.)
• Austin Accessibility & Inclusive Design Meetup

Presentation References

• http://jimthatcher.com/favelets/
• http://www.washington.edu/accesscomputing/AU/
• http://www.w3.org/WAI/demos/bad/
• http://squizlabs.github.io/HTML_CodeSniffer/