信息和关系

要求内容

凡是一眼可见的信息——这段粗体大字是标题、这些行构成数据表格、这组字段属于”账单地址”、此星号表示必填——都必须同样体现在底层代码中。屏幕阅读器、语音控制软件和重排引擎只能读取标记语言。如果某种关系仅通过视觉表达（较大的字体、较粗的边框、缩进），辅助技术将无从获知。

如何满足要求

• 使用真实的标题元素（<h1> 至 <h6>），按照逻辑嵌套顺序排列——绝不用样式化的 <div> 来模拟标题。
• 使用 <ul>、<ol> 和 <li> 标记列表——而非用换行符或项目符号字符分隔的段落。
• 数据表格使用 <table>，并配合 <th scope="col"> / <th scope="row"> 及描述表格用途的 <caption>。
• 每个表单控件都需要程序化标签：<label for="...">、aria-labelledby 或 aria-label。占位符文字不能替代标签。
• 使用 <fieldset> 和 <legend> 对相关表单字段分组，或对自定义组件使用 role="group" 配合 aria-labelledby。
• 图形和说明使用 <figure> 和 <figcaption>；定义对使用 <dl> / <dt> / <dd>。
• 必填字段需同时通过视觉（星号）和程序化方式（aria-required="true" 或 required 属性）加以标注。

常见失败情形

• 使用 <div class="heading-1"> 代替 <h1>——视觉上正确，但屏幕阅读器无法识别。
• 使用布局表格实现视觉分栏，或用没有 <th> 单元格的 <div> 网格构建数据表格。
• 表单字段仅有占位符标签——获得焦点时标签消失，屏幕阅读器可能无法正确朗读。
• 用 <p>•&nbsp;Item</p> 模拟项目符号，而非使用真实的列表标记。
• 必填字段星号仅通过红色 CSS 显示，却没有 aria-required 或 required 属性。
• 单选按钮组在视觉上有分组，却没有 <fieldset> / <legend>，导致屏幕阅读器用户看到的是孤立的选项，缺乏对应的问题。
• 数据表格的标题行样式为粗体，但使用的是 <td> 而非 <th>。

重要性

在 WCAG 审计中，1.3.1 是继 1.1.1 和 1.4.3 之后被引用次数最多的成功准则。每个 CMS 生成的页面、每个营销落地页、每个自定义表单组件，往往都会在某处违反此准则。修复方法几乎总是使用语义化 HTML，而非 ARIA——当你需要用 role="heading" 来修复一个本该是 <h2> 的 <div> 时，问题已经从根本上产生了。