WWW2007: Usability and SEO

I attended a half-day session at the International Worldwide Web 2007 Conference on usability.

After learning a lot about Search Engine Optimization (SEO) and usability, I’ve come to believe that virtually all efforts to make a site more usable for the disabled or more friendly for search engines, will also make a site better for the average user.

The session on usability presented a list of 5 major usability problems:

1. Unclear and confusing page layout
2. Confusing and disorienting navigation mechanisms
3. Inappropriate use of colors and poor contrast between content and background.
4. Graphics and text size too small.
5. Complicated language or terminology.

They then listed 15 issues that account for approximately 80% of the usability problems on Web sites. From that list, I’ve compiled the following list I intend to apply to Church sites:

Priority 1 Items
1. Text equivalents.

• Provide a text equivalent for every non-text element. Images should have an image list, a toggle image/Alt, or Show Images. Visual navigation should have a text equivalent.
• Use ALT tags on all images. For decorative images (spacers, etc.), use ALT= “” to facilitate screen readers, such as JAWS.
• For dynamic sites, ensure that when the page changes, the text equivalents also change. [Test by toggling Javascript and ActiveX on and off.]

2. Color.

• Ensure that all information conveyed with color is also available without color (for example, from context or markup, grayscale). [Test by using the Vischeck Color Blindness Simulator.]
• Ensure sufficient contrast between background and foreground and text. This accounts for 37% of the variance; in contrast, type font and size account for only 3% of the variance. For example, don’t just mark hyperlinks with color; also use underline.

3. Language.

• Mark changes in document language with language attributes. This helps JAWS readers in reading the languages.

4. Layout.

• Use stylesheets. Use HTML header tags (h1, h2, h3, etc.).
• Mark up lists properly—not with asterisks or dashes.
• Present documents so they may be read without stylesheets or with alternate stylesheets. [Test by disabling the CSS or toggling to another CSS to see if the document is still readable.]
• Use relative rather than absolute units in markup language attribute values and stylesheet property values. (For example, not text 12 pt, but “normal” or “larger.”) [Test by resizing to 640x480 and 800x600. Test with Juicy Studio Tools CSS Accessibility Analyser.]

5. Writing.

• Use the clearest and simplest language appropriate for the site’s content.

6. Tables.

• When using tables for layout, don’t use any structural markup.
• For data tables, identify the row and column headers.

Priority 2-3 Items

7. Avoid movement on pages, since readers can’t detect it.

8. Since readers allow users to turn off spawned windows, don’t use pop-up windows or change the current window without informing the user.

Testing

• Don’t test your sites with average users. Test with disabled users, and if they can use it, the average user will as well. This will uncover all kinds of problems (site design, navigation, colors, contrast, complicated terminology, etc.) that will be devastating for disabled users, but also will be distracting or annoying for average users. Fixing these problems will create a great site for disabled users and an amazing site for average users.
• Test your site using screen readers, such as JAWS. It may point out problems for people with disabilities, but will also point out structures that seem illogical for average users. Be sure you use it like users will so you don’t get false negative results.
• For IE: Use the AIS toolbar.
• For FireFox: Use the Web Developer Toolbar and extensions.
• For Opera: Use the Web Accessibility Toolbar and developer tools.
• There is little support for automated usability testing for Safari.

Readers

The new browser CSurf (aka HearSay) is a more effective browser that identifies and reads only the relevant words on the screen.

Share on Facebook