Web Accessibility Best Practices

Campus Information Technologies and Educational Services (CITES) and Disability Resources and Educational Services (DRES)

University of Illinois at Urbana/Champaign

Main Menu

Sand Trail

Using Markup to Represent Lists

Web users use web pages differently than other informational resource like books. One characteristic of many web resources is they create lists of information to make it easier for users to visually identify key information or links. By using ul, ol and dl elements for defining list content, the developer insures that both graphical and non-graphical renderings make the list information available to all users.

HTML Markup

UL with LI
The ul and li elements can be used to create lists of unordered information. The default bullet rendering of an unordered list is a solid black circle, but this default can be modified using the CSS list-style property to a variety of shapes including discs, circles and squares. Custom bullets can be defined using the CSS background-image property or the CSS list-style-image property. The background-image property is more flexible than the list-style-image property since it provides an option to vertically center the image. The list-style-image property as implemented in Internet Explorer, Mozilla/Firefox and Opera sets the vertical alignment to top so bullets often look offset, vertically.
OL with LI
The ol and li elements can be used to create ordered lists of information. The default numbering uses decimal numbers starting from one (1). The numbering style and current list number can be changed using CSS list-style-type and the value and start attributes. Numbering styles include decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-latin, upper-latin, armenian, georgian or none.
ol:start
The value attribute can be used to set the starting number for an ordered list.
li:value
The value attribute can be used to set the number for the current li element.
DL with DT and DD
The dl element is used to create definition lists. The dt element is used to title each term in the list and one or more dd elements provide descriptions 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 the LI element in unordered lists to create custom bullet images. This is much better than using the img element since there is no need to define alt text for the image, and updating the image can be done easily through changes in the CSS files rather than direct editing of the HTML code.
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 to the value "top" which often makes the bullet image appear offset.

Related Accessibility Requirements

Section 508

Web Content Accessibility Guidelines (WCAG 1.0)

Examples

  1. Ordered List: Alternative Number Systems
  2. Ordered List: Start attribute
  3. Ordered List: Value attribute
  4. Unordered List: Square bullet
  5. Unordered List: Circle bullet
  6. Unordered List: background-image
  7. Unordered List: background-image
  8. Definition List Example

Ordered List: Alternative Number Systems

The CSS list-style-type property can be used to change the number styling from decimal to decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-latin, upper-latin, armenian, georgian or none.

  1. List 1 item #1
  2. List 1 item #2
  3. List 1 item #3
  4. List 2 item #4
  5. List 2 item #5
  6. List 2 item #6

HTML and CSS Source Code

<ol style="list-style-type: lower-roman">
  <li>List 1 item #1</li>
  <li>List 1 item #2</li>
  <li>List 1 item #3</li>
  <li>List 2 item #4</li>
  <li>List 2 item #5</li>
  <li>List 2 item #6</li>
</ol>

Ordered List: Start attribute

There are two ordered lists, but to maintain consecutive numbering, the second list uses the start attribute to begin the list numbering at 4.

  1. List 1 item #1
  2. List 1 item #2
  3. List 1 item #3
  1. List 2 item #4
  2. List 2 item #5
  3. List 2 item #6

HTML Source Code

<ol>
  <li>List 1 item #1</li>
  <li>List 1 item #2</li>
  <li>List 1 item #3</li>
</ol>

<ol start="4">
  <li>List 2 item #4</li>
  <li>List 2 item #5</li>
  <li>List 2 item #6</li>
</ol>

Ordered List: Value attribute

Use the value attribute to control the numbering of each list item element in an ordered list. In this example the number of the list is reversed.

  1. List item #1
  2. List item #2
  3. List item #3
  4. List item #4
  5. List item #5
  6. List item #6

HTML Source Code

<ol>
  <li value="6">List item #1</li>
  <li value="5">List item #2</li>
  <li value="4">List item #3</li>
  <li value="3">List item #4</li>
  <li value="2">List item #5</li>
  <li value="1">List item #6</li>
</ol>

Unordered List: Square

HTML Source Code

<ul style="list-style-type: square">
  <li>List item #1</li>
  <li>List item #2</li>
  <li>List item #3</li>
  <li>List item #4</li>
  <li>List item #5</li>
  <li>List item #6</li>
</ul>

Unordered List: Circle

HTML Source Code

<ul style="list-style-type: circle">
  <li>List item #1</li>
  <li>List item #2</li>
  <li>List item #3</li>
  <li>List item #4</li>
  <li>List item #5</li>
  <li>List item #6</li>
</ul>

Unordered List: list-style-image

Note: The list-style-image skews the image vertically, where using background-image allows centering of the image vertically with the text.

HTML Source Code

<ul style="list-style-image: url(../images/bullet-1.png)">
  <li>List item #1</li>
  <li>List item #2</li>
  <li>List item #3</li>
  <li>List item #4</li>
  <li>List item #5</li>
  <li>List item #6</li>
</ul>

Unordered List: background-image

CSS Source Code

ul.bullet1 li {
  list-style-type: none;
  background-image: url(../images/bullet-1.png);
  background-position: center left;
  background-repeat: no-repeat;
  padding-left: 1.5em;
}

HTML Source Code

<ul class="bullet1">
  <li>List item #1</li>
  <li>List item #2</li>
  <li>List item #3</li>
  <li>List item #4</li>
  <li>List item #5</li>
  <li>List item #6</li>
</ul>

Definition List Example

Term 1
Definition 1 for Term 1
Definition 2 for Term 1
Definition 3 for Term 1
Term 2
Definition 1 for Term 2
Term 3
Definition 1 for Term 3
Definition 2 for Term 3

HTML Source Code

<dl>
  <dt>Term 1</dt>
  <dd>Definition 1 for Term 1</dd>
  <dd>Definition 2 for Term 1</dd>
  <dd>Definition 3 for Term 1</dd>
  <dt>Term 2</dt>
  <dd>Definition 1 for Term 2</dd>
  <dt>Term 3</dt>
  <dd>Definition 1 for Term 3</dd>
  <dd>Definition 2 for Term 3</dd>
</dl>