Skip to Main Content

Accessibility Best Practices for LibGuide Content Creators

Lists

Bulleted / Unordered List | Numbered / Ordered List | Descriptive List | Nested List | Visual Formatting | Resources

Just like the other elements in the Semantic Structure and Markup section, lists provide visual cues to sighted users, but they also provide important navigational information to assistive technology users.

For example, screen readers will notify users that there is a list and how many items are in the list. This helps orient users to the fact that the information they are about to access is related in some key way.

There are three main types of lists that can also be nested.

Bulleted / Unordered List

Bulleted or Unordered lists are used when the order of the items is not relevant. List items in unordered lists are marked with a bullet.

Example:

  • Bananas
  • Apples
  • Grapes

Numbered / Ordered List

Numbered or Ordered lists are used for sequential information and are automatically enumerated by the browser.

Example:

  1. Navigate to the University Libraries homepage.
  2. Find the header labeled Find Materials.
  3. Click the link titled Articles & Databases.

Descriptive List

This list type programmatically groups related terms and descriptions. (It used to be called Definition List.)

Note: Descriptive lists are not available via the LibGuide rich text editor. They must be added using source code. Additionally, indenting the descriptions must be done manually in Libguides.

Example:

StageAgent
A primary theatre resource website listing thousands of plot summaries, character descriptions, monologues and audition songs. The site also provides a comprehensive database of open casting calls.

Code:

<dl>

<dt>StageAgent</dt>

<dd>A primary theatre resource website listing thousands of plot summaries, character descriptions, monologues and audition songs. The site also provides a comprehensive database of open casting calls.</dd>

</dl>

Note: <dl> refers to Descriptive List; <dt> refers to Term; <dd> refers to Description

Nested List

"Every list can be nested into another list. In the following example, the order of preparation is not critical, but the preparation itself should be done before using the ingredients. The information is still easy to digest, assistive technology can easily inform users about the number of steps." [1]

Example:

  1. Prepare ingredients
    • Cook beans for 45 minutes.
    • Cut vegetables in small cubes.
  2. Sauté onions and garlic.
  3. Deglaze using the tomatoes.
  4. Add corn and beans.

Example from W3C: Content Structure

Visual Formatting

Lists use varying predefined markers (or bullets) as a way of visually presenting each list item. Generally, the default marker for unordered lists is a disc and ordered lists use numbers. The marker pattern for nested lists can change depending on the program being used.

While these markers are visual presentations, understanding how to alter the patterns can provide enhanced visual cues for users that may have difficulties viewing the screen. Screen readers also have difficulty determining levels of indention.

Let's look at LibGuide's default marker patterns, options to vary the marker styles, and a few options that allow you to change the marker entirely.

Numbered / Ordered Lists

At first glance, it appears that a nested numbered / ordered lists in LibGuides will only use numbers; however, there is a way to edit the list type.

To access the Numbered List Properties, highlight the text and press the Insert / Remove Numbered List button.

LibGuide text editor with list of items and Insert Numbered List highlighted.

With your numbered list still highlighted, right click any of the list items. A small pop-up will appear with the Numbered List Property option.

LibGuide text editor with Numbered List Properties highlighted.

These options are:

Start

  • Allows you to determine the starting number for your ordered list.

Type

  • Allows you to replace your the numbers of your ordered list with:
    • Lower Roman (i, ii, iii, iv, v, etc.)
    • Upper Roman (I, II, II, IV, V, etc.)
    • Lower Alpha (a, b, c, d, e, etc.)
    • Upper Alpha (A, B, C, D, E, etc.)
    • Decimal (1., 2., 3., etc.)

Best Practice:

Many screen readers may ignore the various indention levels entirely. It may be worth creating an ordered list and then using a different numbering system or an unordered list in secondary levels to help users distinguish between the levels.

Excerpt from Pennsylvania State University: Lists in HTML

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

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

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 Architecture.

 

Accessible Nested List

What a visual browser shows:

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
    3. ...
  3. ...

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 Architecture.

[2]

Bulleted / Unordered Lists

Nested bulleted / unordered lists in LibGuides use the following pattern:

  • Disc
    • Circle
      • Square

Similarly to Ordered Lists, you can right click on your list to access the Bulleted List Properties. This set of options include changing between disc, circle, and square.

Best Practice:

The indention at the beginning of each nested line item helps, but users may still have difficulty differentiating between the "disc" and "square" markers. Like the numbered list, make sure to vary your list style markers to differentiate between levels.

Tip:

You can also remove the bullets entirely by adding a code to the source.

<ul style="list-style-type: none;">