Page Content

Synopsis

If you are using nested lists (lists within lists), then use a different numbering system in the secondary levels than in the primary levels, to help users distinguish between them. See the nested list example below for details.

Nested Lists

Using different numbering/lettering schemes for each level of your lists will help both screen reader users and a general audience comprehend the content more easily.

Inaccessible Nested list

What a visual browser sees:

University Park Colleges and Departments

1. Agricultural Sciences

1. Agricultural and Biological Engineering
2. Agricultural Economics.

2. Arts and Architecture

1. Department of Architecture

1. Department of Architecture
2. Department of Landscape Architecture

What a screen reader says:

University Park Colleges and Departments

1. Agricultural Sciences 1. Agricultural and Biological Engineering…2. Arts and Architecture 1. Architecture and Landscape Architecture 1. Department of Landscape Architecture.

Accessible Nested List

What a visual browser sees:

University Park Colleges and Departments

  1. Agricultural Sciences
    1. Agricultural and Biological Engineering
    2. Agricultural Economics
  2. Arts and Architecture
    1. Architecture and Landscape Architecture
      1. Department of Architecture
      2. Department of Landscape Architecture
    2. Art History

What a screen reader says:

University Park Colleges and Departments

1. Agricultural Sciences A. Agricultural and Biological Engineering…2. Arts and Architecture A. Architecture and Landscape Architecture i. Department of Landscape Architecture.

Using Image Bullets (CSS)

You can replace bullets with custom bullet images using the CSS attribute list-style-image:url(path).

Example list with custom bullets:

Penn State’s two colors are:

  • Blue
  • White

CSS file specification:

ul.paw {list-style-image:url(examples/paw.gif)}

View the HTML code:

<ul class="paw">
    <li>Blue</li>
    <li>White</li>
</ul>

The list-style-image attribute replaces a bullet with the image.

What a screen reader says:

Penn State’s two colors are:

Blue
White