Skip to main content

Accessible Lists: Guidelines and Best Practices

Lists help to organize content in a structured way, making it easier to read and comprehend

Accessible Lists: Guidelines and Best Practices

Shawn Sandy (Ally.Cafe) ~

Introduction to HTML5 Lists

HTML5 introduces several elements and attributes that improve the accessibility and semantics of web content. Lists are a fundamental part of HTML, allowing us to organize content in a structured manner. Understanding how to create accessible lists is crucial for making web content more navigable and understandable, especially for users relying on assistive technologies like screen readers.

Types of HTML Lists

HTML5 supports three main types of lists:

  1. Ordered Lists (<ol>): Used for items that follow a sequential order.
  2. Unordered Lists (<ul>): Used for items that do not follow a specific order.
  3. Description Lists (<dl>): Used for pairs of terms and descriptions.

Why Accessibility in Lists Matters

Accessible lists help screen readers and other assistive technologies interpret the structure and hierarchy of content correctly. This aids users in navigating the content efficiently and understanding the relationships between list items.

Best Practices for Accessible Lists

Ordered and Unordered Lists

  1. Proper Nesting: Ensure lists are properly nested. Avoid breaking the structure with other elements that do not belong inside lists.

  2. Meaningful Order: Use <ol> for steps or sequences where order matters, and <ul> for collections where order is irrelevant.

  3. List Markers: Customize list markers using CSS if necessary, but ensure they remain visible and understandable.

  4. List Item Tags: Always use <li> tags inside <ol> or <ul> to define list items.

Description Lists

  1. Terms and Descriptions: Use <dt> for terms and <dd> for descriptions. Ensure each term has a corresponding description.

  2. Grouping: Group related terms and descriptions logically.

Code Examples

Ordered List

<ol>
  <li>Preheat the oven to 375°F (190°C).</li>
  <li>Mix flour, sugar, and baking powder in a bowl.</li>
  <li>Add eggs and milk, and stir until combined.</li>
  <li>Pour the batter into a greased baking dish.</li>
  <li>Bake for 25-30 minutes or until golden brown.</li>
</ol>

Unordered List

<ul>
  <li>Milk</li>
  <li>Eggs</li>
  <li>Bread</li>
  <li>Butter</li>
</ul>

Description List

<dl>
  <dt>HTML</dt>
  <dd>A markup language for creating web pages.</dd>
  <dt>CSS</dt>
  <dd>A style sheet language used for describing the presentation of a document written in HTML.</dd>
  <dt>JavaScript</dt>
  <dd>A programming language commonly used to create interactive effects within web browsers.</dd>
</dl>

Screen Reader Support

Screen readers announce lists and the number of items in them, helping users understand the structure and navigate through them. Using proper list elements ensures screen readers can provide accurate information.

WCAG 2.2 Guidelines for Lists

  • 1.3.1 Info and Relationships: Ensure that information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.
  • 4.1.2 Name, Role, Value: Ensure user interface components (like list items) have the necessary information for assistive technologies to convey their purpose.

Techniques and Failures

Sufficient Techniques

  • Use <ol>, <ul>, and <li> appropriately to structure ordered and unordered lists.
  • Use <dl>, <dt>, and <dd> for description lists.
  • Ensure lists are not interrupted by other elements.

Common Failures

  • Using non-semantic tags (like <div>) to create lists.
  • Interrupting lists with other block-level elements, breaking the structure.

Additional Resources

By following these guidelines and best practices, you can ensure your lists are accessible and provide a better user experience for everyone, including those using assistive technologies.

Found an error, typo, or bug please edit on github or open an issue or ticket

Edit on Github Open an issue