行动计划

把指南转化为安全试用流程

在使用真实数据前,请先用合成示例完成这些步骤。勾选状态只保留在当前标签页。

0%0/4 已完成
  1. 打开工具
  2. 打开工具
  3. 打开工具
  4. 打开工具

此清单不创建账户、不向服务器发送数据,并会在刷新页面后清除。

01

先验证内容模型,再进行视觉设计

发布前先确定标题顺序、列表结构、链接文本以及表格是否真正表示二维数据。即使视觉整齐,用表格对齐卡片仍会损害辅助技术体验。

数据表需要简洁 caption、含义明确的 th,以及简单关系中的 scope。多级表头过于复杂时,简化表格或提供替代摘要通常更安全。

  • 只使用一个 H1 并保持标题顺序。
  • 脱离句子单独阅读链接。
  • 不要用表格做布局。
02

在真实状态下测量对比度

普通文本、大文本、图标、焦点环、错误和禁用状态应分别评估。渐变或图片上的文字如果只测第一个颜色,可能隐藏最弱位置。

单一比率不能证明可用性。应在真实浏览器测试 200% 和 400% 缩放、深浅主题、高对比偏好以及不依赖颜色的含义。

03

让链接和元数据与页面承诺一致

链接文本应说明目标,并提示意外下载、新标签页或语言变化。本地 Markdown 检查可发现语法和危险协议,但离线时不能证明 404、TLS 或目标所有权。

标题、描述、canonical、Open Graph 和 favicon 必须反映真实页面。如果社交卡片承诺的内容在首屏找不到,会损害用户信任。

04

用真实用户流程完成自动化检查

使用键盘从导航到主要任务、错误消息和结果控件。需要横向滚动时,区域应可聚焦并带标签;不要用 CSS 静默隐藏重要列。

记录 URL、视口、缩放、主题、浏览器、辅助技术、预期和观察结果。单一浏览器或自动评分不能证明符合 WCAG。

05

此工作流中的工具与职责

每个工具提供不同证据,任何单一输出都不能批准整个流程。请从合成示例开始,执行验收检查;超过边界时不要进入下一步。

  • HTML 表格无障碍检查器
  • 颜色对比度检查器
  • Markdown 链接完整性检查器
  • Meta 标签 / Favicon 生成器
应用核验

把指南转化为可重复的检查流程

请使用这套包含 4 个工具的检查计划来落实《无障碍内容发布的证据化检查清单》。目标:以键盘、缩放、屏幕阅读器和真实分享预览补充自动预检的无障碍发布工作流。 请先用安全示例代替真实数据,并记录每一步的预期结果与验收决定。

01

HTML 表格无障碍检查器

准备
HTML 表格无障碍检查器的输入应为表头和行结构一致的 CSV、TSV、表格或分隔记录。本次处理目标是:查找 HTML 表格标记中缺失的标题、表头单元格、scope 和复杂关联。处理敏感真实数据前,请先用合成示例确认格式。
执行
运行设备端处理。HTML 表格无障碍检查器为实现“查找 HTML 表格标记中缺失的标题、表头单元格、scope 和复杂关联”采用以下可解释方法:分隔符、引号、行边界和列边界会分别检查。
验收检查
验收检查:接受HTML 表格无障碍检查器的结果前,请完成核对表头数量、行宽、引号转义,并在目标表格中打开代表性记录;核验证据应与“查找 HTML 表格标记中缺失的标题、表头单元格、scope 和复杂关联”这一目标一致。HTML 表格无障碍检查器的使用边界:语言、语义和上下文仍需人工最终审核。
预期输出
HTML 表格无障碍检查器完成后会提供行列统计、规范化记录以及问题单元格位置,并围绕“查找 HTML 表格标记中缺失的标题、表头单元格、scope 和复杂关联”组织结果。. 查找 HTML 表格标记中缺失的标题、表头单元格、scope 和复杂关联。
02

颜色对比度检查器

