Lists

Use Bullet & Number Feature to Make Lists

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 making paragraphs that look like lists using bullets symbols or numbers. Format the text as a real bullet or numbered list using the list button.
  • Nest list elements to create structure:
    • Use the indent button in your toolbar to do this.
    • Or select the list items you want to nest and click "Tab" (indent) or "Shift + Tab" (outdent).

Don't do This

Manually Formatted Bulleted List

>  Fruit
   > Apple
   >  A very long sentence about oranges, which is probably going to wrap over the line without an indent in a confusing an not particularly attractive manner
   >  Pear
>  Vegetables
>  Dairy

Why Is This Wrong?

A sighted user can tell the content is a list by the visual formatting, and can make an assessment of the length of the list, but they are likely to see formatting errors.

A screen reader will announce the items as unrelated paragraphs: it not be able to tell the user that this is a list, or how many items there are in it, or which items were indented. It will also be confusingly announcing the names of the symbols at the start of each new line: "bullet! bullet! dash! dash!"

Do This

Programmatically Formatted Bulleted List

  • Fruit
    • Apple
    • A very long sentence about oranges, which is going to wrap over the line with its indent preserved, reinforcing its position in the list
    • 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 nested list of three items.

Testing for Accessibility

Test

Use this lists bookmarklet or automated testing tool like WAVE to discover lists on a page

  • Do all visually formatted lists have an <ol> or <ul> tag?
  • Are sublists set in their own <ol> or <ul> tag?

Exceptions

None

Applicable WCAG Success Criteria

Resources