mcpField
M
modern-accessible-html-jsx

modern-accessible-html-jsx

github.com/academindDevelopment1152 installsUpdated 40w ago
Repository

About modern-accessible-html-jsx

A skill for developers building accessible pages with HTML and JSX. It emphasizes semantic structure, native HTML, and keyboard access.

Key features

  1. 01Prefer semantic HTML elements
  2. 02Follow a correct heading hierarchy
  3. 03Make interactive controls keyboard-accessible
  4. 04Associate labels with form controls
  5. 05Provide meaningful image alt text

Use cases

  1. 01Writing page structure for websites
  2. 02Implementing keyboard-accessible interactions
  3. 03Building forms with accessible error messages

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/academind/ai-config --skill modern-accessible-html-jsx

After installing, type/modern-accessible-html-jsxin Claude Code to confirm it loaded.

Details

From the project README

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

Comments

Markdown supported