How to build an accessible DataList in React

Rendered as semantic dl with dt/dd pairs so the label-to-value association is native; no extra ARIA role is added

When to use a DataList

• Displaying read-only key-value metadata (profile fields, record summaries)
• Presenting structured attributes where each value maps to a single label
• Compact detail panels next to or below a primary subject

When not to use it

• Editable fields — use form Inputs, not a DataList
• Tabular data with many rows and columns — use a Table

Accessibility

Role none, verified at WCAG 2.2-AA.

Common mistakes

Avoid: Faking a description list with stacked divs and manual labels

Prefer: Use the native dl/dt/dd structure DataList emits

dl/dt/dd conveys the term-to-description relationship to assistive tech for free

Example

<DataList
  items={[
    { label: 'Name', value: 'Ada Lovelace' },
    { label: 'Role', value: 'Mathematician' },
  ]}
/>

See the full DataList reference →