先验证内容模型,再进行视觉设计
发布前先确定标题顺序、列表结构、链接文本以及表格是否真正表示二维数据。即使视觉整齐,用表格对齐卡片仍会损害辅助技术体验。
数据表需要简洁 caption、含义明确的 th,以及简单关系中的 scope。多级表头过于复杂时,简化表格或提供替代摘要通常更安全。
- 只使用一个 H1 并保持标题顺序。
- 脱离句子单独阅读链接。
- 不要用表格做布局。
在真实状态下测量对比度
普通文本、大文本、图标、焦点环、错误和禁用状态应分别评估。渐变或图片上的文字如果只测第一个颜色,可能隐藏最弱位置。
单一比率不能证明可用性。应在真实浏览器测试 200% 和 400% 缩放、深浅主题、高对比偏好以及不依赖颜色的含义。
让链接和元数据与页面承诺一致
链接文本应说明目标,并提示意外下载、新标签页或语言变化。本地 Markdown 检查可发现语法和危险协议,但离线时不能证明 404、TLS 或目标所有权。
标题、描述、canonical、Open Graph 和 favicon 必须反映真实页面。如果社交卡片承诺的内容在首屏找不到,会损害用户信任。
用真实用户流程完成自动化检查
使用键盘从导航到主要任务、错误消息和结果控件。需要横向滚动时,区域应可聚焦并带标签;不要用 CSS 静默隐藏重要列。
记录 URL、视口、缩放、主题、浏览器、辅助技术、预期和观察结果。单一浏览器或自动评分不能证明符合 WCAG。
此工作流中的工具与职责
每个工具提供不同证据,任何单一输出都不能批准整个流程。请从合成示例开始,执行验收检查;超过边界时不要进入下一步。
- HTML 表格无障碍检查器
- 颜色对比度检查器
- Markdown 链接完整性检查器
- Meta 标签 / Favicon 生成器
把指南转化为安全试用流程
使用真实资料前,请先在HTML 表格无障碍检查器中用合成数据试做《无障碍内容发布的证据化检查清单》的步骤。勾选状态只保留在当前标签页。
把指南转化为可重复的检查流程
请使用这套包含 4 个工具的检查计划来落实《无障碍内容发布的证据化检查清单》。目标:以键盘、缩放、屏幕阅读器和真实分享预览补充自动预检的无障碍发布工作流。 请先用安全示例代替真实数据,并记录每一步的预期结果与验收决定。
HTML 表格无障碍检查器
- 准备
- 添加包含表格的 HTML 片段。
- 执行
- 运行标记检查。
- 验收检查
- 使用键盘和屏幕阅读器测试真实页面。
- 预期输出
- 行列统计、规范化记录以及问题单元格位置. 查找 HTML 表格标记中缺失的标题、表头单元格、scope 和复杂关联。
颜色对比度检查器
- 准备
- 受支持的颜色、CSS、SVG、图像或尺寸值处理敏感真实数据前,请先用合成示例确认格式。
- 执行
- 运行设备端处理。使用浏览器 API 和公开的转换公式处理数值,同时保留源内容。
- 验收检查
- 验收检查:在浅色/深色背景、不同屏幕尺寸、目标应用及源内容之间进行视觉比较请保留源文件,并在目标应用中验证输出兼容性。
- 预期输出
- 可预览的视觉值、尺寸或格式摘要,以及可复制或下载的结果. 按 WCAG 对比度与文本阈值比较两种颜色。
Markdown 链接完整性检查器
- 准备
- 粘贴 Markdown 源文。
- 执行
- 运行本地链接检查。
- 验收检查
- 在发布环境中另行验证远程目标。
- 预期输出
- 编辑后的文本、变更摘要以及可量化的语言或结构指标. 无需网络请求即可查找 Markdown 中的断开引用、不安全协议和重复定义。
Meta 标签 / Favicon 生成器
- 准备
- 类型受支持且不超过公开大小限制的本地文件处理敏感真实数据前,请先用合成示例确认格式。
- 执行
- 运行设备端处理。文件在浏览器内存中读取,并在不覆盖原文件的情况下生成新输出。
- 验收检查
- 验收检查:保留原文件,并检查输出能否正常打开、预期页数或帧数、大小及可见质量请在目标系统核验架构、编码和数据丢失假设。
- 预期输出
- 可下载的新文件、大小与格式指标,以及公开的处理限制. 生成 SEO、Open Graph、社交卡片与 Favicon 标记。
HTML 表格无障碍检查器适用以下边界:语言、语义和上下文仍需人工最终审核。 如果未满足该条件,请勿把输出传递到工作流的下一步。
落实《无障碍内容发布的证据化检查清单》时,请记录工具名称、所选设置、浏览器版本,以及“内容发布检查 — 查找 HTML 表格标记中缺失的标题、表头单元格、scope 和复杂关联。”的接受或拒绝理由,而不是敏感内容。这样既能重复检查,也不会复制真实数据。