digital media access group
...excellent accessibility research and consultancy
Bookmarklets: An aid to checking the accessibility of your website
By Nicola McIlroy, published 1st April 2005.
Manually checking your website against the W3C's Web Content Accessibility Guidelines [1] is an important way to check the accessibility of your website. However, many of the WCAG checkpoints require the underlying HTML code within a web page to be inspected and manually edited, which can be a time-consuming process when a site contains a large number of pages or poorly laid out code. However, a range of tools are available for download from the World Wide Web, which facilitate checking the accessibility of your site, including accessibility 'Bookmarklets'.
The term 'Bookmarklets' was first coined by Steve Kangas, who designed a website dedicated to them at http://www.bookmarklets.com [2]. Bookmarklets (also known as Favelets) are simple JavaScript programs which can be stored as 'Favourites' in Internet Explorer or 'Bookmarks' in Netscape/Mozilla. When you 'follow' a bookmarklet, it performs a specific task on the web page your browser is currently viewing. Such a task might be changing some aspect of the display of the page, or automatically sending the page's URL to an HTML validation tool.
As an example, the following code can be saved as a bookmark in Internet Explorer, and when selected it will generate a copy of the web page being viewed with the background colour changed to green:
<a HREF = "JavaScript: void (document.bgcolour = #00FF00')">Green Background</a>
Right clicking on this link or dragging it into your favourites in Internet Explorer will enable you to select the favourite or 'bookmarklet' from your browser which will run the script and produce a new page with the background colour changed to green.
In order for bookmarklets to function, your browser will have to be IE5 or above, NN6 or above, or Opera 5 or above. Bookmarklets are operating system-independent; however they do require JavaScript to be enabled [3].
The potential for bookmarklets to support accessibility evaluation of web sites is clear, and there is now a wide range of bookmarklets designed to facilitate checking your web site for specific accessibility issues. In some cases, these have been incorporated into 'toolbars' providing a range of accessibility options. A few of which are described below:
- Cascading Style Sheets (CSS) - bookmarklets are available which can, for example retrieve information on CSS used within a site, open a CSS file used within a page and disable CSS. This can help to ensure that a web page is viewable when CSS is not supported.
- Images – a range of bookmarklets are available which allow you to retrieve image information for a web page, display text alternatives provided for images and instances where images are not provided with a text alternative. This helps ensure that the page is acceptable and understandable to people browsing when images are turned off or unsupported (such as when using a screen reader).
- Linearise content – bookmarklets are available which allow you to view your page in linear form with all tables and columns removed. This helps to ensure that the content is readable for users browsing in a linearised browsing environment, for example, using Lynx, a text-only browser, or using a screen reading device.
- Resize the screen – bookmarklets are available which can be used to resize the screen and are useful to ensure that pages are viewable on different screen sizes. Checking that content is not hidden on a smaller screen size is important to ensure adequate usability for people accessing the website using low resolution displays, or small display screens such as a mobile phone or a PDA.
- Check HTML – bookmarklets are available which can retrieve information on the HTML used within a web page; for example, a bookmarklet can check for the presence of heading elements on a web page and display any heading elements used.
The AIS accessibility toolbar [4] is an extension for Internet Explorer which incorporates a range of accessibility options and similar extensions exist for Mozilla and Mozilla Firefox browsers; for example, the Web Developer's toolbar [5] and Accessibar [6]. Accessibar is also useful as an assistive technology as it redisplays the page in for example larger text or with wider spaces between lines and offers text to speech integration, enabling the content of a web page and features of the browser interface, to be read out loud to a user.
Accessibility bookmarklets can be labour-saving tools, helping you to inspect, extract and examine the content of a web page without having to wade through and edit the underlying HTML code. However, bookmarklets, as with the majority of automated accessibility checking tools, must be utilised in conjunction with manual checking and a good knowledge of proper structured markup, as specified by the WCAG, to ensure that a website is accessible to as many users as possible, regardless of browsing environment or experience.
Further Bookmarklet Resources
For more information on bookmarklets, check out these sites:
- Accessify.com - http://www.accessify.com/tools-and-wizards/accessibility-checking-favelets.asp
- Bookmarklets which use Bobby to check your browses current page for accessibility issues - http://www.1122productions.com/brandon/archives/000824.html
- The WAVE bookmarklet - http://wave.webaim.org/index.jsp
- Validation Bookmarklets - http://www.squarefree.com/bookmarklets/validation.html
- Free Web development and Accessibility Tools - http://www.visionaustralia.org.au/webaccessibility/workshops/references.html
References
- W3C Web Content Accessibility Guidelines version 1.0 - http://www.w3.org/TR/WCAG10/
- Steve Kangas Bookmarklets web site - http://www.bookmarklets.com/
- Ross Shannon's Bookmarklets web site - http://www.yourhtmlsource.com/accessibility/bookmarklets.html
- The AIS Accessibility toolbar – www.nils.org.au/ais/web/resources/toolbar/
- The Web Developers toolbar - http://www.chrispederick.com/
- Accessibar - http://accessibar.mozdev.org/