Helpful tools for webmasters
There are many free tools out there to help you build and check your website. Below we list some of our favourites, but if there is something awesome you use which isn't listed, please let us know about it.
What the icons mean
Bookmarklet
Chrome extension
Firefox add-ons
Application
Web application
Accessibility
| Tool | How it can help you | Try the tool |
|---|---|---|
| aXe accessibility testing | Accessibility checker for Web Content Accessibility Guidelines (WCAG) 2.0 and Section 508 accessibility. | |
| Colorable contrast checker | Color combination contrast testers against WCAG 2.0. | |
| Color blindness simulator | Simulate different types of colour blindness by simply uploading an image and selecting your view. | |
| Colour Contrast Analyser | Helps determine the legibility of text and the contrast of visual elements. Available for Windows and Mac, and in multiple languages. | |
| Headings Map | Displays a page's heading hierarchy in a side pane. | |
| HTML_CodeSniffer | Check the accessibility of a page against different standards and conformance levels with this client-side application. | |
| NoCoffee vision simulator | Vision problem simulator, including colorblindness, low contrast, low acuity, obstructed visual field, visual snow, glare, ghosting and cataractsm, and nystagmus. | |
| NVDA screen reader | NVDA (Non-Visual Desktop Access) is a free screen reader. | |
| Siteimprove Accessibility Checker | Evaluate any web page for accessibility issues at any given time. | |
| Snook Colour Contrast Check | Determines if text and background colours meet WCAG 2.0. | |
| Tenon Check | Check your current page for accessibility against WCAG 2.0. | |
| WAVE toolbar | Shows accessibility information and issues. | |
| WCAG Contrast Checker | Checks whether text and background colours meet WCAG 2.0. | |
Coding & development
| Tool | How it can help you | Try the tool |
|---|---|---|
| Browser Stack | Live web-based browser testing on all desktop and mobile browsers (free trial, paid tool). | |
| CSS dig | Find and group stylesheets and style blocks on most websites, providing an easy way to analyze the code and plan refactors. | |
| Firebug | Allows you to inspect and edit HTML, CSS and Javascript live in any webpage. | |
| HTML Validator | Scans a page for HTML validation errors which can cause problems with display. | |
| It's All Text | Allows you to edit any textarea on the web in your favourite text editor (eg with syntax highlighting). | |
| Web Developer toolbar | Has a number of tools to help you inspect a page and find problems. | |
Content editing
| Tool | How it can help you | Try the tool |
|---|---|---|
| Context highlighter | Allows quick and easy highlighting of all instances of a word or phrase within a page. | |
| Link Checker | Checks your site for broken links and can be run on the command line and scheduled. | |
| Pinger | Extremely fast link checker for finding broken links on a web page. | |
| Show File Size | Shows the size of linked documents in a pop-up before you download it, which can help with adding file sizes to document links. | |
| Spell Checker | Checks spelling and highlights errors. Also useful for finding 'ANU' and checking that it's used correctly. | |
| Wired Marker | Webpage highlighter that can help you keep track of content that needs attention. | |
| Xenu Link Sleuth | Checks your site for broken links. Also helpful for finding all document links to add file type and size information. | |
Design
| Tool | How it can help you | Try the tool |
|---|---|---|
| ANU grid | Overlays the ANU grid on any webpage using any browser, allowing you to check that everything is properly aligned. | |
| ColorZilla | Eyedropper tool which allows you to find the colour of any element on a webpage. Can be useful for contrast checking (see accessibility). | |
| Lorem Ipsum | Dummy text made to look like readable English for testing page designs. | |
Browser configuation
| Tool | How it can help you | Try the tool |
|---|---|---|
| Clear Cache Shortcut | Quickly clear all your browser cache with a single click. | |
| Drupal Version Check | Shows you which version of Drupal a site is using and whether it is outdated. | |
| Empty Cache Button | A handy toolbar button to empty the cache and reload the page so you can be sure you're looking at the latest version. | |
| Firefox Environment Backup Extension | Allows you to quickly and easily backup your Firefox extensions. | |
| Form History Control | Manage form history entries (search, edit, cleanup, export/import) and easy text formfiller. | |
| QuickJava | Allows quick enable and disable of Java, Javascript, Images, Stylesheets, Flash, Cookies, Image Animations, Silverlight, and Proxy from the Statusbar and/or Toolbar. | |
| Restartless Restart | Add a 'Restart' menu item to the 'File' menu, with an optional toolbar button, which will restart the program without losing your tabs. | |
| Text MultiCopy | Allows copying of text multiple times from multiple locations before saving all to the Clipboard. It does not interfere with normal copy/paste functions until data is saved to clipboard. | |
| Wappalyzer | Shows you which technology (eg content management system or programming language) is being used to deliver any webpage. | |
Note: Icons on this page were created by dAKirby309 as part of the Metro UI Icon Set.