New Components

List

Lists are elements used to organize and display information in an orderly and accessible manner. They come in two main types: unordered lists, usually marked with bullet points, and ordered lists, which are numbered. Lists simplify navigation and improve the readability of web content.

When to Use

Lists are used to organize and present related items or content in a structured, easy to navigate format.

When Not to Use

Avoid the use of lists when the content does not naturally fit into a structured, itemized format, as this can lead to unnecessary complexity and hinder usability.

Types

  • Unordered List: Use bullet points to list items without any specific sequence or priority.
  • Ordered List: Use numbered items to indicate a specific order or sequence.

On this page

Keywords

  • Unordered List: Uses bullet points to list items without any specific sequence or priority.
  • Ordered List: Numbers items to indicate a specific order or sequence.

Breakdown of Components

Unordered List

  • Implementing <ul> tags is essential for screen readers to accurately recognize the list as unordered.
  • Every item is wrapped within <li> tags to preserve the correct structure and hierarchy.
  • Bullet points are designed for clear visual presentation, with CSS customization taking color contrast guidelines into account for improved visibility.
  • Note: Excessive nesting of lists can lead to confusion; therefore, it is preferable to maintain a simple and intuitive structure.
HTML
<ul>
  <li>Ipedis</li>
  <li>DocAxess</li>
  <li>Publispeak</li>
</ul>

Ordered List

  • It is advisable to use the <ol> tag for ordered lists to facilitate screen readers in understanding the list's sequential nature.
  • Maintaining the default numerical ordering is crucial unless a specific reason justifies a different sequence.
  • Items are consistently enclosed within <li> tags, as this is essential for screen readers to announce each item individually.
  • Note: Each list item should contain adequate descriptive content to be comprehensible within the context of its numbering.
HTML
<ol>
  <li>Ipedis</li>
  <li>DocAxess</li>
  <li>Publispeak</li>
</ol>

Customized List (Incorporating ARIA Attributes for Specific Purposes)

  • When creating custom list components with HTML elements like div and span, incorporating ARIA role attributes is crucial for screen reader accessibility.
  • role="list" is applied to the parent element and role="listitem" to each item in a custom list to ensure proper structure recognition by assistive technologies.
  • For a more explicit introduction of the list, an aria-label attribute can be included.
  • It's essential to rigorously test these custom lists with screen readers, confirming that the ARIA roles are effectively making the list structure accessible to all users.
HTML
<div role="list" aria-label="List of items using aria attributes" class="custom-list">
  <div role="listitem">Ipedis</div>
  <div role="listitem">DocAxess</div>
  <div role="listitem">Publispeak</div>
</div>

Screen Reader

  • When navigating with a screen reader, users can access list items using arrow keys.
  • This allows screen reader users to navigate through the list item by item.

On this page

Keyboard Operability in Lists

  • Lists are not keyboard operable by default.
  • If list items are interactive (e.g., links, buttons), they inherit default keyboard interactions.

List Items with Default Interactions

  • In a list of links, each link is included in the tab order.
  • Interactive list items can be activated using the Enter key.

On this page