SuperAPI AI 工具集

heading-structure

设计与创作

查看项目

更新于 10-16 09:49

技能介绍

用途:为页面、文章、仪表盘等内容设计标题层级与内容结构,使屏幕阅读器用户和认知障碍用户都能顺利导航和理解内容。屏幕阅读器用户依靠标题在页面间跳转,若层级混乱就会迷失在无差别的文本中;对认知障碍用户而言,标题是判断页面包含哪些内容、在哪里找到所需信息的主要方式。

主要能力与规则:

  1. 每页仅一个 H1。H1 代表页面主题,应与页面 title 标签及引导用户前来的链接一致或高度相关,不得出现多个 H1。
  2. 不跳过层级。遵循 H1→H2→H3,不可 H1→H3;跳过层级会破坏屏幕阅读器导航并扰乱文档大纲。允许向上返回,如 H3→H2 表示开启新章节。
  3. 标题描述内容。标题是指路牌而非装饰,应写“Your Account Settings”而非“Section 2”,写“Choose a Delivery Date”而非“Step 3”;用户只读标题就应能理解页面内容。
  4. 标题不用于视觉样式。不要仅为加粗放大而使用标题标签,也不要跳过标题标签只把文本样式做成标题外观。标签决定结构,CSS 决定外观;看起来像标题但不是标题,屏幕阅读器用户就无法找到它。

推荐深度:多数页面 H1 到 H3 足够;复杂页面最多到 H4。若需要 H5 或 H6,说明页面过于复杂,建议拆分。

常见结构模式:文章/博客为 H1 文章标题,下辖 H2 主要章节与 H3 子章节,末段 H2 结论;仪表盘为 H1 名称,下辖 H2 摘要/关键指标、最近活动、任务、通知;表单为 H1 表单标题,下辖 H2 个人信息、联系方式、偏好、检查并提交;设置页为 H1 设置,下辖 H2 个人资料、通知、隐私、账单。

自查清单:每页恰好一个 H1;无跳级;标题描述其下内容;标题标签用于结构而非视觉样式;仅读标题即可理解页面;标题深度不超过 H4。

限制:资料未提供具体实现代码、框架用法、安装命令、收费方式或浏览器兼容性等细节,暂未提供。