I recently came across Pearl Crescent Page Saver and I can see that it will be another useful tool to be used in 2008 when I’m working on template designs. Rather than just producing an image of what is visible on the screen, as happens with normal screenshot programs, it will include the whole of the web page. There’s also an option to run it from the command line, so it would be possible from a single command to create a batch file (or similar shell script)  to capture a range of templates that I’m working on.

I’ve found that it has been very useful for documenting the evolution of templates & I can see that it will be handy for comparing different versions (e.g. how a template looks as plain HTML/CSS pages and when it is integrated into a system, or to ensure that there have been no side effects when upgrading a look and feel).

Ideally there would be a similar tool for Internet Explorer as you would then be able to track the majority of the users – and it other browsers would be included it could then be used for cross-browser checking.

Essentially the idea is that you have (at least) 3 grades of web browser:

• an identified list of browsers (+ operating system) that will take full advantage of the capabilities of modern browsers and will be tested thoroughly (grade A)
• an identified list of browsers that will be able to access core functionality & content, but will only have a representative sample tested (grade C)
• the rest that will either take conform to current web standards like the grade A browsers or be able to function at the minimum level of the grade C, however there is no testing and no support (grade X)

Which browser gets put into which grade is going to depend on their market share for your audience (or the audience you desire). So in Yahoo’s case it’s approximately 96% in A, 3% in C & 1% in X.
It also takes up the idea of progressive enhancement of web pages rather than the more established idea of graceful degradation – i.e. that the first concern is about presenting the core content & functionality and then building on that, rather than putting in the bells & whistles and then trying to ensure older browsers didn’t trip up.

I must admit that each time I wrote ‘gracefully degrade’ in a proposal or documentation it felt like I was writing the next verse in a Tom Waits’ song (“We’re decomposing as we go”). So not only does the change in perspective make sense, but it will also make me feel better if I have to think about it on a Monday morning.

Starting as you mean to go on

A good starting point is the recent BSI guide – PAS 78: A guide to good practice in commissioning accessible websites – freely available from the Disability Rights Commission.

Usually the emphasis is those involved in production – the developers and the graphic designers. If you’re using external resources then you’ll be looking to see accessibility as part of the quality control process & some previous experience of working to these standards. With an internal team you’d also want to be proactive with training and exchanging useful resources so that issues are identified long before you’re into testing.

However there are some areas that are worth considering at the start to ensure that you don’t lead everyone astray:

• ensure that there’s time for accessibility checks on the final design choices – this is usually an area where everyone has a strong opinion and there’s pressure to start producing something, but you need to make sure that there aren’t problems with colour combinations or contrasts (and time to come up with a compromise if there are)
• if you’re planning to use JavaScript or Flash then make sure that thought is given at the start to an alternative for those who won’t be using these technologies (sometimes people think this means you can’t do whizzy things in JavaScript, that’s not the case you just need to make sure that there is another route to achieve the same goal)
• again with JavaScript make sure that it works with a keyboard or a mouse – all too often programmers focus on the latter, even though it doesn’t take much more effort to include both options
• including content in other formats (e.g. PDF files, video, audio, etc.) requires them to be accessible or alternatives provided – see the Rich Media Accessibility articles on WebAIM for more information on accessible PDFs and captioning videos, etc.
• remember to inform anybody providing third party add-ons that those also need to be accessible – it’s easy to forget them as you’re thinking about the service they’re offering rather than what you need to add to your site (we’ve had experience of this with web traffic analysis tools)

Checking it out

Unfortunately relying on automated testing isn’t going to tell you with your site is accessible or not. Many of the issues require an understanding of the content being displayed and therefore will be beyond the capabilities of the most sophisticated program (e.g. identifying headings and lists within text). So you’re going to have to rely on people making subjective decisions and spending time sifting through HTML code. If you’re not clear if something is a problem (& can’t find examples of best practice) at least be consistent in your decision.

Minor tweaks under pressure

Frequently the life of a website involves a whole raft of minor amendments with very tight deadlines attached to them. One day everything will be planned and orderly so that it can go through stringent quality control before being made live – honest guv! Until then how are we to keep on the straight and narrow?

I would suggest that the changes are logged and then made part of a regular website review that would include assessing the impact on accessibility. It will also allow you to run through other quality control processes and give an opportunity to clean up those quick & dirty fixes that are always made under pressure.

Creating content

It’s not just the techies that have to think about accessibility but everyone contributing content to your website. However their focus is going to be on writing text or creating images and not necessarily the mechanics of what happens when that’s displayed in a browser. So some ways of helping them could include:

• providing resources on making their content accessible that relates to the tools they’re using – on this blog we’ve some advice for people using rich text editors
• reducing the decisions that they need to make by looking at the different content types that you have and draw up guidelines on how they are to be created – this would mean that they can be checked by someone focused on accessibility issues but also help you to maintain site design conventions
• making sure that your web authoring tools make it easy for your content providers to style their text – e.g. if someone wants to highlight a paragraph with a bullet then they could mistakenly make it a list as that’s the only option they can see in their rich text editor and it produces the result they want
• making authors aware that they have to take responsibility if they try something not within your guidelines

In amongst the criteria for Directgov are the requirements that the web pages must be Double-A accessible and be valid XHTML 1.0 Strict. The code that the third party supplier (speed-trap) handed over would have failed on both of these counts – and therefore the same would be the case for all of the pages where it was included. We had a similar experience earlier on in the year with WebTrends.

In this instance only minor amendments were required to solve the problems, but these are the types of additional functionality that are either added at the last minute to a development project or as part of minor maintenance to a live site. In those circumstances it can be very easy to miss the issues as time pressures are higher and the quality control can be at a lower level.

So it’s important to be vigilant & not to trust code handed over by third-parties, but also to make sure that other suppliers are aware of the standards for your website.

One way around this is to have virtual copies of Windows running on your computer, each with their own single, different version of IE. Microsoft have such a product and have now made Virtual PC 2004 free to download (Virtual PC 2007 version has gone into beta testing, so that’ll be the version that you’d have to pay for in the future). To run it you’ll need a reasonable chunk of memory (after all you’re running another copy of Windows inside your normal Windows), either Windows XP Professional or 2000 Professional (Home versions of either won’t work), and a license for another copy of Windows (the one that’ll be installed in the Virtual PC).

You can also get a free, time-limited version of XP with IE6 (Service Pack 2) set up from Microsoft as well. So you can upgrade your normal desktop browser to IE7 & then use this version to check that your pages still look fine in IE6. They’re intending to put another time-limited version up before this one expires, so you’ll need to update your copy every now & then. Obviously Microsoft don’t want to be giving away copies of XP at the moment.

If you’re looking to go further back in time then you’ll have to use earlier versions of Windows as you can’t install anything earlier than IE6 on XP. So you’ll need to use:

• Windows 98 (the original version not Second Edition) for IE4
• Windows 2000 for IE5
• Windows 2000 for IE5.5 (you upgrade from version 5 to 5.5 and you can find the appropriate files at the evolt.org browser archive – a good place to get other past versions of browsers)
• Windows XP or Vista for IE7

If you want to go the whole hog (as we do) then you’ll also want to have a duplicate of the same version of IE that you use normally but with the default settings (you might have changed them for your day-to-day work). For IE6 you could also have versions with and without Service Pack 2 applied. This was the update that put in the extra security features such as the pop-up blocker so it shouldn’t make a difference to how your website looks, but you might find differences in how it works.

The same technique can be used on other systems – I use Parallels Desktop for Mac as Microsoft’s Virtual PC for Mac doesn’t work on the new Intel systems (but that is a good option if you’re on a PowerPC Mac).