演示
观看检查器历史与功能的视频介绍,
或尝试编辑下方的演示内容、打开并关闭提示,
并使用工具栏 () 查看标题大纲。本演示包含核心测试和 CSA 套件。
本演示使用 TinyMCE 编辑器。Editoria11y 兼容大多数文本编辑器,并为 WordPress 和 Drupal 中的 CKEditor 及 Gutenberg 提供开箱即用的集成方案。
标题
此标题跳过了一个层级:
哎呀
此标题完全没有文字:
这个简短的块引用可能是标题:
我是伪标题
这个全粗体段落可能是标题:
我是伪标题
此标题非常长:
标题和子标题为辅助技术创建可导航的目录。数字表示嵌套关系中的缩进层级。标题过长可能意味着作者在标题中表达了过多内容。
图像的文字替代
此标题由一张没有替代文字的文字图像构成:
完全没有 alt 属性的图像:

具有无效 alt 属性的图像,例如 alt="'"

以文件名作为 alt 的图像

alt 中含有冗余文字的图像,例如"图片:"

alt 中含有冗余文字的链接图像,例如"图片:"
具有占位符 alt 的图像:

链接图像具有占位符 alt:
具有机器码 alt 的图像:

具有机器码 alt 的链接图像:
具有非常长的替代文字的图像:

链接中的图像,其 alt 文字可能描述的是图像而非链接
任何链接图像(默认关闭测试)
figure 中标记为装饰性的图像:
figure 中图像的 alt 与 figcaption 相同:
轮播图中没有 alt 的图像:
对比度
无法辨识的颜色组合:
非常清晰。
颜色需要人工检查:
无法计算。
对比度不足的 SVG 图形
对比度需要人工检查的 SVG 图形
嵌入内容与媒体
视频已标记为需要人工检查字幕:
音频需要提供文字稿:
缺少 title 且需要人工检查的 iframe:
无法聚焦的 iframe:
嵌套的交互组件
折叠面板
折叠面板
惊喜!有意义的链接
完全没有文字的链接
仅以 URL 作为标签的链接:
https://www.youtube.com/watch?v=DLzxrzFCyOs
仅以符号作为标签的链接:
名称相同但指向不同目标的链接
仅以 DOI 编号作为标签的链接:
doi.org/10.1145/3493612.3520468
使用无意义标签的链接:
没有文字替代的链接图标:
在新窗口打开但没有外部链接图标或文字提示的链接
指向 PDF 的链接
指向其他文档的链接
具有冗余 title 属性的链接
具有将其从 Tab 顺序中移除的属性的链接:
链接的 aria-labelledby 指向没有文字的元素:
aria 标签中含有泛泛词汇的链接:
没有替代文字的链接图像:
具有无法朗读的替代文字的链接图像:
没有 alt 属性的链接图像:
链接中含有文字但图像没有 alt 属性:
仅以文件名作为替代文字的链接图像:
具有异常长替代文字的链接图像:
页内链接失效
指向开发服务器的链接
重复锚点
表格
没有有效表头的表格
| 没有 TH 表头的表格无效 | 大纲标题不算数 | 表格内部应禁用内容标题测试 |
| 空表头 | |
|---|---|
| 我找到了 | 700 个关于乌龟的视频 |
| 每个 | 2 秒长 |
可读性
连续多个大写字母单词将触发人工检查警告。
下划线文字
少量斜体文字没有问题,但大段强调文字的可读性不佳。少量当然可以接受,但总有限度,整段文字太多了。例如这就是整段文字。这样读起来有点费力,不是吗?但此测试要到这么长才会触发,因此除非您经常书写这样的超长段落,否则不会在内容中出现误报。
两端对齐文字
过多的上标或下标;下标应用于小型引用和脚注,而非整句或整段文字。
极小字体
* 使用常见字符制作的假列表,
* 字母、数字和 emoji。
表单
没有标签的按钮
具有不可见标签的输入框,询问是否还有可见标签。
仅有占位符标签的输入框,询问是否还有可见标签。
无障碍标签与可见标签不同的按钮。
具有无效 aria-labelledby 属性的按钮。
具有冗余标签的按钮。
重置按钮。