A list is a great way to provide concise information that’s easy to skim and understand; Lists help users comprehend text more quickly. Lists are recommended as potential replacements for simple tables, as tables can be more difficult to navigate and sometimes we provide info in tables that really would be better suited to lists.
Keyboards, screen readers, and screen magnifiers are commonly used forms of assistive technology. A screen reader can identify a list and tell someone how many items they will find in it. Therefore it is very important to create lists using the appropriate code.
Different List Types
- Ordered Lists <ol>: for content with sequence, order, or ranking. List items are typically pretended with a number, letter, Roman numeral, etc.
- Unordered Lists <ul>: for content having no order of sequence or importance. List items are typically pretended with a bullet, although this can be overridden with CSS if desired.
- Descriptive Lists <dl>: for content displaying name/value pairs such as terms and definitions.
Best Practices
- Only use list structure for content that logically forms a list.
- Don't merely create something that looks like a list by starting each paragraph with a bullet character. Assistive technology won’t recognize edited texts as a list.
- Use standard bullets. Custom characters could result in an image being included without alt text or in a screen reader interpreting a character by its ASCII value.
Lists Examples
Accessible List
Grocery List:
- Apple
- Kale
- Spinach
Why is this correct?
This list uses the correct standard lists which assistive technologies are able to recognize as lists.
Inaccessible List
Grocery List:
- Apple
- Kale
- Spinach
Why is this incorrect?
A sighted user can tell that the content is a list by the visual formatting.
A screen reader on the other hand will announce each bullet point as an individual paragraph because it is unable to recognize the content as a list. Since the list is formatted manually, the screen reader also will read out the custom characters.
For example, in this list, the screen reader will read out “dash apple”, “dash kale” and “dash spinach”, which will cause confusion.
Test for Accessibility
Use SiteImprove and WAVE to check list’s accessibility on a page. To check if lists on a page are accessible, make sure:
- All visually formatted list should have a list tags (ol,ul,dl)