Home › Details by Tech

Lists in HTML

Tue, 02/24/2009 - 18:20 — kvl5046
  1. Synopsis
  2. Nested Lists
  3. Using Image Bullets (C.S.S.)

Synopsis

If you are using nested lists (a list within a list), then use a different numbering system in the secondary levels than in the top level. This helps users distinguish between different levels. See the Nested List example below for details.

Nested Lists

When nesting lists, use different numbering/lettering scheme at each level, so screen readers can distinguish among them. This is also advisable from a usability perspective. See examples below.

Inaccessible Nested list

What a typical browser sees

University Park Colleges and Departments

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

What a screen reader may say

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 typical browser sees

University Park Colleges and Departments

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

What a screen reader may say

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 (C.S.S.)

You can replace bullets with custom bullet images, using cascading style sheet attribute – list-style-image:url(path)

Example List with Custom Bullets

Penn State's two colors are:

  1. Blue
  2. White

C.S.S. File Specification

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

View the HTML Code

<ol 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:

Item 1 Blue
Item 2 White

 

Top of Page

 

‹ Links on a Web PageupMath Equations & Formulas ›