Skip Main Navigation
Indiana University

Main Content

Web Accessibility Made Easy: Lists

May 19th, 2011

This blog post in the “Web Accessibility Made Easy” series describes how to appropriately use lists… a common feature of Web sites. Although helpful, lists are not always coded correctly.

Lists

HTML lists are an accepted way to outline or organize information into related groups on a Web page. Lists are a particularly helpful means of organizing navigation links. There are three list sub-types: unordered, ordered and definition. Unordered lists, which are proceeded by a bullet, may be the most common type of list. Ordered lists are more commonly recognized as numbered lists.  Definition lists are a special list type, created to order and organize term/definition pair sets.  Below are examples of each type of HTML list. For more information on HTML lists, please consult the W3C HTML 4 List page.

List Examples


Unordered:

  • Fred
  • Joe
  • Johnny

Ordered:

  1. Joe
  2. Fred
  3. Johnny

Definition:

Sesquipedalian
Given to using long words.
Hortatory
Marked by strong urging; serving to encourage or incite

Lists, whether unordered, ordered or definition, need to have opening and closing tags to be valid HTML lists and render correctly to user agents including internet browsers and screen-reading software.

Code Example:


<ul>
<li>Fred</li>
<li>Joe</li>
<li>Johnny</li>
</ul>

Many developers create fake lists using images and CSS style rules to create the visual appearance of a list.  This creates navigation roadblocks for screen-reader users, especially if there are multiple lists coded in the same manner.   However, with correctly coded lists, screen-reader users can jump from list to list using keyboard shortcuts for easy navigation. In addition, screen-reading software announces how many items are in each list and if nested lists are present, allowing screen-reader users to understand the hierarchical structure of the list.  For these reasons and many others, lists should always be properly coded, after which, the developer can use CSS style rules to control their visual appearance.

Guideline

IU Web Accessibility Guidelines


18. Mark up lists and nested lists properly.

Tutorial

This tutorial will be using both the Bad example web page and the  Good example web page, along with their associated style sheets.

  1. The bad code – Fake lists coded with images and CSS.

    In the code below there is no actual list; the list is faked.  To a screen-reader user, each bullet of this fake list would be read out, “img/bullet,” which would get annoying to any person.  Instead of using <img> tags, the developer should have created a HTML list and used CSS style rules to change the bullet to an image.

    <img src="img/bullet.jpg" width="7" height="7" />Learn about the federal statues<br />
    <img src="img/bullet.jpg" width="7" height="7" class="float-left" />Research free and commercial tools that can aid you<br />
    <img src="img/bullet.jpg" width="7" height="7" class="float-left" />Participate web accessibility training<br />
    <img src="img/bullet.jpg" width="7" height="7" class="float-left" />Design the web site according to the standards provided<br />
  2. Create correctly coded HTML lists.

    Add the opening and closing tags <ul> and </ul>. Then, replace the <img> and <br/> tags with <li> and </li> tags.  The CSS style declaration below changes the bullet into the chosen image.

    <ul class=“cbullet”>
    <li> Learn about the federal statues </li>
    <li> Research free and commercial tools that can aid you </li>
    <li> Participate web accessibility training </li>
    <li> Design the web site according to the standards provided </li>
    </ul>


    CSS Style declaration:

    .cbullet ul {
    list-style-image: url(img/bullet.jpg);
    }


    Note: Having an image as a bullet does not affect how screen-reading software announces the list items.

Wrap Up

Properly coding all lists is an easy way to improve the accessibility and navigability of a Web site without impacting the visual design.  Properly coded HTML lists are particularly important for screen-reader users.  In addition, coding lists items properly helps web pages to validate and ensures the Web page renders accurately in any Web browsing software.