Page Content

Bulleted Lists

Although screen readers can detect bulleted (unordered) lists, they do not usually distinguish levels of indentation.

If you are using nested lists (i.e. lists within lists), then consider using an ordered list with a different numbering system in the secondary levels than in the primary levels to help users distinguish between them.

See the nested ordered list example below for details.

Combine Lists with Headings

Another solution is to use smaller level headings combined with single level lists. See the example below.

Nested Ordered List

  • North America
    • United States
    • Canada
    • Mexico
  • Central America
    • Guatemala
    • Honduras
    • Costa Rica

What the Screen Reader says

Note: Many screen readers read this list of regions and countries as one line list.

  • North America
  • United States
  • Canada
  • Mexico
  • Central America
  • Guatemala
  • Honduras
  • Costa Rica

With Headings

In this example, the regions are a heading 3 or 4 and the countries individual lists.

North America

  • United States
  • Canada
  • Mexico

Central America

  • Guatemala
  • Honduras
  • Costa Rica

 

Nested Ordered 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 :

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

General Caution

In documents such as Microsoft Word or PowerPoint, replacing the generic bullet characters (e.g. circles and squares) with custom characters could result in inserting an image without an ALT text or an unrecognized character. However the content of the list would still be read out on a screen reader.

CSS

In HTML, you can replace bullets with custom bullet images using the CSS attribute list-style-image:url(path). However, bullet will be read as if it were unstyled in a screen reader.

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

Top of Page