Pemaquid Communications

Before launching a new site, it’s always a good idea to run a check on its accessibility to folks with visual or other physical disabilities.

One of our favorite tools for checking Web site accessibility is no longer available. The WebXact service from Watchfire had a very comprehensive free assessment tool that not only checked accessibility but also other important components of the Web page to make sure it was well-formed. Alas! IBM, which owns Watchfire, decided in February that the tool would no longer be offered for free - it now costs a very steep $1,580 for a 12-month license.

Not surprisingly, according to one metric I use, the site’s traffic plummeted in March to half of its previous levels. I expect April’s traffic numbers will be down even further. Perhaps a better idea would have been for IBM to continue offering WebXact for free while posting ads for content relevant to those using the service.

No matter. Other excellent free tools are available. Here are a few we use at Pemaquid:

• Cynthia Says Portal (contentquality.com) - from HiSoftware, a company that develops accessible software. Just enter the URL of a page in question on your site, and the service will run a report to show how it measures up against the Web Content Accessibility Guidelines and Section 508 guidelines. The report is thorough and runs very fast. It’s become the spot-checker-of-choice for many top-flight Web design firms.
• WAVE - runs a similar report when you enter the URL of a page. Offers a visual view of the page as well as some other features, including a text-only view. Not as comprehensive as Cynthia Says. Here’s a report on Pemaquid’s home page

No accessibility tool is perfect, but these two can help you avoid making obvious mistakes.

Finally, I should add Web designers shouldn’t rely on any tool to tell them whether their work is accessible. You need to do your homework. Required reading: the Web Accessibility Initiative guidelines for accessible Web design.

I surfed over to a certain Maine Web site the other day and found that it had been redesigned. Here is the site navigational structure:

Can anyone tell me with 100% certainty what those items represent?

Therein lies the problem. You can’t tell what you’re going to get when you click (you can’t even tell that you can click). The only hint that this is the site navigation is that it is positioned in the spot where, if you’ve surfed for any length of time, you know that navigation is usually found.

Here’s the site, btw, if you’d now like to see that nav positioned within the overall layout.

(I don’t mean to pick on Downeast. They’re a great company and their Web site is far better than the previous version. I’m just using their site to show how you can improve the user experience on sites you design.)

Navigation is best as text. Text that is unambiguous. “About” is more effective than “Who We Are“.

Lo and behold, when you mouseover the nav on this site in question, you see a… word.

There are two big reasons why you should use text in you site navigation.

Usability. There’s an excellent book on Web design by Steve Krug called Don’t Make Me Think. In it, Krug points out usability studies show that people usually don’t read Web sites - until they’ve found that article they were searching for - they scan them. Navigational text that is simple and clear supports this scanning activity. With graphics, you have to stop and think (”hmmm… what could a camera mean?…”) This is why icons, unless they are universally understood, are also poor choices for navigational labels on Web sites.

Accessibility. In the example above, if you were visually impaired and came upon this site, there would be no way for you to understand that the images represented the site navigation. It would be much better to place navigational items towards the top of your HTML as a list of text links and to then use CSS to style the list to match your overall design concept.

Web site designs like the one in question point to a larger issue in Web design, which I call The Tyranny of Graphic Design. That’s a topic for another day, but briefly, Web design is not graphic design. It’s interaction design (of which graphic design is certainly a part). In creating Web sites, designers should take care that the graphical design concepts they produce make it easier for people to find what they’re looking for on a site, not harder.

Don’t make me think…

It’s that time of year again, when people take a look back at what they’ve done and take a look ahead. Some, including Yours Truly, still even make New Year’s Resolutions.

Seth Godin has a great post on his blog today that fits right in with that theme. He says people should think about what they’re doing right now and ask themselves if they will be proud of themselves 15 years hence. Do we think these are crazy days? Godin says that’s nothing new:

So stop thinking about how crazy the times are, and start thinking about what the crazy times demand. There has never been a worse time for business as usual. Business as usual is sure to fail, sure to disappoint, sure to numb our dreams. That’s why there has never been a better time for the new. Your competitors are too afraid to spend money on new productivity tools. Your bankers have no idea where they can safely invest. Your potential employees are desperately looking for something exciting, something they feel passionate about, something they can genuinely engage in and engage with.

If times are going to be crazy no matter how you slice it, says Godin, Why Not Be Great?

Sounds like a good Resolution to me.

