Skip to Main Content
Toggle
(800) 889-9659
info@levelaccess.com

How to Create a Favlet for Accessibility Testing

Jonathan Avila 02/03/14

A Favlet (or sometimes called a Bookmarklet) is a favorite or bookmark item in a web browser such as Internet Explorer, Firefox, Chrome, or Safari, etc that allows you to perform some sort of function via scripting such as changing the page or performing a test on the page. An accessibility Favlet is a script that makes the page more accessible for a user or that helps testers and developers assess a webpage for accessibility violations.

Favlets have been used for accessibility testing for many years. Generally Favlets perform a particular test that you run on a given web page. For example, a Favlet can be written to make a page grayscale so you can check the use of color on a page. A Favlet can be used to show you form or table markup so you can evaluate the markup to see if it is correct. What happens is controlled by the person who created the Favlet and this means it can do just about anything that JavaScript will allow you to.

To use the Favlet, you place the Favlet code in a link and then add the link to the your Favorites Bar (IE) or Bookmarks Bar (Firefox). Then when you come across the page you want to use the Favlet with you simply activate the favorite or bookmark and the script is run, e.g. the page becomes grayscale or the form or table markup appears on screen. There are many accessibility Favlets available or you can create your own if you know how to write JavaScript. Grayscale is a great example with minimal code that works in most browsers except for IE 10 and 11. Thus, when writing cross-browser Favlets test them in multiple browsers before deployment.

Sample Favlet

I created a sample Favlet to help test complex data tables. Complex data tables often use id and header attributes that associate header and data cells. It can be cumbersome to review all of the ids and header string to make sure everything matches up. So in my Favlet I use JavaScript to check all td and th elements for the use of headers and then check to see if there are corresponding cells with those ids. If there are I place the header text from those cells into the data cell so it is easy to see what headers are associated with each data cell. The Favlet puts the headers in plain text with each data cell similar to how a screen reader might announce the headers.

Add the Complex Table Favlet to your Favorites or Bookmarks bar and then go to a page with a complex data table and try it out. This is just a sample so many features could be added and it can easily be tweaked to provide additional information. This Favlet lives on our server but many small Favlets can simply be JavaScript that are stored locally in your Favorite or Bookmark itself just like a URL — IE has a limit so longer Favlets will need to be stored on your machine or on a website.

The Details

To create a Favlet write your code in JavaScript to perform your test. You can use the alert function to display alerts or use the document object model (DOM) to access elements and modify the page such as by appending child elements. I’ve found the document.querySelectorAll() function to be very useful to generate a candidate set of elements for the Favlet. This function uses selectors like the ones in CSS to return a collection of DOM elements. Remember to use apostrophes instead of double quotes or escape your quotes with backslashes to make sure your code runs. It might be helpful to place your code directly in a webpage first until you perfect your Favlet – then pull the code out into either a JavaScript file that can be bookmarked or if it’s 600 characters or less you can simply put it in the href attribute of an anchor or into the Bookmark properties directly.

An anonymous function is typically used and the syntax is typically (function() { followed by the code then a closing } ) (); The code can contain line breaks and spaces and generally be formatted although you may want to optimize or obfuscate it as desired.

Sample separate file link that users can bookmark

<a href=”javascript:(function(){javascript:(function(){ /* code here */ })();”> My Favlet </a>

Sample code directly in link that people can bookmark

In this example a script element is created and then appended to the body of the page. The script source is the file JavaScript file.
<a href=”javascript:(function(){var%20element=document.createElement(‘script’);element.setAttribute(‘src’,’complex_tables.js’);document.body.appendChild(element);})();”> Complex Tables Favlet </a>

Leave a Comment

Your email address will not be published. Required fields are marked *