structure

面向辅助技术的结构设计

构建辅助技术能够解析、浏览并准确呈现的内容结构——让你设计的结构成为每位用户实际体验到的结构。

流程

第 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 描述操作
• 信息性：alt 描述信息
• 复杂：简短 alt 加详细描述

第 4 步：设计数据结构

使用 table-accessibility 处理每个表格：

• 使用正确的 scope 指定表头
• 添加说明表格内容的标题
• 规划小屏幕上的响应式行为

第 5 步：设计表单结构

使用 form-labelling 处理每个表单：

• 为每个输入项关联可见标签
• 使用 fieldset/legend 对相关字段分组
• 规划错误消息的关联方式
• 定义必填字段的标示策略

第 6 步：定义阅读顺序

• 验证 DOM 顺序与视觉顺序一致
• 内容按从上到下的线性顺序阅读时应通顺易懂
• 避免使用 CSS 让内容的视觉顺序与 DOM 顺序不一致
• Tab 键顺序应遵循阅读顺序

输出

提交一份结构规范，包含：

• 文档大纲（标题层级）
• 地标映射
• 按图像类型划分的替代文本策略
• 表格结构规范
• 表单标注规范
• 阅读顺序确认