准备
颜色对比度检查器的输入应为受支持的颜色、CSS、SVG、图像或尺寸值。本次处理目标是:按 WCAG 对比度与文本阈值比较两种颜色。处理敏感真实数据前,请先用合成示例确认格式。
执行
运行设备端处理。颜色对比度检查器为实现“按 WCAG 对比度与文本阈值比较两种颜色”采用以下可解释方法:使用浏览器 API 和公开的转换公式处理数值,同时保留源内容。
验收检查
验收检查:接受颜色对比度检查器的结果前,请完成在浅色/深色背景、不同屏幕尺寸、目标应用及源内容之间进行视觉比较;核验证据应与“按 WCAG 对比度与文本阈值比较两种颜色”这一目标一致。颜色对比度检查器的使用边界:请保留源文件,并在目标应用中验证输出兼容性。
预期输出
颜色对比度检查器完成后会提供可预览的视觉值、尺寸或格式摘要,以及可复制或下载的结果,并围绕“按 WCAG 对比度与文本阈值比较两种颜色”组织结果。. 按 WCAG 对比度与文本阈值比较两种颜色。
03

Markdown 链接完整性检查器

准备
Markdown 链接完整性检查器的输入应为在保留用途和目标语言的前提下需要编辑或比较的纯文本。本次处理目标是:无需网络请求即可查找 Markdown 中的断开引用、不安全协议和重复定义。处理敏感真实数据前,请先用合成示例确认格式。
执行
运行设备端处理。Markdown 链接完整性检查器为实现“无需网络请求即可查找 Markdown 中的断开引用、不安全协议和重复定义”采用以下可解释方法:在保留 Unicode、行和词边界的同时应用确定性文本规则。
验收检查
验收检查:接受Markdown 链接完整性检查器的结果前,请完成对可能改变语义的句子、专有名词、数字、标点和多语言字符进行前后比较;核验证据应与“无需网络请求即可查找 Markdown 中的断开引用、不安全协议和重复定义”这一目标一致。Markdown 链接完整性检查器的使用边界:语言、语义和上下文仍需人工最终审核。
预期输出
Markdown 链接完整性检查器完成后会提供编辑后的文本、变更摘要以及可量化的语言或结构指标,并围绕“无需网络请求即可查找 Markdown 中的断开引用、不安全协议和重复定义”组织结果。. 无需网络请求即可查找 Markdown 中的断开引用、不安全协议和重复定义。
04

Meta 标签 / Favicon 生成器

准备
Meta 标签 / Favicon 生成器的输入应为类型受支持且不超过公开大小限制的本地文件。本次处理目标是:生成 SEO、Open Graph、社交卡片与 Favicon 标记。处理敏感真实数据前,请先用合成示例确认格式。
执行
运行设备端处理。Meta 标签 / Favicon 生成器为实现“生成 SEO、Open Graph、社交卡片与 Favicon 标记”采用以下可解释方法:文件在浏览器内存中读取,并在不覆盖原文件的情况下生成新输出。
验收检查
验收检查:接受Meta 标签 / Favicon 生成器的结果前,请完成保留原文件,并检查输出能否正常打开、预期页数或帧数、大小及可见质量;核验证据应与“生成 SEO、Open Graph、社交卡片与 Favicon 标记”这一目标一致。Meta 标签 / Favicon 生成器的使用边界:请在目标系统核验架构、编码和数据丢失假设。
预期输出
Meta 标签 / Favicon 生成器完成后会提供可下载的新文件、大小与格式指标,以及公开的处理限制,并围绕“生成 SEO、Open Graph、社交卡片与 Favicon 标记”组织结果。. 生成 SEO、Open Graph、社交卡片与 Favicon 标记。
何时应停止?

HTML 表格无障碍检查器适用以下边界:HTML 表格无障碍检查器的使用边界:语言、语义和上下文仍需人工最终审核。 如果未满足该条件,请勿把输出传递到工作流的下一步。

检查记录

落实《无障碍内容发布的证据化检查清单》时,请记录工具名称、所选设置、浏览器版本,以及“使用HTML 表格无障碍检查器完成:查找 HTML 表格标记中缺失的标题、表头单元格、scope 和复杂关联”的接受或拒绝理由,而不是敏感内容。这样既能重复检查,也不会复制真实数据。