Accessible Lists

Comprehensive guide to creating accessible lists with semantic HTML and ARIA patterns.

1.3.1

Semantic Lists

Use <ul> for unordered lists, <ol> for ordered lists, and <dl> for description lists. Screen readers announce list structure, including the number of items. Never use divs styled to look like lists - use actual list elements.

Interactive Example

Test the accessible semantic lists implementation

Testing Guide

Screen Reader

•List structure is announced
•Number of items is communicated
•List type is clear

Unordered List

Accessibility
Usability
Performance

Ordered List

First item
Second item
Third item

Description List

WCAG: Web Content Accessibility Guidelines
ARIA: Accessible Rich Internet Applications

Code Implementation

Accessible semantic lists implementation

Best Practices

Accessibility Considerations

Key Points:

•Use semantic list elements (ul, ol, dl)
•Never use divs styled as lists
•Nested lists should be properly structured
•List items should be meaningful

Warnings:

⚠Don't use CSS to create list-like appearance without list elements

Additional Resources

Related WCAG Criteria

1.3.1 Info and Relationships

Examples/Lists