Design and Accessibility: Part VII

Usability and Accessibility in Action and Example

In the previous design and accessibility article, Linda explained the use of visible or invisible skip links and access keys as tools to help viewers navigate a Website. The use of these tools, among others, helps a Web designer or developer to create usable and accessible Websites. In this article Linda takes readers back to the Montrose Citizens for Responsible Growth site to illustrate how she’s changed the site’s code and structure to date so that the site is more navigable for all users. This lesson is based on the previous six articles in this series, where usability, accessibility, global structure, and the separation of content, structure, and presentation are addressed. The Montrose site is based on a WordPress blog, but all blog users and Website developers can follow some code examples in this article to make sites more accessible.

$2.89
- OR -

Overview

First Step: Validate Pages to Discover Errors

From the beginning of this series the focus has been on the Montrose Citizens for Responsible Growth site and how I wanted to make this site as accessible and usable as possible for the greatest number of viewers. The site was created for a non-profit organization in Colorado, and my intent was to discover all current accessibility and usability issues and to integrate their principles into the Montrose site design. Here’s a screen shot of the original site:

Montrose site IE 6.0 at 1280x1024 resolution, Windows XP

In the first design and accessibility article, I illustrated how I discovered the errors within the Montrose Citizens for Responsible Growth when I took the home page through W3C’s (World Wide Web Consortium) HTML (HyperText Markup Language) validation process and CSS (Cascading Style Sheet) validation process. While the site, for all intents and purposes, appeared “normal” to the average user, the validation processes showed that a number of errors were contained within both the XHTML (eXtensible HyperText Markup Language) and within the accompanying CSS document. While I could immediately fix the “errors” and eliminate some “warnings” discovered through the validation processes, I realized that deeper problems existed within this site’s structure.

Linda Goin

Linda GoinLinda Goin carries an A.A. in graphic design, a B.F.A. in visual communications with a minor in business and marketing and an M.A. in American History with a minor in the Reformation. While the latter degree doesn't seem to fit with the first two educational experiences, Linda used her 25-year design expertise on archaeological digs and in the study of material culture. Now she uses her education and experiences in social media experiments.

Accolades for her work include fifteen first-place Colorado Press Association awards, numerous fine art and graphic design awards, and interviews about content development with The Wall St. Journal, Chicago Tribune, Psychology Today, and L.A. Times.

See All Postings From Linda Goin >>

Reviews

Be the first to write a review

You must me logged in to write a review.