The List Elements

The list elements (ul, ol and dl) group related items of information together so that they can be treated as a single block. There are three types of list structure –

  1. Unordered lists are simple lists usually referred to as “bulleted lists” because each item in the list can start with a graphic such as a bullet icon.
  2. Ordered lists are sequentially numbered lists of items or comments as used here.
  3. Definition Lists are more complex than the other two as they have two parts to the list item. The first part is the item title and the second part is some explanatory text.

Ordered and unordered lists

Assistive software and robots handle unordered and numbered lists in a special way. They do not expect lists to contain sentences (or phrases) that make sense when single items are taken out of the list context. Assistive software expects a list to contain a number of common items, such as the colours of a rainbow, or members of a class, parts of a washing machine or a group of links to other pages on the site. Because assistive software treats a list as a single block it can let the blind user to scroll up and down the list quickly, the software can even tell the user when they have reached the end of the list. If the list had been constructed using a series of paragraphs or soft returns the screen reader would not be able to do this.

This is an important concept to bear in mind because these tools do not expect to find paragraphs of text within a list. A paragraph is a complete entity in itself and will make sense to a reader when read out of context. A list item is part of a sequence and only makes sense when read as part of that sequence. If you need to force a new line within a list item you should use the line break
element. If you use the paragraph

element within a list, some software will assume that you have finished the list. This will destroy the meaning of the list for automated software and be confusing to blind users.

Because all the items in the list will share a common theme it is good practice to precede a list with a relevant section heading. It is possible to hide the heading from visual users using a style sheet. For example we could define a class .hidden {display:none} that would prevent browsers from showing the heading, but still enable screen readers to announce it audibly.

Screen Output

  1. Paul
  2. Mary
  3. John

Audio output

"Heading level 2 List of students in the junior class. list item one Paul, list item two Mary, list item 3 John

The xhtml code for the list shown above would read as :-

<h2 class="hidden">List of students in the Junior class</h2>
<ol>
<li> Paul</li>
<li> Mary</li>
<li> John </li>
</ol>

The CSS code for this is written as :-

#lesson .hidden {display: none;}

Because screen readers ignore the screen's style sheet they will read the list heading out aloud. Standard browsers such as Internet explorer will not display the heading "List of students.." because the style sheet has told them not to display it. Adding these little bits of (hidden) text just for blind users can make their experience of your website a whole lot better. You have already seen how we can hide the expansion of an abbreviation and in later lessons we shall look at how to provide hidden text to explain images and other "non-text" items.

Nested lists

It is possible to "nest" one list inside another to produce a sub-list. This is done by defining the new list within an existing list item element as shown below.

HTML code

<h2>Office Stuff</h2>

<ul>

<li>Paper
<ul>  <li>Notepaper</li>
<li>Letterhead</li>
<li>Photocopy</li>  </ul>
</li>
</i>Pens
<ul>  <li>Blue</li>
<li>Black</li>
<li>Red</li>   </ul>
<li>Staplers</li>
<li>Paper Clips</li>

</ul>

Screen output

Office Stuff
  • Paper:
    • Notepaper
    • Letterhead
    • Photocopy
  • Pens
    • Blue
    • Black
    • Red
  • Staplers
  • Paper Clips

Note that the originating list item becomes the heading for the nested list. Thus the Item "Paper" becomes the heading for the three types (Notepaper, Letterhead and Photocopy).

For visual users nested lists make sense because the nested part is indented further from the page margin. For blind users and text-only browsers these visual clues are not available. The result is that the screen reader tends to follow on after the last sub item so quickly that the user is not aware that the sub list has finished. The way to overcome this is to add and "end of list" phrase at the end of each nested list so that the user knows that the following item will be the next part of the main list. In the above example the solution would be to add the phrase "End of paper list" immediately after the word "Photocopy" and hide it from visual browsers using a CSS class.


<ul>
<li>Notepaper</li>
<li>Letterhead</li>
<li>Photocopy  <span class="hidden"> End of paper list</span> </li>
</ul>

Note the space () coded before the phrase itself, this is to make the screen reader take a breath before reading out the phrase.

Definition lists

Each item of a definition list has two parts, the definition heading and the definition content. A good example of a definition list would be a list of an organisation’s departments, where the definition title is the name of the department and the definition description is a summary of the department’s responsibilities. Another use would be a summary of news items as shown below.

<dl>
<dt>New help on the way for Merthyr job  seekers</dt>
<dd>Merthyr job seekers are set to benefit from a  new team of specialist employment advisors coming to the  area</dd>
<dt>New Recycling project  announced</dt>

<dd>A major new initiative is now underway to  develop state-of-the-art facilities for recycling food waste and other residual  waste in a beneficial </dd>
<dt>Counterfeit vodka found in  Merthyr Tydfil</dt>

<dd>Merthyr Tydfil County Borough Council was  notified by the Food Standards Agency that there is counterfeit vodka currently  in circulation. </dd>
</dl>

The output of the above code is shown in the following box.

New help on the way for Merthyr job seekers
Merthyr job seekers are set to benefit from a new team of specialist employment advisors coming to the area
New Recycling project announced
A major new initiative is now underway to develop state-of-the-art facilities for recycling food waste and other residual waste in a beneficial
Counterfeit vodka found in Merthyr Tydfil
Merthyr Tydfil County Borough Council was notified by the Food Standards Agency that there is counterfeit vodka currently in circulation.


The definition data text is indented as a block by default, but this can be over-ridden by the style sheet if you want. We can include images in the definition data element (dd) safely, but it is best if we do not include images in the title as these are cached by screen readers. However it is perfectly acceptable to make the title a link to a page containing more relevant information. If you provide a library of PDF documents for downloading then the title would link to the PDF file with the definition providing a short summary of the document so that visitors can make an informed choice before downloading any large documents.