| name | modern-accessible-html-jsx |
| description | Write clean, modern, and highly accessible HTML & JSX code, using semantically correct elements and attributes. Use when working on HTML / JSX code. |
Clean & Accessible HTML
We write semantic, accessible, standards-compliant HTML by default.
Accessibility is a baseline requirement, not an enhancement.
Semantics First
- PREFER semantic elements (
header, nav, main, section, article, footer)
- AVOID generic
div/span usage when a semantic element exists
- Use correct heading hierarchy (
h1 → h6) without skipping levels
Accessibility
- ALWAYS ensure interactive elements are keyboard accessible
- PREFER native HTML elements over ARIA whenever possible
- DO NOT use ARIA to fix bad HTML semantics
- Provide accessible names for all interactive controls
- Labels for inputs
aria-label or visible text where required
Forms & Inputs
- ALWAYS associate labels with form controls
- PREFER native validation and input types (
email, url, number, etc.)
- Ensure error messages are accessible and announced properly
Images & Media
- ALWAYS provide meaningful
alt text for images
- Use empty
alt="" only for purely decorative images
- Provide captions (
figcaption) where context matters
Landmarks & Structure
- Use landmark roles implicitly via semantic elements
- Ensure a single, clear
main region
- Structure content for screen readers, not just visual layout
General Principles
- HTML is the foundation — do not fight it
- Accessibility is non-negotiable
- If it works without CSS or JS, it’s probably correct
