Do Accessible Web Sites Have to be Boring?
(Hint: It's up to you)

All too often, designers think that accessibility means boring. That's usually because they think that accessible Web sites have to be all text or mostly text. If that were the case, then sure, accessible Web sites would be boring. Fortunately for all of us, graphics are perfectly acceptable in accessible Web design. In fact, they're encouraged. See the article "Visual vs. Cognitive Disabilities" for a discussion on the important role of graphics in accessible Web design.

In brief, graphics enhance accessibility by providing visual cues as to the meaning and organization of the content. These visual cues help people to understand the content better, thus increasing the accessibility of the content. Of course, people who are blind aren't able to view the visible aspects of graphics, but that's not a problem because developers can provide alternative text ("alt" text) that allows blind users to access the content of graphics with their screen reader software. The end result is a Web site that looks great, is easier to understand, and which is still accessible to people who can't see the visual elements.

Examples of "Exciting" Designs

After claiming that accessible Web sites don't have to be boring, it's only natural that readers will want to see examples of sites that are both exciting and accessible. The hardest part of fulfilling the desire of readers who want exciting examples is coming to an agreement as to what constitutes "exciting." Readers may not find all of the examples below to be equally exciting, but they at least convey the message that there are many possibilities.

WebAIM

Perhaps it is poor form to suggest that the site that I created is exciting, and to list it first among the examples of "exciting" designs, but it is the site that I'm most familiar with, so I'm going to use it as an example anyway. (I have that right, don't I?) Whether I succeeded or not, I attempted to make the WebAIM site look interesting to viewers. Many of the elements on the page have drop shadows to give a three-dimensional effect, plus there are unique graphics for each of the main articles. The white, gray or light tan areas with burgundy text headings and dark blue illustrations present a consistent color scheme across the pages on the site. At the very least, the page is designed with accessibility in mind, and efforts were made to increase its visual appeal. The page was created using only CSS (Cascading Style Sheet) layout—no tables.

Here is what the page would have looked like if I had left it without any style at all:

With the addition of the graphics, the page becomes more accessible overall, not less accessible.

CSS Zen Garden

The next few examples come from a site called CSS Zen Garden - external link. This site was created to showcase the possibilities of using CSS (Cascading Style Sheets) to their maximum potential. Several Web designers have contributed their own designs. What makes this site so interesting is that all of the designs are of the same page, yet they look radically different. Style sheets allow designers to completely separate the content of the page from the presentational style. This allows for a great deal of artistic freedom and expression.

Though the purpose of CSS Zen garden was not to create a showcase of accessible designs, the designs are quite accessible, though some designs were definitely created with artistic merit as the first priority, rather than accessibility. The underlying HTML will be completely accessible to screen readers, though visual users may find the more avant garde designs to be a bit visually confusing.

Here is a screen shot of the basic (boring) HTML page that all of the CSS Zen Garden pages are based upon:

 

Tranquille

Here is the same page after applying a style sheet that the author, Dave Shea, has called "tranquille" - external link:

 

Deep Thoughts

Here is the same page, with a different CSS style applied to it. This one, created by Jason Estes, is called "deep thoughts" - external link:

 

Prêt-à-Porter

This is the last example from CSS Zen Garden that I will use. It is called "prêt-à-porter" - external link, by Minz Meyer. The designer created a page that is short vertically, but extremely wide. The screen shot only captures about half of this page's width. From an accessibility standpoint, horizontal scrolling is highly discouraged because it produces difficulties for people with low vision who must enlarge the page, allowing only a small section of the page to be viewed at a time. However, from an artistic standpoint, it can create some interesting effects:

Note: To make this page more accessible, the designer would simply need to create a vertically-oriented version of this same concept, rather than extending the columns out to the right.

MeyerWeb Complex Spiral Demo

Another set of fun designs can be found at meyerweb.com - external link, a site maintained by CSS expert Eric Meyer. This article will include only one of his designs, but several others are worth looking at as well. The screen shot below doesn't do justice to the design. The design's ingenuity is in the way that the left hand menu items move with the blue content area when scrolling down the page, while the image of the shell stays in the same place. Not only that, but the background color behind the left menu seems semi-transparent even while moving across the shell.

Note: This sliding effect, with the background staying in one place and the foreground objects moving over top of it, will only be available in more advanced CSS-supporting browsers such as Netscape 7 (based on Mozilla), Opera 7, and Safari (based on Konqueror). Internet Explorer is still behind the times as far as CSS support is concerned.

Some readers may wonder if the page is still accessible in browsers with poor CSS support. The answer is yes. It is accessible. The only downside is that users won't be able to see some of the creative artistic effects.

Here is Eric Meyer's complex spiral demo - external link:

Conclusion

Are accessible Web pages boring? Well, yes, some of them are, but we can't blame that on the fact that they're accessible. Maybe it would be more appropriate to ask if Web designers are boring. That's where the problem lies. Boring Web designers create boring Web sites. Exciting Web designers create exciting Web sites. Both types of designers can make their content accessible to people with disabilities.

Now the question is whether your accessible Web site will be boring or exciting.

It's up to you.