Context Changes

A nasty side-effect of current print-based export processes is that changes in context are visually styled either using CSS and/or with images. When you use the CSS margin-top property to add spacing, you’re taking away from anyone who can’t see the display that a change in context has occurred. Graphics to add whitespace are no better, since they don’t typically specify an alt value and are ignored by accessible technologies. Graphics that include asterisms or similar as the alt text are slightly better, but are still a suboptimal approach in that they don’t convey any meaning except through the reading of the alt value.

There are people who would argue that context breaks represent the borders between untitled subsections within sections, but from a structural and navigational perspective it’s typically not true or wanted, so don’t be too tempted to add section elements.

HTML5 has, in fact, addressed this need for a transitioning element by changing the semantics of the hr element for this purpose:

<p>… the world swam and disappeared into darkness.</p>

<hr class="transition"/>

<p class="nonindent">When next we met …</p>

By default this tag would include a horizontal rule, but you can use CSS to turn off the effect and leave a more traditional space for visual viewing:

hr.transition {
    width: 0em;
    margin: 0.5em 0em;
}

or you could add a fleuron or other ornament:

hr.transition {
    background: url('img/fleuron.gif') no-repeat 50% 50%;
    height: 1em;
    margin: 0.5em 0em;
}

Styling the hr element ensures that the context change isn’t lost in the rush to be visually appealing.

Lists

You’d typically not expect to have to hear the advice that you should use lists for sets of related items, but rely too heavily on print tools to create your content and the result will be paragraphs made to look like list items, or single paragraphs that merge all the items together using only br tags to separate them.

If you don’t use proper list structures, readers can get stuck having to traverse the entire set of items before they can continue with the narrative flow (in the case of one paragraph per item) or having to listen to every item in full to hear the list (when br tags are used).

A list element, on the other hand, provides the ability both to move quickly from item to item and to escape the list entirely. It also allows a reading system to inform a reader how many items are in the list and which one they are at for referencing. Picture a list with tens or hundreds of items and you’ll get a sense for why this functionality is critical.

Using paragraphs for lists also leads people to resort to visual trickery with margins to emulate the deeper indentation that a nested list would have. These kinds of illusions take away from all but sighted readers that there exists a hierarchical relationship. The correct tagging allows readers to navigate the various levels with ease.

A final note is to always use the right kind of list:

• the ol element is used when the order of the items is important.

• the ul element is used when there is no significance or weak significance to the items (e.g., just because you arrange items alphabetically does not impart meaning to the order).

• the dl element is used to define terms, mark up glossaries, etc.

Lists have these semantics for good purpose, so don’t use CSS to play visual games with them.