Simple Web site usability and accessibility tips for librarians (and everybody else)
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
