# Modern Accessible HTML Jsx

> Write clean, modern, and highly accessible HTML & JSX code

- Skill: `ddoman90/modern-accessible-html-jsx` (Agent Skill)
- Install (CLI): `npx skillmds@latest add ddoman90/modern-accessible-html-jsx`
- Raw SKILL.md: https://api.skillmd.com/api/skills/ddoman90/modern-accessible-html-jsx/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: ddoman90 (https://skillmd.com/u/ddoman90)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/ddoman90/modern-accessible-html-jsx

---


# Clean & Accessible HTML

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` 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, `aria-label`)

## Forms & Inputs

- **ALWAYS** associate labels with form controls
- **PREFER** native validation and input types (`email`, `url`, `number`)
- 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