Using HTML lists

HTML lists are simple but extremely useful. Like HTML headings, they help give semantic meaning to information on a web page. Coded correctly, lists also give screen reader users important insights into the nature of the content they’re exploring.

There are three types of HTML lists to choose from: Ordered, unordered and definition. Each one should be used in slightly different circumstances.

Ordered lists

Ordered lists should be used when the items grouped together have a logical sequence. The list may represent a set of directions or other instructions for example. Instead of a bullet point, each list item is prefaced with a number.

Ordered list code

<ol>
<li>Turn left out of the car park onto Maple avenue ;</li>
<li>Take the second right onto Beech lane ;</li>
<li>…</li>
</ol>

Ordered list example

  1. Turn left out of the car park onto Maple avenue;
  2. Take the second right onto Beech lane;

Unordered lists

Unordered lists should be used when the items grouped together have some kind of relationship, but their order doesn’t matter. The names of people in a team, or the navigation block of a website for example. Items in an unordered list are prefaced with a conventional bullet point.

Unordered list code

<ul>
<li>Ben Foden ;</li>
<li>Delon Armitage;</li>
<li>Chris Ashton;</li>
<li>Ugo Monye;</li>
<li>…</li>
</ul>

Unordered list example

  • Ben Foden;
  • Delon Armitage;
  • Chris Ashton;
  • Ugo Monye;

Definition lists

A definition list should be used when the list contains a group of terms, along with their descriptions or associated information. A list of dictionary terms or a set of roles within a team for example. List items in a definition list don’t have bullets, but there are two elements to each list item.

Definition list code

<dl>
<DT>Full backs</dt>
<dd>Ben Foden, Delon Armitage;</dd>
<dt>Wings</dt>
<dd>Chris Ashton, Ugo Monye, Matt Banahan, Mark Cueto;</dd>
<DT>Centre</dt>
<dd…</dd>
</dl>

Definition list example

Full backs
Ben Foden, Delon Armitage;
Wings
Chris Ashton, Ugo Monye, Matt Banahan, Mark Cueto;
Centre

Using lists (and choosing the right type of list) makes sense. From a practical point of view, it’s easier to use an ordered list than it is to faff around trying to arrange things into the correct numbered sequence for example.

From an accessibility point of view, lists accomplish two things. They group things together visually, making it clear there is a relationship of some kind between all the items. This is good for everyone of course, but it’s a particularly useful visual cue for people with certain reading or comprehension difficulties.

Lists also help screen reader users understand what kind of information they’re dealing with. When a screen reader encounters either an ordered or unordered list, it will announce to the user that there is a list of X items on the page. When it encounters a definition list, the type of list is also announced. As well as enabling a blind person to build a mental map of the information, lists may also mean that there are additional screen reader shortcuts that can be used to navigate through the content.

Screen readers such as NVDA, Jaws and Window Eyes all make use of navigation shortcut keys for web browsing. Jaws and NVDA users can move between lists using the l/shift l commands. Window Eyes, perhaps somewhat less intuitively, assigns s/shift s to the same task. All three enable movement between list items with the i/shift i shortcuts.

Styling lists

Despite the fact that lists are extremely versatile, there may be times when the bullet points get in the way. Using an unordered list for the navigation block of a website is the right idea, but the bullet points are usually a hindrance.

Fortunately this can be resolved with a little CSS. It’s possible to remove the bullet points entirely from an unordered list:

Ul {list-style-type: none;}

This leaves the HTML code in tact, but makes the list less obvious visually. It’s a good solution for navigation lists, but choose carefully when coding lists within the content area. The visual grouping of lists is often a useful visual cue as well.

It’s also possible to change the bullet style of ordered and unordered lists. Depending on the design of the website and/or the purpose of the list, different bullet styles can be a useful touch.

Ul {list-style-type: square;}

Ul {list-style-type: circle;}

Ol {list-style-type: lower-roman;}

Ol {list-style-type: upper-alpha;}

Add a comment

Fields marked with an asterisk (*) are mandatory.