semantic-lists

Installation
SKILL.md

Use semantic list elements

Screen readers announce list structure and item count—'list with 5 items'—helping users understand content organization. Styled divs provide no context.

Quick Reference

  • Use for unordered lists (navigation, features, bullets)
  • Use for ordered sequences (steps, rankings, instructions)
  • Use <dl> for term-definition pairs (glossaries, FAQs)
  • Screen readers announce 'list with X items' for proper lists

Check

Identify groups of related items (navigation menus, product features, steps) and verify they use ul, ol, or dl elements rather than divs or spans styled to look like lists.

Fix

Wrap related items in appropriate list elements: ul for unordered lists, ol for numbered sequences, dl for term-definition pairs. Use li for list items and proper dt/dd for definition lists.

Installs
5
GitHub Stars
73.9K
First Seen
Aug 11, 2026
semantic-lists — thedaviddias/front-end-checklist