Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Usability

Web Design Reference Guide

Hosted by

Toggle Open Guide Table of ContentsGuide Contents

Close Table of ContentsGuide Contents

Close Table of Contents

Designing Accessible Text—Part 1: Structure

Last updated Oct 17, 2003.

Done right, web text has layers of meaning that are not visible on the page. With its roots in text encoding and Standard Generalized Markup Language (SGML), Hypertext Markup Language (HTML) offers designers a basic toolset of structural tags for use in categorizing document elements. We use these tags to assign significance to particular words and phrases, including headings, lists, and tables. Web pages with this functional layer are more than screen deep—they can be read and interpreted by users who never see the rendered screen. For example, we commonly differentiate page and section headings by using spacing and typographic emphasis (such as variations in weight, size, color, and typeface)—but this essential information is accessible only to users viewing the page. When headings are differentiated in the page code using heading tags, non-visual users can also gain access to the information hierarchy of the page.

Heading tags are just one of the tools we can use to describe document structure. Read on for more arguments in favor of structural markup, and to learn how to add meaning to your web text.

Why Use Structural Markup?

On a printed document, when text is displayed in italics, it’s up to the viewer to determine whether italics are used to mark a defined term, foreign word or phrase, or citation, or are simply for emphasis. With structural markup, the designer can explicitly code function by marking the text; for example, using <cite> for citations or <em> for emphasis.

Take the title of this article. If we include it within this paragraph, the editor will format the article title in italics: Designing Accessible Text. When we tag the title using the <i> tag to make the title display in italics (<i>Designing Accessible Text</i>), the viewer must determine the rationale for the italics. In addition, software cannot make use of the tag because <i> means italics—nothing more.

On the other hand, when we use the <cite> tag to mark the article title (<cite>Designing Accessible Text</cite>), software can read the page and render the text as italic in order to convey its function to visual users. In addition, even non-visual users—including software—will be able to identify the phrase as a citation. In short, with structural markup, users don’t have to view a page in order to decode its structure; therefore, tools such as search engine software can read and interpret web documents better when structural markup is present.

For accessibility, structural markup is important because software can use structure to perform functions for the user and provide better access to page content. For example, software that reads web pages, such as voicing browsers and screen reader software, can audibly differentiate headings from other text so that the information structure of the page is communicated to non-visual users. In addition, software can provide optional views such as heading lists, which display a list of headings; or heading reading mode, which reads only headings, giving non-visual users a means to quickly skim a document (see Figure 1).

Figure 1

Figure 1 Heading list from JAWS screen reader software.

In the past, designers avoided using structural markup because it provided little control over visual display. Browsers supply default formatting for structural elements, and it’s not always pretty (see Example 1 and Figure 2).

Figure 2

Figure 2 Structural markup with default browser formatting.

Now that CSS is well supported, designers can use CSS to control the display of structural elements. Indeed, CSS provides more options for styling than old-style presentation markup did. In the next section, we’ll discuss the details more fully, but suffice it to say that the old argument against structural markup is no longer valid—the ugly duckling has grown into a swan.

How to Design Structured Text

We’re accustomed to working with tools that provide handy buttons for setting the physical properties of text: bold, italic, underline, sizing and font options. Designing structured text requires a different approach. Instead of making decisions about how text elements look, we need to make decisions about their function—their relationship with other elements on the page.

To see the difference between these approaches to web markup, let’s look again at our scones recipe. Listing 1 is the recipe marked up using presentation markup to format the headings and the ingredients list (see Example 2 and Figure 3):

Listing 1 Presentation markup for the recipe.

<font size="4" face="Verdana"><b>Scones</b></font><br><br>

<font size="3" face="Verdana"><b>Ingredients</b></font><br><br>

<blockquote>
• 2 c flour<br>

• 3 tbsp sugar<br>
• 1 tbsp baking powder<br>
• 1/4 tsp nutmeg<br>
• 1/2 tsp salt<br>
• 1 stick butter<br>

• 1 egg<br>
• 3/4 c milk<br>
• 1 c fruit<br><br>
</blockquote>

<font size="3" face="Verdana"><b>Preparation</b></font><br><br>

