List Accessibility
Best Practices
Use ul for an unordered collection and ol when sequence matters. Every direct list child must be an li element.
Use native links, buttons, and form controls for actionable items. Decorative leading and trailing icons must be hidden from assistive technology.
Interaction Design
Keyboard
TAB moves through interactive controls in list order. Static list items are not tab stops.
Screen Reader
A screen reader announces the list type, item count, and each item's content and controls.
Pointer
Only the native interactive control within an actionable item responds to clicking or tapping.
ARIA Reference
| Attribute | Description |
|---|---|
| aria-hidden="true" | Hides decorative leading or trailing icons. |
| aria-labelledby | Associates an embedded control with visible item text. |