In setting up your work environment it is sensible to work mainly through an html editor and a specific (up to date) browser, keeping a range of other browsers for checking. By using a specific browser you can install useful tools into it and make your testing process as streamlined as possible.
To create valid code you need to check it via a validator, such as http://validator.w3.org/. There are several tools that allow you access direct from a browser:
- For Firefox, the web developer toolbar adds the largest range of tools - find it at http://chrispederick.com/work/web-developer/
- Again for Firefox, HTML Validator (http://users.skynet.be/mgueury/mozilla/), adds a little icon to the bottom right of your window, which is a really quick indicator of if your page has problems.
- For MS Internet Explorer, web developer tools are built into IE8/9 . http://www.visionaustralia.org.au/ais/toolbar/ is a good accessibility toolbar
- For Safari, choose Safari > Preferences and in the General panel (the first you come to) check the box by 'Show Develop menu in menu bar'. This will give you a whole extra menu of functionality
Assembling a set of test browsers
It is useful to look in your logs (easiest with Google Analytics) and see what browsers and versions of browser your audience are using. For a typical measurement, in May 2011 (May 2010) on http://www.cam.ac.uk the breakdown is:
- Firefox 26.96% (29.62%)
- Internet Explorer 8 24.95% (23.23%)
- Safari 15.84% (versions too difficult to untangle) (12.04%)
- Chrome 15.64% (8.43%)
- Internet Explorer 7 9.20% (18.43%)
- Internet Explorer 9 2.70%
- Internet Explorer 6 2.37% (6.31%)
So for pages on this server the test browsers ought to be Firefox (preferably on more than one platform, but the differences are slight), MSIE 8, Safari and Chrome plus making sure MSIE 7 gives usable results. That's probably a good representation of what browser testing ought to be done.
Assembling a set of tools
If you choose to use Firefox as your authoring browser, there are a large number of tools that come with a Firefox extension - many of these are also available via a website of their own and/or for download as a application, and most will also let you upload files or paste in sections of code:
The first five are all accessibility checkers - you should look at all of them and choose which you think suits you best
- TotalValidator can be used on the web, installed as an application or as a Firefox extension (see http://www.totalvalidator.com/). It will validate xhtml.html, against different levels of the W3C Web Accessibility Guidelines (1 and 2), check for broken links and give you snapshots of your pages in a range of different browsers and platforms. By default it will do a minimal validation for code and accessibility - to select the options you want to check against, you need to go to follow 'Select validation options' - see http://www.totalvalidator.com/validator/ValidatorForm. The xhtml/html validation is terrifying thorough - choose to believe the w3c validator rather than this.
- WAVE is useful for looking at the organization of your pages - see http://wave.webaim.org/ - it's available as an application or as a Firefox extension but it is still set up for checking against version 1 of the Web Accessibility Guidelines.
- EvalAccess (http://sipt07.si.ehu.es/evalaccess2/) is useful as it allows you to assess up to 15 pages at a time via the web - it is still set up for checking against version 1 of the Web Accessibility Guidelines.
- Web accessibility checker (http://achecker.ca/checker/index.php) gives very well formatted results and allows concurrent xhtml/html validation. Checks against different levels of the W3C Web Accessibility Guidelines (1 and 2).
- SortSite is a very good testing tool (http://www.powermapper.com/products/sortsite/index.htm) - it is commercial but cheap (about £60) and only for Windows but can be used for a 30-day trial period or an online test. It will test all pages it finds on the site.
- Firefox WCAG Contrast checker (https://addons.mozilla.org/en-US/firefox/addon/7391) extension, which reports on all the colour usages on a page
- For checking CSS there are tools in the Firefox web developers toolbar, but for working with inherited styles and working with Javascript the Firebug extension is the best choice (see https://addons.mozilla.org/en-US/firefox/addon/1843). This is also built in to Opera (v10/11).
Last updated: 7 June 2011