Designed-in accessibility

Modern web design is sometimes characterized as "separation of content from presentation." While this is true to some extent, it doesn't tell the whole story about accessible design. In fact, there are four levels of design, each of which should be separately maintainable from the others yet all of which must work together:

Content: this is the substance of what the web site owner needs to communicate to site visitors. Much content is simply text material, but increasingly it can be visual (graphics, photographs, video) or auditory (music, podcasts, video sound). In any large-scale site, content is provided by a database or dedicated content management system.
Structure: on the web, content is given structure by XHTML markup. Structure means organizing the content in a logical reading order with headings, paragraphs, lists, and so on. Formally, this is called semantic markup. A properly-structured XHTML page that conforms to the W3C standard automatically removes many accessibility barriers, with no additional effort or cost.
Presentation: this term generally means visual design, which is done using W3C standard-compliant cascading style sheets (CSS), with none of the styling embedded in the XHTML layer. Proper use of style makes a page visually appealing but leaves it accessible when styles aren't available. Styles sheets may also be used to control the appearance of printed output and even voice presentation, although the latter is poorly supported so far in user agents.
Behavior: originally marketed with the buzz-word "DHTML", this now can mean not only JavaScript but any dynamic aspects of a web page, such as AJAX, ARIA, RSS feeds, Flash, applets, and more. The challenge is to use these to enhance the page experience for visitors who have them available, while providing equally effective access to content for those who don't.

Retrofitting accessible ramps to a building is expensive, time-consuming, and usually ugly. So is retrofitting an inaccessibly-designed web site. Architect-designed ramps come with the building, look attractive, and benefit people with wheelchairs, baby strollers, airline luggage, delivery carts, and skateboards. Designed-in accessibility adds no cost to a web page, simplifies maintenance, and benefits all visitors.

An example—the "University of Lompoc"

This tutorial illustrates how a home page might be developed for a fictitious, but typical, university. All of the work can be done using any popular development environment, or even a simple text editor. For clarity, each design level is shown here as a separate step; however, experienced developers could certainly combine these into a more unified workflow.

Content

View the text content for the U.L. page

Content will be provided by site owners; for a home page, most of it will probably come from the campus public relations department.
Use realistic content rather than simulated ("Lorem ipsum") text.
Content is frequently a political decision; get approval from the appropriate senior executive before proceeding.
Text-only content, as shown here, is not accessible to anyone. There is no organization, no heirarchy, no way to identify what is important, and no way to navigate around the page—not even visually.

Structure

View the structured U.L. page

Markup is compliant with the W3C XHTML 1.0 Strict standard.
Content is placed in logical reading order. Navigation comes first because that's where readers expect to find it. Frequently-changing information comes next.
Headings provide organization and the ability to navigate quickly from topic to topic—visually or with a voice reader or other assistive technology. Headings also eliminate the need for a "skip links" link.
The <ul> or <ol> plus <li> elements organize content that is logically thought of in list form. Lists can also be navigated easily by assistive technology.
Choice of which markup to use is based on meaning of the content and the designer's professional experience and judgement.
Links are included even for yet-to-be-developed pages; here they all point to a temporary response. Unique, descriptive wording for each link text is essential to accessiblity.
The search box is properly labeled in XHTML for use by assistive technology as well as for visual readers; it also points to a temporary response page.
The structured page is accessible to everyone—this is what it should look like with all styles turned off.

Presentation, part 1: screen layout

View the U.L. page screen layout

<div> elements group content that is related visually; they are positioned with the style sheet, as shown here by dotted borders. Although <div> and <span> are part of the HTML code, they really form a bridge between the document semantics and the CSS presentation layer.
For this informational page, elements appear where readers expect them to. Another type of page might use a more inventive or unconventional layout.
The invisible "cleaner" div keeps text from overlapping vertically when the font is enlarged—thanks to Petr Stanicek, www.pixy.cz
I've also done a bit of work on the typography, using a better-looking font family, modifying the appearance of the "Resources for" heading, and correcting the paragraph spacing and indentation in the "About U.L" block of text.
With the style sheet turned off, this page is identical to the previous one.

Presentation, part 2: images

View the U.L. page with images

Images for the news articles have simple alt-text, since the article itself serves as a long description.
Two images are contained within header elements, with the header text as the alt-text—perhaps not the slickest way to do this, but it works with voice readers and with any combination of images and styles turned on or off.
There is no reason to embed any link text in an image, especially not for visual-only enhancements like hover effects that don't affect the content (done with the style sheet).
Contrast between all text and background colors is checked for normal vision, grey scale, and various forms of color-blindness.
As with the layout, an experienced graphic designer could add visual appeal to the page without affecting the content.

Behavior, part 1: combo box

View/test the combo box

Note: when you turn JavaScript on or off for testing, also reload the page.
The new "External links" drop-down list and associated "Go" button work with or without JavaScript, with or without a mouse. It does not need a <noscript> element to be compliant with accessibility standards, regardless of what an "accessibility checker" program might say.
The code is from Christian Heilman's online unobtrusive JavaScript tutorial.
Key points:
- Never use onchange to trigger the combox box action: a keyboard user won't get past the first item!
- If JavaScript is present, the form's onsubmit function reloads the current window with the selected page.
- If JavaScript is not present, the form's action calls a simple server-side script to send the selected page.
- Links to the JavaScript and PHP code for this page are at the top of the page
- The new <h2> contains the <label> for the <select> element.
Yes, you can try it—the links go to other areas of my own site.

Behavior part 2: expanding/collapsing menus

View the U.L. page with dynamic menus

This is the technique that is used by the W3C on its own site, for example the Activities page.
The code was written by Richard Ishida, and is thoroughly documented in his code notes blog page. Notice the contributions by Patrick Lauke and Derek Featherstone—all three are key leaders in the W3C. Actually implementing the code here according to the blog page instructions took less than five minutes.
As with the accessible combo box, this works with or without JavaScript, with or without a mouse, and does not need a <noscript> element. If JavaScript isn't available, or styles are turned off, the page simply has all of the content and functionality that it did before this addition.
The only criticism that I've read about this method is that if the page loads very slowly, and JavaScript is available, there will be a sudden visual dislocation as the collapsing sections are removed from view. You can minimize the problem by making these sections as small as possible.

Copyright © 2007, by Tom Jewett, webdesign@tomjewett.com. Links to this site are welcome and encouraged. Individual copies may be printed for non-commercial classroom or personal use; however, this material may not be reposted to other web sites or newsgroups, or included in any printed or electronic publication, whether modified or not, without specific permission from the author.

The information contained in this site and associated services is offered in good faith and represents only the author's current understanding of best practices in accessible web development. This information does not constitute legal advice regarding compliance with laws, regulations, or policies of any jurisdiction or organization, nor does it express or imply any warranty regarding such compliance or suitability for any specific application.

Product and company names listed are trademarks or registered trademarks of their respective owners. Any product listing is simply a personal preference of the author and does not imply endorsement over similar products that may not be listed.