If you’re in Washington DC the week of April 5th – 10th, you can take Jakob Nielsen’s class on writing for the web.

They’ll also be in London, San Francisco and Sydney this year, but if you can’t make it to any of these conferences, you can always read through the section on his website devoted to Writing for the Web.

I tried to make this post short, so you wouldn’t skim it. Did you?

This hide-and-seek is something I’ve noticed across a lot of sites with accessibility statements. These statements are by no means ubiquitous, so even if I’m trained to look for one I’m probably going to stop looking altogether after going to the hundredth site that doesn’t have one. Thankfully, the solution is one that is blindingly obvious once you think of it, and quite easy to implement.

If you look at Mark Pilgrim‘s great accessibility resource, Dive Into Accessibility, with the stylesheet turned off, you’ll see a link near the top that says “Skip to Navigation.” This link is hidden by the CSS, so folks with regular browsers won’t see it. This navigation aid is supposed to make the site easier to use for the kind of people who need more accessible websites. So if you’re on a site that has an accessibility statement, you’re probably also on a site that has a hidden “Skip to” link or two. The markup is usually some variation of this:

<h1 class="title">
<a href="/" accesskey="1">Dive Into Accessibility</a>
</h1>
<p>30 days to a more accessible web site</p>
<a class="skip" href="#startnavigation">Skip to navigation</a>

and the CSS to hide it from view:

.divider, .invisibletitle, a.skip {
display: none;
}

Update: Based on the post Hiding with CSS: Problems and Solutions from Roger Johansson, it turns out using display: none; will hide elements even from screen readers. The alternative is to use the off-left CSS hack:


.divider, .invisibletitle, a.skip {
position:absolute;
left:-9999px;
}

which is definitely hacky, but gets the job done, without breaking anything.

If you try to find the accessibility statement, and you’re looking at the page without the benefit of layout from the stylesheet, the link to it is way down at the bottom in the site links, after all of the content and the navigation. There’s already a link up top to assist in jumping past the content to the navigation, so why not use that hidden space to invite the user to read the accessibility statement first thing? Here’s the additional markup:

<h1 class="title">
<a href="/" accesskey="1">Dive Into Accessibility</a>
</h1>
<p>30 days to a more accessible web site</p>
<a class="skip" title="Accessibility features of this site" href="/accessibility_statement.html">Please take a moment to review the accessibility features of this site.</a>
<a class="skip" href="#startnavigation">Skip to navigation</a>

Voilà, the user gets an immediate prompt that you’ve taken the time to make the site easier for them to use. Now I’ve just got to go back and put this in to all of the old sites I’ve worked on.

• Conflicting information;
• Too much information;
• Too little information;
• Unnecessary information;
• Poorly scanned documents;
• Confusing terminology;
• Unavailable websites;
• Too many mouse clicks; and
• A “simple” 10-page online form.

Do any of these sound familiar? They’re mostly fundamental usability errors due to the website managers

“…thinking that something is better than nothing. Many managers see a website as a project. They measure success based on things done. The website has an online application form, it has a search engine, and it has content. The form and search engine may not work well, the content may be badly written, but that’s not what’s important. What is important is that the project is completed.

No manager sets out to design a bad website. The problem is that too many managers view content as a commodity instead of the critical asset that it is.”

E-Government: No website is better than a bad one 18 October 2004

Gerry went online to renew his driving license, found the correct form (which he downloaded but found to be a bad scan of a hard copy) and was told to call his local authority (which is actually called a council) to see if they accept forms downloaded from the web, found his council’s website (which was down), called another council that might also work in his case and was told that this council handled the driving licenses for the one whose website was down. Then he saw a link to a simple online form which happened to be a 10-page version of the one page badly scanned hard copy he’d downloaded before, and then on page 9 of that form, he discovered that it wasn’t an online application at all, but was going to print out the one page form he’d downloaded earlier. This is due to the fact the the driving license application requires a physical signature, a couple of photographs, a medical report and some other stuff to be mailed in to the local office.

If it was frustrating to read that, imagine how much easier it would have been to have found the following information on the first page of your search:

To renew your driving license, please ring your local county council office. A contact list follows.

E-Government: No website is better than a bad one 18 October 2004

While Gerry talks about this case-study in terms of the failure of the content, it’s actually a failure of the entire process that any eGovernment site or application should go through. There’s no indication time or care was spent in planning, implementing or testing any part of the process of renewing a driving license. In the private-sector such poorly executed projects would destroy the reputation of any business that provided them, but there is little impetus to strive for excellent usability, thorough planning and implementation in a government design shop. The jobs are safe, the money is guaranteed and there is usually such a high workload that the time simply isn’t there to give each site or application the care it deserves.

EGovernment services (such as driving license renewal) can be improved simply by sitting down with the developers and designers before the project starts and having a discussion about all the ways that the website or application can be simplified for the user. Getting everyone together and starting the conversation might seem a bit like cat herding, but it is sure to save time, money and end-user frustration in the long run.

Articles referenced in this post:

1. Renewing my driving license online in 50 tortuous steps: Part 1
2. Renewing my driving license online: a Kafkaesque experience: Part 2
3. E-Government: No website is better than a bad one