Use lists for related content

Why lists matter for accessibility

Lists help make content more accessible, readable, and scannable. They’re especially useful for users with disabilities. Here’s why they’re essential:

• Improves content structure: Lists break up dense text, making information easier to scan and understand.
• Enhances navigation for screen readers: Screen readers announce lists, helping users know they’re reading related items and making it easier to navigate.
• Supports cognitive accessibility: Lists make complex information easier to digest, especially for users with dyslexia or ADHD.
• Boosts readability: Lists highlight key points, making them more noticeable and ensuring important information isn’t missed.

Best practices for using lists in accessible content

1. Choose the right list type

Use the correct list type to ensure clarity and accessibility.

• Ordered lists (<ol>): Use ordered lists for steps or processes where sequence matters.
• Unordered lists (<ul>): Use unordered lists for related items that don’t need to follow a specific order.
• Definition lists (<dl>): Use definition lists for terms and definitions, like glossaries or FAQs.

2. Keep lists concise and focused

Short, focused lists are easier to read and understand.

• Limit list length: Aim for under seven items to keep lists manageable. For longer lists, break them into smaller sections.
• Stay on topic: Only include items directly related to the list’s purpose.

3. Use descriptive headings for lists

Introduce lists with a clear heading to set expectations.

• Descriptive headings: Use a heading that explains what the list contains, like “Steps to Improve Website Accessibility.”
• Avoid ambiguity: Make sure the heading is specific to help all users, including those using screen readers, understand the list’s purpose.

4. Ensure proper markup

Correct HTML markup is essential for screen readers to recognize lists.

• Use semantic HTML: Always use <ol>, <ul>, and <dl> tags for lists. Avoid creating lists with non-semantic elements like <div> or <p>.
• Nested lists: For sub-lists, use nested <ul> or <ol> tags within the main list to create a clear structure.

5. Make lists easy to read

Lists should be easy for everyone to read, including users with cognitive disabilities.

• Clear formatting: Use bullet points or numbers and add enough space between list items.
• Consistent punctuation: Apply the same punctuation style throughout the list. If one item ends with a period, all items should.
• Parallel structure: Ensure each list item follows a similar grammatical structure for easier scanning.

6. Add context if needed

Provide extra details for items that may require further explanation.

• Inline descriptions: Add brief explanations if needed, e.g., “Web Accessibility (making websites usable by people with disabilities).”
• Link to more details: For more in-depth information, link each item to relevant content. Use descriptive link text.

Examples of effective lists

To illustrate the principles of effective lists, here are some examples:

Ordered list example: Steps to improve website accessibility:

1. Conduct an accessibility audit
2. Add descriptive alt text to images
3. Use semantic HTML
4. Provide captions for videos
5. Test with screen readers

Unordered list example: Benefits of using lists:

• Improves readability and structure
• Helps screen reader users navigate
• Supports cognitive accessibility
• Enhances overall content accessibility

Further reading

• WCAG 1.3.1 Info and Relationships
• WCAG 2.4.6 Headings and Labels