用途
该技能面向需要编写 HTML 与 JSX 的开发场景,目标是在默认情况下产出语义化、可访问、符合标准的标记代码。它把可访问性定位为基线要求,而不是事后增强,适用于任何需要构建网页结构、组件模板或前端界面的工作。
主要能力
语义优先
- 优先使用语义元素:header、nav、main、section、article、footer。
- 当存在语义元素时,避免使用通用的 div/span。
- 使用正确的标题层级(h1 → h6),不跳过层级。
可访问性
- 始终确保交互元素可通过键盘访问。
- 尽可能优先使用原生 HTML 元素,而非 ARIA。
- 不要使用 ARIA 来修补错误的 HTML 语义。
- 为所有交互控件提供可访问名称:输入框使用 label,必要时使用 aria-label 或可见文本。
表单与输入
- 始终将标签与表单控件关联。
- 优先使用原生校验和输入类型(email、url、number 等)。
- 确保错误信息可访问并能被正确播报。
图片与媒体
- 始终为图片提供有意义的 alt 文本。
- 仅对纯装饰性图片使用空 alt=""。
- 在上下文重要时提供说明文字(figcaption)。
地标与结构
- 通过语义元素隐式使用地标角色。
- 确保存在单一、清晰的 main 区域。
- 面向屏幕阅读器组织内容,而不仅仅是视觉布局。
使用方式
该技能以规则集的形式指导 HTML 与 JSX 的编写。在生成或审查标记代码时,按照上述语义、可访问性、表单、媒体和结构要求执行。资料中未提供具体的安装命令、调用方式或代码示例,因此这些内容暂未提供。
适用场景
适用于需要构建网页结构、前端组件、表单、导航、内容区域等任何涉及 HTML 或 JSX 标记的开发任务,尤其适合对可访问性和语义化有要求的项目。
限制
资料中未说明该技能支持的平台、依赖环境、收费方式或具体效果,这些内容暂未提供。总体原则为:HTML 是基础,不要与之对抗;可访问性不可妥协;如果去掉 CSS 或 JS 仍能正常工作,那大概率是正确的。