Callout：提示块与强调说明
Callout 是嵌在正文流里、用边框、底色或图标与周围文字区分开的说明块，承载提示、注意、警告、小技巧这类“读到这里时需要多知道一点”的内容。它随页面一起加载并长期存在，与 Banner（全站或区域级的时效通知）和 Toast（对一次操作的瞬时反馈）不同：Callout 属于某一段内容，位置就是它的语境。
适合与不适合
适合：紧贴某个步骤或字段的补充说明（尺码偏大、需要另购配件）、例外与限制的强调、容易踩坑的操作提醒、经过核实的小技巧。不适合：决定顾客是否下单的关键条件只放在 Callout 里；整页都是 Callout（强调过多等于没有强调）；用它替代正文结构，把本该写进步骤的内容挪到旁边；用它承载临时促销通知（那是 Banner 的职责）。
与相邻模式的区别
| 相邻模式 | 判据 | 说明 |
|---|---|---|
| Banner | 归属与时效 | Banner 属于全站或区域，有起止时间；Callout 属于某段正文，随该内容存在 |
| Toast | 是否由操作触发、是否消失 | Toast 回应刚发生的操作并消失；Callout 在页面加载时就在，不因时间消失 |
| Modal | 是否打断 | Modal 阻断背景并要求处理；Callout 不打断，读者可以直接跳过，所以必读信息不能只放在 Callout |
| Accordion | 是否默认可见 | Accordion 默认折叠次要内容；Callout 的价值就是默认可见 |
| Inline Form 的字段错误 | 是否属于某个字段 | 字段错误关联到字段并随修正消失；Callout 是静态说明，不替代字段级错误 |
优点与缺点
| 优点 | 缺点 |
|---|---|
| 让例外、限制在上下文中就近可见 | 数量一多，读者学会忽略 |
| 同一组件可按级别复用，风格统一 | 级别只靠颜色区分时对部分读者失效 |
| 结构简单，无 JavaScript 也可用 | 容易被用来“藏”本该进正文的条件 |
| 可以折叠为普通段落而不丢内容 | 各级别的文案与配色需要持续治理 |
内容与交互要求
级别数量宜少，建议按“信息”“注意”“警告”三档，并在文字里直接写出级别（“注意：”“警告：”），不只靠图标或颜色。这是设计建议，不是标准要求。每个 Callout 只讲一件事，第一句说结论与影响，例如（虚构示例）“定制商品不支持无理由退货，下单前请确认尺寸”。
关键购买条件必须直接放进流程。 本库配送与时效信息要求地区限制、免运费门槛、关税收取方放在商品页、购物车或结账前可见处，不藏在 FAQ；保证详情要求摘要不能比正式承诺更宽并可追溯到完整条款。Shipping & Returns 页面配方把“例外条件”定为 Callout + 正文，条件是“必须在行动前看到”，退化方式是“直接放入相应步骤”。合起来的做法：Callout 是对正文中条件的强调，正文与步骤里必须有同一条完整表述，删掉 Callout 后信息不能丢。
默认不提供关闭按钮；确需可关闭的（如“小技巧”），只能用于丢失后不影响决定的内容，关闭状态不要影响其他读者。
响应式与无障碍
语义选择，先用原生结构。 MDN 说明 <aside> 表示与主内容只有间接关联的部分，常呈现为侧栏或提示框；它默认对应 complementary，仅当没有可访问名称且嵌套在分节内容中时才是 generic。所以直接关联的条件不应写成 <aside>。MDN 的 note 角色用于“旁注性质”的内容，并说明在没有其他原生元素或角色合适时才使用；命名可选，有可见标题时用 aria-labelledby，否则 aria-label。多数 Callout 一个带文字级别的普通段落或 div 就够，只有旁注性质明确时再加 role="note"。
动态出现的才用 live 角色。 MDN 的 status 是隐含 aria-live="polite" 的实时区域，用于不足以打断读者的说明，不要给它焦点；alert 隐含 aria-live="assertive" 与 aria-atomic="true"，MDN 明确它用于动态显示的内容而不是页面加载时就存在的内容，且应克制使用。APG 的 Alert 模式同样要求不影响键盘焦点，并要求需要打断时改用 Alert Dialog。因此页面加载时就在的 Callout 不加任何 live 角色；提交后才出现的错误提示用 alert，出现后的说明性结果用 status，容器要先存在于 DOM 再写入内容。
级别不能只靠颜色或图标。 WCAG 2.2 的 1.4.1 Use of Color（A）要求颜色不是传达信息、指示操作、提示响应或区分视觉元素的唯一视觉手段；理解文档的例子是必填字段既有红色又有图标。所以用文字标签表达级别，图标仅作辅助，纯装饰图标不朗读。
对比度。 1.4.3 Contrast (Minimum)（AA）要求正常文本对比度至少 4.5:1，大号文本至少 3:1；底色变化后要重新检查，尤其是浅黄警告底与深色正文的组合。1.4.11 Non-text Contrast（AA）要求识别界面组件所需的图形信息与必要的图形对象对相邻颜色至少 3:1；关闭按钮的图标属于此类。级别标签已经用文字表达时，边框或底色是否算“必要的图形信息”是判断题，稳妥做法是让承载含义的图标与边框也达到 3:1。
状态与退化
- 零项：没有需要强调的内容就不渲染，不放空框。
- 一项与多项：同一屏建议不超过两个；同级别连续出现时合并，或把内容回收到正文。
- 加载：随内容一起服务端输出；依赖运行时数据的 Callout（如“该地区不可送达”）在数据未取得时不渲染，不沿用旧结论。
- 错误：由数据判定的 Callout 无法判定时，宁可不显示，也不显示可能错误的限制或承诺。
- 无 JavaScript：Callout 是普通静态标记，应完整可读。
- 减少动态：不使用入场动画、抖动或脉冲吸引注意。
常承载的内容与模块
例外与限制：配送与时效信息中的限运地区与关税说明、保证详情中的排除项，业务页面用法见 Shipping & Returns 页面。也常见于尺码与适配指引里的选码提醒。这些内容的事实来源与复核由各自的内容类型负责，Callout 只负责强调。
发布前检查
- 删掉 Callout 后，正文里是否仍有同一条完整的条件？
- 级别是否用文字写出，而不只是颜色或图标？
- 文字、图标与边框的对比度是否达标，深浅两种主题都检查了吗？
- 是否只有动态出现的提示才使用
status或alert，页面加载时就在的是否没有 live 角色？ - 同屏数量是否受控，可关闭的是否只承载可丢失的信息？
- 由数据决定的 Callout 在数据缺失时是否不显示？
待继续完善
- 没有在读屏软件中实测
role="note"的播报，MDN 页面也未给出各读屏软件的支持情况。 - 级别划分与配色缺少统一的设计令牌，本文只给出设计建议。
- 可关闭 Callout 的持久化与跨会话行为未展开。