Accessibility Favelets
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 theid
of that div. - Show and label divs with classes
- Exactly as above, but this time only
<div>
s that have aclass
attribute are labelled. - Alt attributes - show all
- Displays all images on the page, alongside their
alt
attributes - useful for checking thatalt
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 inlineimg
, use an emptyalt
: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.
- 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).
Other Favelets (Non-accessibility related)
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?