Modern Accessible Html Jsx

---
name: modern-accessible-html-jsx
description: Write clean, modern, and highly accessible HTML & JSX code, using semantically correct elements and attributes
---

# 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