Accessibility UI Guidelines: Lists
Lists
2.7 Lists
Lists are essential for organizing information in a clear and structured manner. Ensuring that lists are accessible enhances content comprehension and navigation for all users, including those using assistive technologies.
2.7.1 Proper Use of List Elements
Use semantic HTML list elements to structure content appropriately. Utilize unordered lists (<ul>) for items without a specific order and ordered lists (<ol>) for items that follow a sequence.
<!-- Unordered List Example -->
<ul>
<li>Feature A</li>
<li>Feature B</li>
<li>Feature C</li>
</ul>
<!-- Ordered List Example -->
<ol>
<li>Step 1: Gather materials</li>
<li>Step 2: Prepare workspace</li>
<li>Step 3: Assemble components</li>
</ol>
2.7.2 Nesting Lists Appropriately
When presenting hierarchical information, nest lists to reflect the structure logically. Ensure that nested lists maintain proper indentation and semantic structure for clarity and accessibility.
<ul>
<li>Fruits
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Cherry</li>
</ul>
</li>
<li>Vegetables
<ul>
<li>Carrot</li>
<li>Broccoli</li>
<li>Spinach</li>
</ul>
</li>
</ul>
2.7.3 Descriptive List Items
Ensure that each list item is descriptive and provides meaningful information. Avoid using empty list items or those that do not add value to the content.
<!-- Descriptive List Items -->
<ul>
<li>Improves accessibility for screen reader users</li>
<li>Enhances content organization and readability</li>
<li>Facilitates better user navigation</li>
</ul>
<!-- Non-Descriptive List Items -->
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
2.7.4 Accessible List Styling
Style lists in a way that maintains their accessibility. Avoid removing list indicators (e.g., bullets or numbers) unless alternative visual cues are provided. Ensure that styling does not interfere with the readability or navigability of the list.
/* Example CSS for Accessible List Styling */
/* Retain default list styles */
ul, ol {
margin-left: 20px;
padding-left: 0;
}
/* Customize list indicators without removing them */
ul {
list-style-type: disc;
}
ol {
list-style-type: decimal;
}
li {
margin-bottom: 8px;
}
2.7.5 ARIA Roles for Complex Lists
For complex list structures, use ARIA (Accessible Rich Internet Applications) roles and properties to enhance accessibility. This is particularly useful for interactive or dynamically generated lists.
// ARIA Roles for a Collapsible List
<ul role="tree">
<li role="treeitem" aria-expanded="false">
<span>Parent Item 1</span>
<ul role="group">
<li role="treeitem">Child Item 1</li>
<li role="treeitem">Child Item 2</li>
</ul>
</li>
<li role="treeitem">Parent Item 2</li>
</ul>
2.7.7 Consistent List Structure
Maintain a consistent structure for lists throughout the website. Consistency aids recognition and predictability, enhancing the user experience and accessibility.
<!-- Consistent List Structure -->
<ul>
<li>Consistent Item 1</li>
<li>Consistent Item 2</li>
<li>Consistent Item 3</li>
</ul>
2.7.8 Testing Lists for Accessibility
Regularly test lists using various assistive technologies and accessibility testing tools to ensure they are announced correctly and function as intended. This includes verifying that nested lists are properly interpreted and that ARIA attributes are correctly implemented.
// Example: Using a screen reader to verify list accessibility
// Ensure that lists and nested lists are announced with correct hierarchy and structure
2.7.9 Avoiding Overly Complex Lists
Keep lists as simple as possible. Avoid unnecessary nesting or the inclusion of too many items, which can overwhelm users and make navigation difficult.
<!-- Simple and Clear List -->
<ul>
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
</ul>
<!-- Overly Complex List -->
<ul>
<li>Item 1
<ul>
<li>Subitem 1.1
<ul>
<li>Subsubitem 1.1.1</li>
</ul>
</li>
</ul>
</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
2.7.10 Semantic List Use
Use lists only for their intended purpose: to group related items. Avoid using lists for layout or styling purposes, as this can confuse assistive technologies and hinder accessibility.
<!-- Correct: Using List for Grouping Related Items -->
<ul>
<li>First Feature</li>
<li>Second Feature</li>
<li>Third Feature</li>
</ul>
<!-- Incorrect: Using List for Layout -->
<ul>
<li><div class="box">Box 1</div></li>
<li><div class="box">Box 2</div></li>
<li><div class="box">Box 3</div></li>
</ul>
Best Practices for Lists
- Use Semantic Elements: Utilize
<ul>and<ol>for unordered and ordered lists respectively to convey the correct structure. - Maintain Logical Nesting: Ensure that nested lists accurately represent the hierarchy and relationship between items.
- Provide Descriptive Content: Each list item should be meaningful and provide clear information to the user.
- Ensure Visual Clarity: Style lists in a way that maintains their readability and does not remove essential list indicators unless alternative cues are provided.
- Implement ARIA Roles When Necessary: For complex or interactive lists, use ARIA roles and properties to enhance accessibility.
- Enable Keyboard Navigation: Ensure that interactive lists are navigable using keyboard controls, with clear focus indicators.
- Avoid Overly Complex Structures: Keep lists simple to prevent overwhelming users and to maintain accessibility.
- Test with Assistive Technologies: Regularly verify that lists are correctly interpreted by screen readers and other assistive tools.
- Avoid Using Lists for Layout: Use appropriate CSS and layout techniques instead of lists to structure page elements.