SuperAPI AI 工具集

modern-accessible-html-jsx

前端与建站

查看项目

更新于 10-15 09:51

技能介绍

用途

该技能面向 HTML 与 JSX 代码的编写工作,目标是在默认情况下产出语义化、可访问、符合标准的 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 / JSX 代码时使用。资料未提供具体的安装命令、调用方式或配置步骤。

适用场景

适用于需要编写、审查或维护 HTML 与 JSX 代码的前端开发场景,尤其是对语义化、可访问性和标准合规性有要求的项目。

一般原则

  • HTML 是基础——不要与之对抗。
  • 可访问性不可妥协。
  • 如果代码在没有 CSS 或 JS 的情况下仍能正常工作,那它很可能是正确的。

限制

资料未提供关于收费、价格、平台支持范围、性能效果或具体使用步骤的信息。