SuperAPI AI 工具集

structure

设计与创作

查看项目

更新于 10-16 03:14

技能介绍

用途:构建辅助技术可解析、可导航、可理解的内容结构,让设计出的结构与所有用户实际体验到的结构一致。

主要能力与流程:

  1. 定义文档大纲:使用 heading-structure 设计标题层级,一个 H1 描述页面用途,H2 用于主要区块,H3 用于子区块;检查仅读标题是否能讲清完整内容。
  2. 识别地标:映射辅助技术用于导航的页面区域,包括 banner(站点头部与品牌)、navigation(主导航与次级导航)、main(主要内容区)、complementary(侧栏与相关内容)、contentinfo(页脚)、search(搜索功能)、form(重要表单,多个时用 aria-label 区分)。每页至少应包含 banner、navigation、main、contentinfo。
  3. 结构化图片与媒体:使用 alt-text-design 为每张图片确定替代文本策略——装饰性用空 alt,功能性描述动作,信息性描述信息,复杂图片用简短 alt 加扩展描述。
  4. 结构化数据:使用 table-accessibility,为每个表格设置带正确 scope 的表头、添加描述表格内容的 caption,并规划小屏幕下的响应式行为。
  5. 结构化表单:使用 form-labelling,为每个输入关联可见标签,用 fieldset/legend 分组相关字段,规划错误信息关联,定义必填字段的提示策略。
  6. 定义阅读顺序:确认 DOM 顺序与视觉顺序一致,内容自上而下线性阅读时通顺,避免用 CSS 将内容视觉重排而偏离 DOM 顺序,Tab 顺序应遵循阅读顺序。

输出:交付结构规范,包含文档大纲(标题层级)、地标图、按图片类型划分的替代文本策略、表格结构规范、表单标注规范以及阅读顺序确认。

限制:资料未提供具体安装命令、平台支持范围、收费方式或效果数据,暂未提供。