Agent Skills
› NeverSight/learn-skills.dev
› modern-accessible-html-jsx
modern-accessible-html-jsx
GitHub指导生成语义化、高可访问性的HTML与JSX代码。强调优先使用语义标签，确保键盘导航和屏幕阅读器兼容，规范表单关联与图片替代文本，避免滥用ARIA，以无障碍为开发基线。
Trigger Scenarios
编写HTML结构
创建JSX组件
优化网页可访问性
设计表单交互
Install
npx skills add NeverSight/learn-skills.dev --skill modern-accessible-html-jsx -g -y
SKILL.md
Frontmatter
{
"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/spanusage 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-labelor 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
alttext 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
mainregion - 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
Version History
- e0220ca Current 2026-07-05 22:49
