Content Markup and Organization: Headings, Lists, and Links

Discussion

Headings are one of the primary means for navigating a web page in a screen reader. All commonly used screen readers allow a user to pull up a list of headings and move between headings via simple keystrokes.

The main page content should be introduced with an H1 heading, and subordinate content sections should get H2, H3, and so on. The order of headings should always proceed by single increments: H1, H2, H3, H4, etc. Do not skip heading levels. Again, following a logical order helps both screen reader users who can surf a page by heading and heading level and also provides an unambiguous structure for users with cognitive disabilities.

In summary:

• Use the H1 heading as the main heading of your page. It should reference the content of the page.
• Use H2 for major sub-sections.
• Use H3 for sub-sub-sections and so on.
• Nest headings hierarchically. Do not skip heading levels.
• Heading text should be unique and meaningful.

Discussion

Use lists liberally. Whereas in typical non-web delivered expositional writing, stringing together concepts using commas and conjunctions is often appropriate; writing for the web should be simplified and should maximize scannability. And using lists is a key method for making web writing easily scannable and improving reader comprehension.

There are three types of lists available in HTML—ordered, unordered, and definition lists.

Ordered lists should be used when sequence is important to convey meaning. For example, when listing instructions must be followed in order. When sequence is not important, use an unordered list.

Definition lists should be used sparingly. Definition lists are two part structures. Each item has a term and a definition. An ideal application for definition lists is a glossary of terms, in which a term is introduced and a definition is provided. An event listing, where the title of the event is given, along with a description is another good use of a definition list.

Examples

Screen Shot: Using a definition list for a list of terms with definitions:

Figure BP-Content Markup-1. Click image to enlarge.

Code Example: Using a definition list for a list of terms with definitions:

<dl>
<dt>Term One</dt>
<dd>
<p>a definition in paragraph</p>
<ul>
<li>with a list</li>
<li>of items</li>
<li>in the same definition</li>
</ul>
</dd>
<dt>Term Two</dt>
<dd>
<p>and another defintion</p>
</dd>
</dl>

Discussion

Some screen readers can navigate between lists on a page, making discovering lists easier. But all major screen readers can navigate by heading. So having a heading precede a list can be very helpful for orienting a student who is using a screen reader and making a page more easily scannable (both for visual and screen reader students).

Discussion

Screen readers announce the nesting of lists. However, it becomes increasingly difficult for the screen reader user to remember his/her place within the list structure the deeper he/she goes. Additionally, for users with cognitive or reading disabilities it may decrease comprehension if a list has more than three levels of nesting.

Another minor factor is that with unordered lists, HTML has only three default bullet types: asterisk, circle, and square--enough to only represent three levels. (This can be worked around using CSS, but the basic goal should be to maximize easy comprehension, not display your mastery of cascading stylesheets.)

For ordered lists, it is also possible to use styles to affect the numbering. One can use decimals, roman numerals, or alphabetical characters in both upper and lower case, providing a visual distinction between levels of nesting. However, a screen reader will not announce the case. Screen readers also differ on how they announce the level of nesting, some only indicating that a list has ended and not the level of nesting, making orientation within a list structure more difficult.

Examples

Screen Shot: Nested lists should not go beyond 3 levels deep:

Figure BP-Content Markup-2. Click image to enlarge.

Discussion

Too often we see the div (division) element or br (break) tag used to create visual space between paragraph length blocks of text. If a chunk of writing is a paragraph, wrap it in a paragraph element.

A div can be useful for marking off a group of elements as distinct from one another for purposes of setting page display. For example, a designer might want to create a main body text column and a sidebar column. Divs are the appropriate tags to use to encapsulate the main content and sidebar areas.

Examples

Screen Shot: A short web page using DIVs, headings, and CSS to make main content and sidebar:

Figure BP-Content Markup-3. Click image to enlarge.

