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