Learn-skills.dev modern-accessible-html-jsx

claude-code

Learn-skills.dev modern-accessible-html-jsx

Write clean, modern, and highly accessible HTML & JSX code, using semantically correct elements and attributes

install

source · Clone the upstream repo

git clone https://github.com/NeverSight/learn-skills.dev

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/NeverSight/learn-skills.dev "$T" && mkdir -p ~/.claude/skills && cp -r "$T/data/skills-md/academind/ai-config/modern-accessible-html-jsx" ~/.claude/skills/neversight-learn-skills-dev-modern-accessible-html-jsx && rm -rf "$T"

manifest: data/skills-md/academind/ai-config/modern-accessible-html-jsx/SKILL.md

source content

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