Accessibility Favelets

Please note that this page requires JavaScript for it to function..

Please read the instructions if you don't know how to use these favelets.

Convert abbreviations and acronyms using Acrobot: Highlight some text on your web page (or perhaps some text that you are entering into a <textarea>, for example a Blogger or MovableType post), then run this favelet - the highlighted text will be passed through the Acrobot, converting all your acronyms and abbreviations. Please note: this has been tested in IE5 and IE6 on Windows but does not always appear to work with <textarea>s in Mozilla (although any other text highlighted on the page does work OK).
[Thanks to Matt for providing!]
Show and label divs with ids: When designing a web page, you will often use id attributes in <div> tags to enable precise positioning using Cascading Style Sheets. This favelet highlights ALL <div> tags with a red border and reveals the id of that div.
Show and label divs with classes: Exactly as above, but this time only <div>s that have a class attribute are labelled.
Alt attributes - show all: Displays all images on the page, alongside their alt attributes - useful for checking that alt attributes match up with the image.
Alt attributes - images missing alt attribute: Displays all images on the page that do not have any alt attributes - useful accessibility checking tool. Remember, an image used as decoration should ideally be set as a CSS background, but if the image must be an inline img, use an empty alt: alt="".
Disable stylesheets: Does exactly what it says on the tin ...
Enable stylesheets: Does exactly what it says on the tin (assuming you've just used the 'disable stylesheets' favelet) ...
[suggested by Heather James]
Show table headings <th>: Highlights table headings (yellow text on black background) - use this to see if table headings really are <th> tags or whether plain old <td>s were used instead.
Images list: Displays a list of all images on the page, excluding invisible spacer pixels. Also shows the file size for each image alongside the image
Links - titles and hrefs: Shows all links on the page and the contents of the link (text and/or images). Also shows title attributes of each link (if present - very useful for assessing how accessible your links are.
Show Style sheets: Shows the style rules, as parsed by the browser, in a new window.
Show links: Highlights links on the page in glorious garish lime

Show table cells <td>: Highlights table cells - changes border colour, background/text colour and adds padding to cell contents.
Show all DIVs: Highlights all <div> tags on the page with a 2-pixel red border.
General page stats: General page statistics, including when the page was last updated, what forms and stylesheets are linked, how many images, how many links and so on.
Form fields and values: Displays all form attributes, for every form on a page - useful debugging tool.
Meta data: Shows all meta tag data for the page (in case you are unable to view source, or source code is messy!)
Page dependencies: Lists page dependencies, including external script files (.js), external style sheets (.css) and images. Please note: this script is over the 508 character limit and may not work on all browsers.
Show tables: Dead simple - just places a solid black border around any table in the current document (but not cells within the table).

The small print: These favelets were originally written and tested using IE5/Windows 2000. They should work on most other browsers and platforms, but if they don't please let us know (and why they don't work, if you also know that!). Some may not work in IE6 (over 508 character limit).

Update: Some people have reported that favelets stop working after installing Windows XP Service Pack 2 - Can anyone confirm/deny this?

Accessibility Favelets

Other Favelets (Non-accessibility related)