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;
Chris Ashton, Ugo Monye, Matt Banahan, Mark Cueto;
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;}


Is your website accessible?

A large proportion of users cannot gain access to the information and services the Web provides and this represents a dichotomy. The Web was designed to provide universal access to information, however many web sites are inaccessible to people with disabilities. This paper examines web accessibility and provides simple methods for checking a site’s accessibility.

Read blog article

How to configure Jaws to optimise the UX

By understanding the ways in which Jaws can be configured, it is possible to easily tailor the Jaws environment to suit your needs. This can make the user experience both more efficient and more enjoyable.

Read blog article

When to spend your usability budget?

This article looks at the different stages where usability budget it often spent and offers advice as to which is the most effective.

Read blog article

How to configure Jaws voice settings

This is the second paper in the Nomensa Insight series. It looks at one of the most vital areas of the Jaws For Windows (JFW) screen reader software, the Voice Settings. It will also introduce one of Jaws’ most powerful features, the ability to configure Jaws to behave differently in different applications.

Read more

Let's work together

We believe that creating groundbreaking experiences that make measurable differences in the way people live takes a special type of collaboration. Our team designs impactful experiences by leaning on the variety of capabilities and expertise within Nomensa to ensure our solution is bespoke to your needs. We believe collaboration is key, let’s work together.

Contact us