Lists: accessibility for content authors

  • Author: Access iQ ®
  • Date: 26 Nov 2012
  • Access: Premium

The purpose of the list element is to group related information items together on a webpage in a way that enhances user understanding.

Use of the list element does not generally impede accessibility to users with a disability — as long as the element is used correctly and with proper semantic markup. For example, when information is formatted as a list, it is essential for accessibility that the relationship between the list items is made explicit.

You can mark up list items using the <li> element, but this tells screen readers nothing about the entire list. For that purpose, it is necessary to mark up the list as an ordered list, an unordered list or a definitions list, using <ol>, <ul> and <dl> respectively.

Guideline 1.3.1 Info and relationships defines the accessibility of lists as:

Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. (Level A)

This section applies not only to lists, but also to tables, PDFs and other ways of presenting information on a webpage.

Even when lists are used correctly, there are steps that can be taken to increase their accessibility.

In good web writing, lists are used for readability; grouping related information into lists not only makes information more readable for sighted users, but also navigable by a screen reader.

Screen readers treat lists as a single element so users can use keyboard shortcuts to get to the list (or lists if there's more than one list on a webpage) and jump from one list to another. The screen reader also announces the number of list items on a list. When a user wants to bypass a block of content like a list, they can do so because the screen reader treats the list as a single element.

Correctly marking up the list element allows screen reader users to navigate through each list item or to skip to, or past that list. A short and succinct list makes information easier to see but also easier for screen readers to navigate.

Marking up a list

Using the list element or <li> indicates that the text following will be part of a list. It does not identify the structure or format of the list as a whole.

Ordered lists

Ordered lists marked with the <ol> element indicate that each list item will be listed with numbers in ascending numerical order.

Example 1:

A list of the top three challenges for project managers would be marked with the following HTML tags:

HTML version

<ol>

 <li>Unrealistic deadlines</li>

 <li>Communication</li>

 <li>Scope changes</li>

</ol>

Visual version

  1. Unrealistic deadlines
  2. Communication
  3. Scope changes

Unordered lists

Unordered lists can usually be identified as bullet points. Bullet points are the default character symbol that most use for unordered lists, shown as <ul>. Alternate symbols can be used with appropriate styling markup.

Example 2:

Using the same information as Example 1, an unordered list would be marked with the following HTML elements:

HTML version

<ul>

 <li>Unrealistic deadlines</li>

 <li>Communication</li>

 <li>Scope changes</li>

</ul>

Visual version

  • Unrealistic deadlines
  • Communication
  • Scope changes

Nested lists

Nested lists are indented within a list item and are typically identified by a leading symbol different to that used by the parent list. You can nest items within lists several times; you can nest <ul> items within <ol> items and vice versa.

Example 3:

The unordered list items below are represented by filled bullet points, while the nested list items are represented by unfilled bullet points.

The bullet point changes style as you nest list items within lists. How they look for every nested item will depend on which web browser you're using, or the cascading style sheets (CSS) you apply.

HTML version

<ul>

  <li>Unrealistic deadlines</li>

    <ul>

    <li>Meeting deadlines</li>

    <li>Finding alternative solutions</li>

    <li>Communicating change</li>        

 <li>Communication</li>

 <li>Scope changes</li>

</ul>

Visual version

  • Unrealistic deadlines
    • Communicating change
    • Finding alternative solutions
    • Meeting deadlines
  • Communication
  • Scope changes

Definition lists

Definition lists are different to ordered lists and unordered lists because this type of list isn't marked or represented by a character symbol like a bullet point or numbers. Instead, list items are indented within the title.

There are two parts to a definition list:

  • <dt> definition heading for definition term or title
  • <dd> definition content for explanatory text

The definition heading or <dt> is the name given to the idea or point. The definition content or <dd> is the explanation or meaning grouped under the definition heading.

Example 4:

HTML version

<dl>

<dt>Project Manager</dt>

<dd>An employee who plans and organises the resources necessary to complete a project.</dd>

</dl>

Visual version

Project Manager

An employee who plans and organises the resources necessary to complete a project.

Labelling and marking up lists appropriately will in most cases ensure your list is accessible to screen readers.

Check the code produced by a CMS

Depending on the content management system (CMS) you are using, you should be able to choose to edit in HTML mode or in visual mode. The visual mode is typically a WYSIWYG interface — What You See Is What You Get. This mode presents your content in the way that it would appear on a webpage; it immediately translates any code or HTML into its visual format.

Within the visual mode, there are a number formatting options, similar to those available to you when using a word processor. Two of the formatting options that are relevant to lists are 'bullets' and 'numbering'. If you use these format options for any of your lists when editing in visual mode, make sure to check the formatting in the HTML mode.

Using built-in formatting tools can add unnecessary HTML code which may result in making your content inaccessible, particularly to screen readers. It's good practice to check your code in HTML mode before publishing and remove any extra tags that may have been generated.

WCAG 2.0 references

Related Techniques for WCAG 2.0