表单错误摘要（Error Summary）是一个位于表单顶部的汇总区域，在用户提交表单后集中展示所有验证错误。它解决了三个核心痛点：

1. 错误不可见：长表单中，错误可能散布在用户看不到的折叠区域或页面下方，用户不知道有多少错误、在哪里。
2. 逐一修复低效：没有摘要时，用户需要逐个滚动查找错误字段，修复效率低下。
3. 可访问性缺失：屏幕阅读器用户无法快速了解整体错误情况，错误摘要配合 role="alert" 可即刻播报。

优秀的案例参考：Gov.uk 设计系统的 Error Summary 组件，已成为表单错误处理的行业标杆。

错误摘要必须放在表单的最顶部，紧邻表单标题下方、第一个表单字段上方。这样确保：

• 视口聚焦时用户第一眼就能看到
• 屏幕阅读器在用户导航到表单时立即播报
• 对于长表单，用户在滚动前就能了解全局错误情况

如果表单非常长（如多步骤表单），建议在每个步骤的顶部都放置独立的错误摘要。

两者互补，推荐同时使用：

错误摘要（顶部汇总）：提供全局视角，告知用户有多少错误、在哪些字段，点击可快速跳转。适合提交后首次反馈。
行内错误提示（字段旁）：提供精准的字段级说明，告知具体如何修正。适合实时验证和聚焦后的细节展示。

最佳实践：提交时在顶部展示错误摘要 + 每个错误字段旁显示行内提示；用户修正过程中，实时更新行内提示并从摘要中移除已修复项。这正是本工具演示的完整流程。

实现无障碍错误摘要的关键要点：

• role="alert" 或 aria-live="assertive"：确保错误摘要出现时屏幕阅读器立即播报
• tabindex="-1"：允许通过 JavaScript 将焦点移到摘要容器上
• 每个错误项使用 <a> 标签，href 指向对应字段的 id，确保键盘用户可通过 Enter 跳转
• 错误链接文本应清晰描述错误内容，而非仅写"点击这里"
• 跳转后目标字段应获得焦点（设置 tabindex="-1" 并使用 .focus()）
• 使用 aria-describedby 关联字段与行内错误提示

常见实现模式：

1. Gov.uk 风格：红色左边框 + 浅粉背景 + 加粗标题 + 错误链接列表。最受推崇的模式，本工具即参考此设计。
2. Bootstrap Alert 风格：使用 alert-danger 组件，适合快速集成。
3. Toast / Snackbar 风格：短暂弹出提示，适合简单表单但可访问性较弱。
4. 模态框风格：弹出对话框展示错误，会打断用户操作流，不推荐。

高级变体：
• 分类摘要：按错误类型（必填缺失、格式错误、规则不符）分组展示
• 进度摘要：显示"已修复 3/5 个错误"的进度指示
• 实时迷你摘要：在表单侧边栏固定显示，随修复动态更新

集成步骤：

1. 在表单顶部放置错误摘要容器（初始隐藏）
2. 为每个表单字段设置唯一的 id 属性
3. 编写验证规则函数，返回每个字段的错误信息
4. 表单提交时收集所有错误，动态生成摘要的 <ul> 列表
5. 为每个错误创建 <a href="#fieldId"> 链接
6. 绑定点击事件，实现平滑滚动和字段聚焦
7. （可选）添加实时验证，修正后从摘要中移除对应项

上方代码面板中的 HTML 结构可直接参考使用。核心 CSS 仅需约 30 行，JS 逻辑约 60 行即可实现完整功能。