<font size="2" face="Verdana"><b><i>Mix</i></b></font><br>
<font size="3" face="Georgia">Combine dry ingredients in a large bowl. Cut butter into small pieces and mix into the dry ingredients (use your fingertips) until the mixture resembles fine crumbs. Beat egg with fork in a liquid measuring cup. Reserve about 1 tsp of beaten egg in a small bowl. Add milk to measuring cup until you have 3/4 cup of liquid; beat milk and egg with a fork to mix. Add fruit to the dry ingredients and mix; then add milk/egg mixture. Mix with a fork until combined.</font><br><br>

<font size="2" face="Verdana"><b><i>Assemble</i></b></font><br>
<font size="3" face="Georgia">Form the dough into a ball. Using your hands, flatten the dough into a circle between 1-2 inches thick. Cut the circle into 8 wedges and place the wedges 1 inch apart on a cookie sheet. Pour 1 tbsp milk into the reserved egg and mix with a fork. Use a brush to spread the mixture on top of the scone wedges.</font><br><br>

<font size="2" face="Verdana"><b><i>Bake</i></b></font><br>
<font size="3" face="Georgia">Bake for 12-15 minutes at 450.</font>

Figure 3

Figure 3 Recipe using presentation markup.

The <b>, <i>, and <font> tags mark the headings; <blockquote> indents the ingredients list; and the • entity displays bullets. The elements are differentiated visually, but the structure of the document is not available to non-visual users. Software can do no more than read the text on the page.

Now take a look at the recipe in Listing 2. It’s marked up using structural markup, with headings denoting the information structure, a list of ingredients, and descriptive paragraphs. In this example, the visual properties are defined using CSS (see Example 3 and Figure 4).

Listing 2 Structural markup and CSS for the recipe.

<h1>Scones</h1>

<h2>Ingredients</h2>

<ul>
<li>2 c flour</li>
<li>3 tbsp sugar</li>
<li>1 tbsp baking powder</li>
<li>1/4 tsp nutmeg</li>

<li>1/2 tsp salt</li>
<li>1 stick butter</li>
<li>1 egg</li>
<li>3/4 c milk</li>
<li>1 c fruit</li>

</ul>

<h2>Preparation</h2>

<h3>Prepare</h3>
<p>Combine dry ingredients in a large bowl. Cut butter into small pieces and mix into the dry ingredients (use your fingertips) until the mixture resembles fine crumbs. Beat egg with fork in a liquid measuring cup. Reserve about 1 tsp of beaten egg in a small bowl. Add milk to measuring cup until you have 3/4 cup of liquid; beat milk and egg with a fork to mix. Add fruit to the dry ingredients and mix; then add milk/egg mixture. Mix with a fork until combined.</p>

<h3>Assemble</h3>
<p>Form the dough into a ball. Using your hands, flatten the dough into a circle between 1-2 inches thick. Cut the circle into 8 wedges and place the wedges 1 inch apart on a cookie sheet. Pour 1 tbsp milk into the reserved egg and mix with a fork. Use a brush to spread the mixture on top of the scone wedges.</p>

<h3>Bake</h3>
<p>Bake for 12-15 minutes at 450.</p>
body { font: 100%/1.3em Georgia, serif; }
h1, h2, h3 { font-family: Verdana, sans-serif; }
h1 { font-size: 1.4em; text-transform: uppercase; }
h2 { font-size: 1em; }
h3 { font-size: .9em; font-style: italic; margin-bottom: 0; }
p, ul { margin-top: 0; }

Figure 1

Figure 4 Recipe using structural markup and CSS.

The code is much cleaner and the style attributes produce the same visual formatting as with presentation markup. Best of all, the structure of the document is clearly defined in the code and is therefore available to non-visual users.

Resources

So now that you’re ready to turn your back on presentation markup and code structure into your web pages, Table 1 shows some common (and not so common) tags that you can use to mark up your text.

Table 1 Structural tags for marking up text.

Element

Usage

<h1>, <h2>, <h3>, <h4>, <h5>, <h6>

Headings

<p>

Paragraphs

<blockquote>

Quoted text

<ul>, <ol>

Unordered and ordered lists

<table>, <th>, <tr>, <td>

Tabular information

<em>, <strong>

Emphasized words and phrases

<cite>

Citations (book titles, for example)

<abbr>, <acronym>

Abbreviations and acronyms

<code>

Computer code

<dfn>

Defined term

In addition, take a look at these resources: