List Overview

Overview

Lists of items on web resources should be represented by HTML markup that allows all users, including users with disabilities to easily move between items of a list and between lists themselves. Using ul, ol, and dl elements for defining list content ensures interoperability by making both graphical and non-graphical renderings of the lists accessible to all users, including users with disabilities.

Benefits to People with Disabilities

1. Screen reader users can easily identify the content of a list item and move between list items.
2. Screen reader users can easily move between lists on the web resource.

Benefits to All Users

1. Web resources will be more usable since lists are rendered consistently.
2. Lists are more accessible to users on a wider range of technologies.

Benefits to Developers

1. Markup of lists will be more consistent and thus styling them consistently across web resources is easier using CSS.
2. The more web developers separate structure from styling the eaiser it is for them to create new resources and update existing resources.
3. Web pages that use structural markup will be usable on a wider range of technologies.

Related Resources

1. W3C WCAG 1.0 list techniques

HTML Markup Details

ul element with li element

The ul and li elements can be used to create unordered lists of information.

The default rendering of an unordered list uses a solid black circle as the bullet for each item; this default can be modified to a variety of shapes including discs, circles and squares using the CSS list-style property.

Custom bullets can be defined using the CSS background-image property or the CSS list-style-image property. See more detailed description of these properties.

ol element with li element

The ol and li elements can be used to create ordered lists of information.

The default numbering of items in an ordered list uses decimal numbers starting from one (1).

The numbering style and current list number can be changed using the CSS list-style-type property. Possible values include decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-latin, upper-latin, armenian, georgian or none.

ol:start element

The value attribute can be used to set the starting number for an ordered list.

li:value element

The value attribute can be used to set the number for the current li element.

dl element with DT and dd element

The dl element can be used to create lists of definitions.

The dt element is used to itemize each term to be defined. One or more dd elements follow each dt element and provide definitions for the term.

CSS Properties

list-style-type

The CSS list-style-type property is used to change the default rendering of bullets and numbering of ordered (ol) and unordered lists (ul).

background-image

The CSS background-image property can be used on li elements of unordered lists to create custom bullet images.

This is much better than using the img element in the HTML code since there is no need to define alt text for the image, and updating the image can be done easily through modifying the CSS rather than direct editing of the HTML code.

This is also more flexible than the list-style-image property since it provides an option to vertically center the image.

list-style-image

The CSS list-style-image property is similar to the background-image property, but provides less control over the vertical positioning of the bullet image. The vertical position is fixed by current browsers, i.e. Internet Explorer, Mozilla/Firefox and Opera, to the value "top" which often makes the bullet image appear offset.

Related Accessibility Requirements

Illinois Information Technology Accessibility Standards

1.5 Use lists to identify series of related items, including navigation menus.

Section 508

none

W3C Web Content Accessibility Guidelines 2.0

1.3.1 Info and Relationships

1.3.2 Meaningful Sequence

Web Content Accessibility Guidelines (WCAG 1.0)

3.6 Mark up lists and list items properly. [Priority 2]

13.8 Place distinguishing information at the beginning of headings, paragraphs, lists, etc. [Priority 3]