SuperAPI AI 工具集

semantic-html

前端与建站

查看项目

更新于 10-16 08:45

技能介绍

该技能用于在创建组件或页面区块、审查标记的无障碍与语义、判断原生元素与 ARIA 取舍、规划标题层级、构建表单以及制作响应式表格时提供指导。

核心原则:内容真实性,需考虑长词句、多比例图片、多语言与动态内容,避免理想化占位符掩盖换行与溢出问题;先规划整页地标与标题层级;优先使用原生 HTML 元素而非 ARIA,遵循 ARIA 第一法则;CSS 类传达的状态对辅助技术不可见,需用 aria-current、aria-selected、aria-checked 或视觉隐藏文本补充;已有可见标题时优先用 aria-labelledby 而非 aria-label;避免冗余 ARIA(如 ul role=list、img alt="" role=presentation、form role=search 嵌套在 search 内)。

文档结构:跳过导航链接应为 body 首个可聚焦元素,主链接指向 main,main 加 tabindex="-1" 以便焦点移动;侧边栏布局需加跳转到导航链接。地标元素包括 header、footer、nav、main、aside、search、form、article、section;main 每页仅一个且须包含主 h1;section 需通过 aria-labelledby 关联标题才成为地标;article 用于可独立理解的内容;address 用于作者或所有者联系信息而非普通邮寄地址;aside 与 section 的取舍看移除后页面主旨是否仍完整;拉引用用 aside 加 p,外部引用才用 blockquote。

标题层级:每页一个 h1,不跳级,分组列表需在 h1 与条目标题间加 h2 区段标题;组件内标题层级应可配置并给默认值。仅视觉像标题时可用 CSS 类而不改变大纲。

资料未提供完整的列表与表单部分内容。