关于 modern-accessible-html-jsx
一项指导 HTML 与 JSX 开发的技能，面向构建可访问网页的开发者。内容强调语义化结构、原生 HTML 和键盘可用性。
主要功能
- 01优先使用语义化 HTML 元素
- 02遵循正确的标题层级
- 03确保交互控件支持键盘操作
- 04为表单控件关联标签
- 05为图像提供有意义的替代文本
适用场景
- 01编写网页的页面结构
- 02实现便于键盘操作的交互界面
- 03构建带有可访问错误提示的表单
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/modern-accessible-html-jsx确认已加载。
详细介绍
整洁且无障碍的 HTML
默认情况下，我们编写语义清晰、无障碍且符合标准的 HTML。 无障碍是基本要求，而非锦上添花。
语义优先
- 优先使用语义元素（
header、nav、main、section、article、footer） - 避免在存在语义元素时使用通用的
div/span - 使用正确的标题层级（
h1→h6），不要跳过级别
无障碍
- 始终确保交互元素可通过键盘访问
- 尽可能优先使用原生 HTML 元素，而非 ARIA
- 不要使用 ARIA 来修正糟糕的 HTML 语义
- 为所有交互控件提供无障碍名称
- 为输入框添加标签
- 在需要时使用
aria-label或可见文本
表单与输入
- 始终将标签与表单控件关联
- 尽可能优先使用原生验证和输入类型（
email、url、number等） - 确保错误消息易于访问，并能正确播报
图像与媒体
- 始终为图像提供有意义的
alt文本 - 仅对纯装饰性图像使用空的
alt="" - 在上下文需要时提供说明文字（
figcaption）
地标与结构
- 通过语义元素隐式使用地标角色
- 确保只有一个明确的
main区域 - 为屏幕阅读器而非仅为视觉布局组织内容
通用原则
- HTML 是基础——不要与之对抗
- 无障碍不容妥协
- 如果无需 CSS 或 JS 就能正常工作，那它很可能就是正确的
评论
支持 Markdown