Lists

3. Use Bullet & Number Feature to Make Lists

Use the list feature in Drupal to set bulleted and numbered lists. When there are sublists present, use the indent feature. Lists are meant to function and behave in a certain way in Web content. When we provide a visual formatting of a list in our layout, we must provide an equivalent experience to the non-sighted user. The non-sighted user with a screen reader will be able to expose the number of items in a list, and be able to jump from list to list in the content. 

Best Practices

  • Avoid manually formatting lists using bullets or numbers, instead, use the list feature in Drupal
  • Instead, create sublists using the indent feature to nest list elements into other lists

Don't do This

Manually Formatted Bulleted List

•  Fruit

   •  Apple

   •  Orange

   •  Pear

•  Vegetables

•  Dairy

Why Is This Wrong?

A sighted user can quickly determine that the content is a list by the visual formatting, and can make an assessment of the length of the list. A non-sighted person using a screen reader would interact with the items as six paragraphs, and not have the programmatic understanding of the outline level of each item.

Do This

Programmatically Formatted Bulleted List

  • Fruit
    • Apple
    • Orange
    • Pear
  • Vegetables
  • Dairy

Why is This Right?

This bulleted/unordered list will read aloud via a screen reader as list of three items and will identify the sublists as a list of three items within the larger list.