Accessibility benefits of "standards-based design" and "structural markup"

Andrew Stevens
A preview of L595: Workshop for Librarians and Information Professionals: Web Accessibility

Over the past few years, much has been said about standards-based web design and structural markup. Most of the discussions have focused on how these two web design ideas can help ease site maintenance, speed development, reduce page size, and reduce the need to develop separate pages for different browsers. However, following web standards and employing structural markup can also yield great accessibility improvements.

The following tutorial will examine and provide examples of these benefits.

What is "standards-based design" and what is "structural markup"

Standards-based web design

Simply put, standards-based web design is a design philosophy that encourages the use of markup that adheres to established web standards (valid HTML, CSS, etc.) instead of using proprietary, browser specific markup such as <spacer> and <marquee>.

The rationale for this approach is that web standards are much more stable than quirky, browser-specific, non-standards markup, and, thus, standards-based design, which doesn't rely of a vendor to continue to support quirky, non-standard features, will allow for the construction of "forward compatible" sites, which will continue to work in future browsers and access devices, including those that haven't been built. Additionally standards-compliant pages reduce the amount of effort required to separate the page's structure from its visual formatting, which makes compliance to common web accessibility standards much easier.

Structural markup

Structural or "semantic" markup is markup that makes use structural HTML elements such as lists (<ul>, <ol>, <dl>) and headers (<h1>, <h2>, etc.). Moreover, in order to be truly beneficial these semantic/structural elements much be used properly by conveying the structure of pages, as opposed to being used solely for formatting purposes.

For example, the following example makes proper use of structural HTML elements:

<h1>Cool quotes</h1>
<h2>Web design quotes</h2>
<ul>
	<li><cite>Zeldman</cite>
	<blockquote cite="http://www.digital-web.com/articles/999_of_websites_are_obsolete/">
	<p>On the Web, the only constant is change.</p></blockquote>
	</li>
	<li><cite>Dave Shea</cite>
	<blockquote cite="http://www.mezzoblue.com/archives/2003/08/26/semantics_an/">
	<p>You've made the transition to <abbr title="Extensible HyperText Markup Language">
	XHTML</abbr>? Great! How's your separation of content and presentation coming
	along?</p></blockquote></li>
</ul>

The preceding HTML properly uses the header elements (<h1> and <h2>) to divide the page's content into sections. It uses an HTML list for the list of quotes, and the <cite> and <blockquote> elements are used to markup the cited resource and cited quote respectively. Finally, Shea's quote employ's the <abbr> element to denote an abbreviation. For an interesting read about the <abbr> and <acronym> elements and their correct usage check out the excellent article, HTML is not an acronym..., in the further reading section.

Compare this to the following example:

<p><strong>Cars I like</strong></p>
<p>Old</p>
<blockquote>
1970 Datsun 240Z<br>
1972 Triumph TR6
</blockquote>
<p>New</p>
<blockquote>
Mazda 3<br>
Mini Cooper
</blockquote>

This is a fine example of structural markup gone bad. The <em>and <strong> elements are not used, as the W3C recommends, to indicate emphasized and strongly emphasized pieces of text, but instead to create the visual formatting effect of a headers. Also, the <blockquote> element is used here solely to indent text, as opposed to being used to contain a quote.

CSS's relation to structural markup

Instead of misusing structural HTML elements to create visual formatting effects, the W3C recommends separating visual formatting from page structure by using CSS to style your pages. While, CSS is certainly a powerful tool for controlling page layout and formatting, its use alone doesn't guarantee that you pages will be structurally correct. The following two examples of CSS-styled pages illustrate this point.

First, look at the bit of HTML below.

<div id="lorum">
<ul id="ipsum">
	<li><a href="Lorem.html" title="Lorem">Lorem</a></li>
	<li><a href="ipsum.html" title="ipsum">ipsum</a></li>
	<li><a href="dolor.html" title="dolor">dolor</a></li>
	<li><a href="sit.html" title="sit">sit</a></li>
</ul>
</div>

<div id="dolor">
<h1>Consectetuer adipiscing elit</h1>
<h2>Cras eros</h2>
<p>Curabitur faucibus ante quis wisi.</p>
<h2>Amet ipso facto</h2>
<h3>Integer bibendum</h3>
</div>

While the page's text is composed entirely of nonsense, but examining the markup can give you a good idea of the page's structure and how the elements relate to each other. First there is a division containing a list of links. Next there is a group of headers that break down the page into sections and provide a title for each of these sections.

Take a look at the styled page. Granted, the page contains some fancy formatting, but you still should have had a sense of the general structure of the page before viewing.

Now look at this page.

They look similar, no? However, the markup for this page is quite different from the first.

<div class="n">
<span class="b"><a href="1.html">Lorem</a></span>
<span class="b"><a href="2.html">ipsum</a></span>
<span class="b"><a href="3.html">dolor</a></span>
<span class="b"><a href="4.html">sit</a></span>
</div>

<div class="a">
<div class="c">Consectetuer adipiscing elit</div>
<div class="d">Cras eros</div>
<div class="e">Curabitur faucibus ante quis wisi.</div>
<div class="d">Dolor sit</div>
<div class="f">Amet ipso facto</div>
<div class="f">Integer bibendum</div>
</div>

Looking at the markup for this page provides fewer clues about this page's structure than the prior example did.

How "standards-based design" and "structural markup" aid accessibility.

So how do standards-compliant, structural pages help improve accessibility?

For one, checkpoint (d) of Section 508's guidelines for Web-based intranet and internet information and applications requires that "documents shall be organized so they are readable without requiring an associated style sheet."

Looking at unstyled versions of the two preceding example files helps illustrate how pages that are structurally correct are much easier to read without an associated style sheet.

Unstyled pages: