Path // www.yourhtmlsource.com → Accessibility → BOOKMARKLETS
Bookmarklets are simple little programs that you can integrate into your browser to make your coding, debugging and researching lives a whole lot easier. Best of all, they're easy to use and modify for your own use.
This page was last updated on 2012-08-21
Browser Compatibility Note:
Some of the following bookmarklets will not work in certain browsers. The best thing to do is to test them by clicking their links on the page here before adding them to your bookmarks folder.
How they Work
Then just add these links as favorites like you would any other. You can even add them to your Internet Explorer Links bar or Netscape Personal Bar for immediate access to the most useful ones. You may get a security alert when 'installing' the scripts, but don't worry, these are all perfectly » safe to use and do not change any settings on your computer.
Once they're added you can use them straight away — just click their name in your bookmarks menu and the script will run.
Let's see them
Ok, I've organised these under headings; bookmarklets can help in a range of tasks. Remember, just click and drag any of the bookmarklet links below into your bookmarks menu.
- Validate Markup with W3C Validator
- Opens up the W3C HTML validator with the current page as the subject. Great for simultaneous coding and debugging. The page will open in the same window as the source page.
- Validate CSS with W3C Validator
- The same as the one above, but this will validate any stylesheets linked or imported into the current document.
- Validate Recursive pages with WDG Validator
- Much the same as the W3C validator, but the Web Design Group's validator can follow links to other pages and validate them too.
- Verify Links with W3C Link-checker
- Checks that no links are broken on the page you're looking at. Source: » Favelets.com.
- Toggle CSS Stylesheets
- Superb little script that will turn off any linked stylesheet at the touch of a button. Useful as much for coding as it is out of interest. This should really be a feature built-in to most browsers. Click it a second time to enable CSS again. Source: » Favelets.com.
- Zoom In / Zoom Out
- Zoom in and out of the current page in 50% increments — excellent for fixing pixel-level problems. Source: » Sam-I-Am.com.
- Resize to 800x580
- A simple code that resizes your window to the dimensions still most common among web surfers. If your page doesn't look good like this, you're boned. You can also resize to 640x460, 1024x748 or any other dimensions you want — just modify the short code. Note that the heights defined here are 20 pixels shorter than the corresponding monitor resolutions to take the Windows taskbar into account. There are more outlandish dimensions at » favelets.com.
- 216 Websafe Color Chart
- Quickly draws a table of the websafe colour palette, in case you've forgotten the HEX codes. The reference page is generated entirely by the bookmarklet.
- Basic ISO Latin Characters
- Creates and displays a shorthand Latin special character reference. Source: » Bookmarklets.com.
- Page Weight
- Returns the combined filesize, in bytes, of the HTML file and all of its images. It doesn't include linked CSS code or scripts in the total however. There's also a utility that prompts you for a filesize in KB and returns the download time on a 56k modem. Source: » DanSays.com.
- Show Comments
- A clever, very cool-looking bookmarklet that adds an icon at each comment in a page's source code. Click the icon to see what the comment contains. Mostly useful out of interest. You need to be online for this to work, as it loads an external JS file. Source: » EndQuote.com.
- Choose Style sheet
- Since most browsers (most noticeably IE) lack support for choosing alternate stylesheets, this provides an interface for choosing an alternate style yourself, if one exists for a page. Source: » Favelets.com.
- Grayscale the Page
- Applies a filter over the page that takes all the colour away. Great, quick way of testing your page for legibility. Slows your machine down a fair bit though. Source: » 508 Compliant.
- IMGs missing ALTs
- Goes through your page checking if all your images have
altattributes. If not, it'll tell you which ones are missing them. Source: » 508 Compliant.
- General page Information
- Whips up a page of information pertaining to the current document, like the number of scripts, images and stylesheets; the creation and modification dates etc. Source: » Ian Lloyd.
- Meta Data
- Cleans up a page's meta data into a nice table for easy reading. Source: » Ian Lloyd.
- Count Selected Words
- Counts the number of words in a block of selected text. Very useful. Only works in IE. Source: » DooYoo-uk.
- Look up word on Dictionary.com
- Very handy bookmarklet to have, just select the word you need help with and it'll open the corresponding Dictionary.com definition. There's also a synonym-finder through thesaurus.com. Source: » Blog of Francois.
- Page Freshness
- When you need to find out when a page was last updated, this bookmark will query the server and return the last modification date. If the server isn't configured right you may get some replies that are clearly wrong. Source: » Bookmarklets.com.
- Google Search
- Searches Google for the words selected on the page. If you haven't selected anything, it brings up a prompt box to enter words into. Source: » Google.
- IMDb Search
- A personal favourite, I got sent this very useful modification of the Google bookmarklet above by a reader. It'll do a search on any words you have selected, or bring up a prompt for your input; and then search the » Internet Movie Database for you.
- » Google Toolbar
- This isn't a bookmarklet, but a whole new bar for your browser that allows you to search Google from anywhere, and get a lot of information about a page through some great features like what's related, backward-links and cache-viewing. Excellent.
- » IE Web Accessories
- A really helpful group of new commands for your right-click menu in IE5+. You can generate a links lists (very helpful for checking how your link-text reads out of context), an images list or open frameset pages in a new window. Also there's an Internet Explorer utility that will toggle image loading on and off without having to go into your Internet Options. It's not a bookmarklet, but a small executable program. All in all, some rather essential utilities.
Other Accessibility Articles // Website Navigation · Content Accessibility · Logical Style · Testing your pages · 10 Bad things · Browser Support · Non-dithering Colours · HTML 4 Explained · XHTML Explained · Mobile · The Redesign Process · Bookmarklets
What’s Related // More Useful Programs