Leo Burnett, the great ad man, had the same idea, which he put this way:

When you reach for the stars, you may not quite get them, but you won’t come up with a handful of mud either.

And Donald Trump said:

As long as you’re going to think anyway, think big.

To paraphrase The Donald, if you, like me, are going to build Web sites anyway, think big. Stretch a little bit this year:

• If you’re still coding layouts w/table structures, learn some CSS (Your Clients will thank you because their sites will be easier to update and maintain)
• If you’re still creating design concepts that depend on embedding a lot of images into each Web page, again, learn some CSS (Clients will appreciate that their pages are dramatically smaller, load more quickly and use much less bandwidth - bandwidth costs money)
• If you’re not yet writing valid code based on Web Standards, start (Clients will thank you when it becomes easier to maintain the look and feel of their sites across different browsers and operating systems
• If you haven’t learned about Web site accessibility, start reading up on it, and apply to your sites (your Clients, and their Web site visitors with visual and physical disabilities, will thank you for being mindful of their special needs)
• If you think it’s more important to bring people to your site - (search engine marketing) - than it is to keep them there - (Web site design and usability) - please think again (if you don’t, your Clients’ competitors will thank you for sending customers their way as they flee a hard-to-use site)

Here’s wishing you a happy, productive - and Great! - New Year!

I’d like to thank Shirley Helfrich, Thomas Bennett and the folks at the Prince Memorial Library and everyone at the Southern Maine Library District for inviting me to speak the other day about Web site usability at their annual conference. Thanks for the opportunity, the thoughtful questions - and for not throwing tomatoes!

Here are some of the tips I mentioned (and some I did not), as well as some links to resources you might find useful.

Usability

• people don’t read Web pages, they scan them support that scanning activity by “chunkifying” the content on your pages (use headings, subheadings, lists, meaningful link text)
• don’t use “click here” in your link text. It’s wastes space. Use either an action word (”shop”, “review”) or a descriptive word (”apples”, “oranges”) that describes what the person will see when clicking
• if you want someone to click on something, make it look like a button
• if you want someone to read something, make it a text link (not a graphic; see banner blindness
• if it’s a link, underline it; if it’s not, don’t underline
• when linking to PDFs, spreadsheets and other files, put the filetype and the size of the file in the link text (big pdf file (PDF - 1.7MB)
• avoid uploading/linking files that are more than, say, 4MB in size (see Attack of the Giant PDF)
• don’t use “What’s New” (it gets old fast)
• review your traffic stats to see what how people are moving through your site and which sections of your site are generating the most traffic

Accessibility

• provide “alt text” for all images on your Web pages
• use relative sizing for fonts (%, rather than pixels)
• ideally, use CSS to layout your site (less code, easier for assistive devices to interpret properly)
• in forms - remember to use labels and associate labels with the proper form field - learn more
• don’t use color as the only way to represent information (as in: red = “bad”; red=”required”)

Resources

• Watchfire’s Webexact accessibility checker - great for spot-checking your work
• Web developer Toolbar for Firefox - a ton of useful tools for accessibility/usability built right into the browser
• World Wide Web Consortium’s Web Accessibility Initiative - the standards for accessible Web site design, from the folks who brought you HTML
• Section 508 - federal standards for software accessibility
• Sim Daltonism - tool for viewing Web pages as a colorblind person might see them
• W3C Markup validation service - essential tool for making sure your Web pages are coded properly
• Dreamweaver - easy to use Web editor; the latest version has excellent support for CSS
• Coda - great little Web editor; helps you work faster. For advanced users comfortable hand-coding (Mac only)
• Accessible Photo Gallery - this gallery meets the criteria for accessible display of photos, uses progressive enhancement to meet needs of viewers
• CSS1 reference guide and CSS2 reference guide - from CSS guru Eric Meyer

Books

• Don’t Make Me Think (Steve Krug) - easy read; reveals how people really interact w/Web pages, and how you can take advantage in your design
• Bulletproof Web Design (Dan Cederholm) - shows how you can use CSS to tackle common design challenges
• Designing with Web Standards (Jeffrey Zeldman) - Zeldman explains why Web standard design techniques are the way to go

Catching up on my required reading, I came across another useful post from Jeffrey Zeldman’s blog (as I often do) on tools to help designers predict how people with color-blindness will see their designs.

• Sim Daltonism
• Colorblind Web Page Filter

Details on each @ Zeldman’s site.

Adding to delicious….