skills.rest
Mohamedghaly140
Mohamedghaly140COMMUNITY
Explore all skills by this author →
Website𝕏@mohamedghaly140GitHub

modern-accessible-html-jsx

Improve semantic HTML and accessible JSX in web UI components.

Updated Apr 12, 2026
Search Tags:#html#a11y#jsx#ux#semantics#accessible#web-accessibility
One-click install
npx skills add https://github.com/Mohamedghaly140/sg-shop-web --skill modern-accessible-html-jsx-mohamedghaly140
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: modern-accessible-html-jsx
Source: https://github.com/Mohamedghaly140/sg-shop-web/tree/main/.claude/skills/modern-accessible-html-jsx
Command: npx skills add https://github.com/Mohamedghaly140/sg-shop-web --skill modern-accessible-html-jsx-mohamedghaly140

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps developers and designers ensure that HTML and JSX code is semantic, accessible, and standards-compliant by default, reducing accessibility gaps and rework.

Core Features & Use Cases

  • Semantic Elements First: Prefer header, nav, main, section, article, and footer over non-semantic divs where possible.
  • Accessibility Best Practices: Ensure keyboard operability, meaningful labels, proper ARIA usage only when needed.
  • Use Case: Convert an inaccessible form with misplaced labels into a accessible form with proper labels and error narration.

Quick Start

Use the skill to refactor a component's JSX to replace divs with semantic elements and add accessible labels.

Frequently Asked Questions about modern-accessible-html-jsx

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I make my JSX components accessible and semantic?▼

To make JSX components accessible, replace non-semantic divs with semantic HTML elements like header, nav, main, and footer, and enforce proper ARIA usage only when necessary. This ensures consistent semantics, keyboard navigation, and accessible naming.

What is the best way to structure HTML for web accessibility?▼

The best way to structure HTML for web accessibility is using semantic elements first, ensuring keyboard operability, meaningful labels, and proper heading structure. This approach reduces accessibility gaps and standards-compliance rework.

How do I fix inaccessible forms with misplaced labels in JSX?▼

Fix inaccessible JSX forms by refactoring them to include proper labels and error narration. This ensures keyboard operability and meaningful accessible naming for users navigating web UI components.

When do I need ARIA attributes for keyboard navigation in web UI?▼

You need ARIA attributes for keyboard navigation only when native semantic HTML cannot provide the required accessibility. Enforce proper ARIA usage to ensure keyboard operability and accessible naming without overusing redundant attributes.

Does this web accessibility approach work with standard HTML and JSX templates?▼

Yes, this web accessibility approach works with standard HTML and JSX templates. It can be applied directly to web UI components and pages to enforce semantic element usage and consistent accessibility standards.

Related Skills

Explore More Design & Creative Skills→
DanielPodolskyDanielPodolsky
274

accessibility-fundamentals

Identify and fix accessibility issues in JSX UI components using WCAG, ARIA, and keyboard navigation.

Community
Basic
Nickalus12Nickalus12
2

a11y-audit

Audit Loom-style applications for WCAG violations and ARIA usage.

Community
Advanced
pelcherspelchers

ensuring-accessibility

Implement WCAG 2.1 AA-compliant accessibility patterns for web interfaces.

Community
Advanced
leboncoinleboncoin
92

check-accessibility

Automate WCAG 2.1 AA accessibility testing of Spark UI components with Playwright.

Official
Intermediate