Lists — Accessibility Specification (WCAG 2.1 AA)

What is this component?

What is this component? Lists (<ul>, <ol>, <li>, and <dl>) present collections of related items or paired terms/definitions.

Where and how is it used? Use lists for navigation menus, feature bullets, steps in a process, FAQs, and term glossaries.

Accessibility Requirements

Requirement	WCAG Criteria	Description
Semantic grouping	1.3.1	Use list elements to convey relationships; avoid manual bullet characters.
Order matters	1.3.1	Use `<ol>` when sequence is important, `<ul>` when not.
Accessible names for links	2.4.4	Menu/list links should have meaningful text, not “Click here”.

ARIA Roles and Attributes

ARIA Role/Attribute	Used On	Purpose & Usage
`<ul>`/`<ol>`/`<li>`	Item collections	Preferred. Avoid adding list roles redundantly.
`<dl>`/`<dt>`/`<dd>`	Terms and definitions	Use for name‑value pairs and glossaries.

Implementation Guidelines



  Secure
  Reliable
  Accessible


  Sign in
  Choose plan
  Confirm




  API
Application Programming Interface
  WCAG
Web Content Accessibility Guidelines

DO’s

Use semantic list tags; keep each item in its own <li>.
Use <ol> for steps and procedures.
Provide meaningful link text within list items.
Keep lists concise and scannable.

Don’ts

Don’t build lists with <br> or hyphens.
Don’t nest lists excessively without headings.
Don’t use vague link text like “Read more”.

Common Pitfalls

Fake bullets: screen readers don’t interpret relationships.
Poor nesting: deep structures without headings are confusing.
Mixed semantics: lists used purely for layout.

Testing Checklist

Test Item	WCAG Criteria	Pass Criteria
List semantics present	1.3.1	AT announces list with correct item count.
Order correct	1.3.1	Steps use `<ol>`, unordered info uses `<ul>`.
Link text	2.4.4	Links within items are descriptive.