⚡AgentSkills
🎨 Frontend Engineering · Accessibility

Write semantic markup before reaching for ARIA

Native elements carry behavior and semantics for free; ARIA is the fallback, not the default.

foundation~25 minFrontend EngineersFull-Stack DevelopersDesign Engineers

Steps

  1. 1Choose native elements: button not clickable-div, real headings in order
  2. 2Use landmarks (nav, main, aside) so screen readers can jump regions
  3. 3Label every input visibly; placeholder is not a label
  4. 4Reserve ARIA for composite widgets you truly build custom
  5. 5Test heading outline reads like the page's table of contents
  6. 6Keep interactive targets 24px minimum with adequate spacing

Common Pitfalls

  • ▲aria-label duplicating visible text, read twice
  • ▲Skip-links pointing to containers lacking tabindex

Commands

Install with skills CLI
$ npx skills add aniruddhaadak80/skills --skill accessibility-semantic-first-markup
Install globally
$ npx skills add aniruddhaadak80/skills --skill accessibility-semantic-first-markup -g

Tags

#html#a11y#frontend-engineering#accessibility

Related skills

Run a practical accessibility audit passintermediate

Combine automated scans with keyboard and screen-reader passes to find issues tools miss.

🎨 Frontend Engineering·~40m
Open →