Code Example: A short web page using DIVs, headings, and CSS to make main content and sidebar:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>DIVs for Content Organization</title>
<style type="text/css">
#wrapper
{
margin: 0 auto;
border-left: 1px solid #000;
border-right: 1px solid #000;
}
#main
{
width: 70%;
float: left;
}
#sidebar
{
width: 30%;
float: right;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="main">
<h1>Main Content</h1>
</div>
<div id="sidebar">
<h2>Sidebar</h2>
</div>
</div>
</body>
</html>

Discussion

Though most web browsers italicize the em tag and render the strong tag in bold type, it is important to know that strong and em have semantic weight. Strong means provide very strong emphasis to the contained word or phrase. Em means provide relatively more emphasis than surrounding text. The <b> (bold) and <i> (italics) tags are purely presentational. There are instances when each sort of tag is appropriate. If I only mean to visually highlight a chunk of text, for example if I am trying to render a chunk of text and show where students make common mistakes, I might do so by using the bold tag to draw visual attention to particular areas. However, if within the flow of a paragraph, I highlight a word with importance relative to the text that surrounds it, I would use either the <em> or <strong> tag.

Discussion

By classifying the font tag as deprecated, the W3C registered formal disapproval and marked it for eventual removal from the HTML standard. Still, the font tag is used in some WYSIWYG editors. These editors tend to be geared only toward the presentation of content, and so is the font tag and both should be avoided. Modern, accessible content is styled using CSS. Though the font tag can change the color, size, and style of text, it does not make that text mean anything different. However, you will often find it used to make display text appear to be a heading. This is problematic because a heading is supposed to introduce a logical section of text. Just making text look like a heading and making text functional logically as a heading are very different things. Future proof your HTML content and avoid all deprecated markup.

Discussion

The first thing a screen reader using student hears when a page loads is the title that we see in the title bar at the top of our browser. Therefore it is essential that the title provide enough information so that the student knows from hearing it read aloud what the content of the page is and how that page fits into the rest of the course web site. An effective way of achieving this is by repeating part or all of the H1/main content heading, along with the course title and module number and title. For example, for a page whose lesson focuses on questions of Genetic Evolution, in a course surveying the History of Theories of Evolution, in the 5th module of a Biology 650 course, the following title would serve the appropriate ends: Questions of Genetic Evolution History of Theories of Evolution: Module 5 Biology 650. See also the Best Practice on page links and titles in Course Organization and Structure, which also considers how to order the parts of a title and related questions.

Discussion

Programs that read text aloud, including self-voicing screen magnification programs and various sorts of literacy software, in addition to screen readers, can read content in many languages. They all have the ability to set a default language. But when it is not possible to detect a default language or when program properties cannot be altered by the user, for instance when the program sits on a secured machine in a computer lab, text reading programs will use a document's set default language.

In an HTML document, the author can set a default language by changing or adding tags and attributes to the head of the document. Taking care to set a default language helps ensure that students reading programs provide the best fidelity in voicing the contents of web pages.

Examples

Code Example: Setting the default text-processing language for an HTML document: Use attributes in the html tag to declare a default language. Here is the beginning of an XHTML 1.0 Strict document

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

Resources

• http://www.w3.org/TR/i18n-html-tech-lang/>

Discussion

Modern screen reading programs can switch pronunciation of words seamlessly on the fly. Any time your content switches languages from the default. For example, to introduce a foreign language term or provide the original language version of chunk of translated text, indicate the language change at the level of the HTML by using the lang attribute, an attribute that can be used with almost any HTML tag. One of the most common means for changing language within the flow of a paragraph is to use the pan tag.

Examples

In these examples, we assume the document language has been set to English.

Code Example: Table translating English to Spanish words:

<table>
<tr>
<th scope="col">English</th>
<th scope="col">Spanish</th>
</tr>
<tr>
<td>man</td>
<td lang="es">el hombre</td>
</tr>
<tr>
<td>woman</td>
<td lang="es">la mujer</td>
</tr>
<tr>
<td>house</td>
<td lang="es">la casa</td>
</tr>
</table>

Code Example: Changing language inline in a paragraph:

<p>The waitress in the charming coffee shop always refered
to breakfast as <span lang="fr">le petit dejeuner</span>.
</p>

Discussion

We have all seen links to core information or that tell us to click here. Students with cognitive disabilities may be distracted by surrounding text when concentrating on link text. Blind students' screen readers can easily browse by link text alone. Thus it is crucial to author links that make sense out of context from surrounding text. When reading links in isolation it should be abundantly clear what resources they link to.

Examples

Screen Shot: Good and bad link text. The infamous “click here”:

Figure BP-Content Markup-4. Click image to enlarge.

Discussion

To help minimize confusion for screen reader users and students with cognitive disabilities who might be distracted, it is advisable to indicate that an off-site hyperlink points off site and that it will land the student in uncharted territory. A web standards-compliant and semantic way of indicating this is to include the el attribute in the link tag and give it a value of external. Depending on the screen reader verbosity settings, it may indicate that such a link is external. There is no guarantee of it, since screen readers and their configurations differ greatly. However, it is the best standards-compliant means of indicating such. For students who can see the page, a little CSS magic can help most browsers automatically render a small box and arrow/off-site link icon after the link welcome courtesy for all students, including those with disabilities.

Discussion

If I provide a link to a discussion on genetic evolution, the assumption is that it will take me to an HTML page. If it takes me to a PDF or a PowerPoint presentation, I may get disoriented as the browser launches an external application to render the new content. Therefore it is always a good idea to include in the link text itself either the name of the type of resource (PDF or PPT) or an icon with alt and title attributes that name the resource type.

Examples

Screen Shot: Using text or an image to indentify linked document type:

Figure BP-Content Markup-5. Click image to enlarge.

Code Example: Using an image to identify linked document type:

accessibility presentation (PDF)

accessibility presentation