无障碍检查器

检查器会读取编辑器中的内容，报告哪些地方会让屏幕阅读器用户或低视力用户难以使用。它是内置功能，包含在授权中，并不是付费附加组件。从编辑器 2.6.12 起，它应用 18 条规则，其中大多数都提供一键修复：由作者提供文字，修复程序负责修正标记。

它检查的是内容，而不是编辑器本身：关于编辑器本身对键盘和屏幕阅读器用户的表现，请参阅无障碍（WCAG 2.2 AA）。

使用方法

工具栏按钮会打开一个面板，列出发现的问题；选择某个问题会在文档中高亮它。错误是指会让某些人完全无法使用内容的问题；警告是指会增加使用难度的问题。

// The checker is a plugin; it loads with all_plugins.js.
var editor = new RichTextEditor("#div_editor");

editor.accessibilityChecker.open();      // show the panel
editor.accessibilityChecker.toggle();    // show or hide it
editor.accessibilityChecker.close();

// Run it yourself - for example before saving - and read the result.
var result = editor.accessibilityChecker.run();
result.issues.forEach(function (issue) {
  console.log(issue.code, issue.severity, issue.message, issue.path);
});

// Block a save while errors remain, and let warnings through.
function hasBlockingIssues() {
  return editor.accessibilityChecker.run().issues.some(function (i) {
    return i.severity === "error";
  });
}

每个问题都带有下表中的一个 code、值为 error 或 warning 的 severity、一条写给作者看的 message，以及标识元素位置的 path。

图片、链接、颜色和语言

规则	级别	检查的问题	一键修复
`image-missing-alt`	错误	图片没有替代文本。屏幕阅读器只会读出“图片”。	输入描述，它会被写入 alt。
`image-alt-filename`	错误	替代文本是一个文件名（IMG_4021.jpg），没有描述任何内容。	输入真正的描述。
`image-alt-too-long`	警告	替代文本超过 150 个字符：听起来负担太重。	输入更简短的描述。
`link-empty`	错误	没有文字的链接，只会被读作“链接”。	添加链接文字；如果链接是图标，则添加 aria-label。
`link-ambiguous-text`	警告	“点击这里”“阅读更多”：在屏幕阅读器的链接列表中毫无用处。	—（请自行改写文字）
`link-adjacent-duplicate`	警告	图片链接旁边紧挨着一个指向同一位置的文字链接：会被读两遍。	把它们合并为一个链接。
`contrast-insufficient`	错误	文字低于 WCAG AA 对比度：正文为 4.5:1，大号文字为 3:1。	—（请选择其他颜色）
`duplicate-id`	错误	两个元素使用相同的 id，因此任何指向它的标签都会解析到第一个元素。	—（请修改其中一个 id）
`language-of-parts`	警告	一段使用其他文字书写的文本没有 lang 属性，因此会用错误的语音朗读。	用您选择的语言标记这段文本。

标题和结构

规则	级别	检查的问题	一键修复
`heading-empty`	警告	没有文字的标题，它仍然会出现在文档大纲中。	输入标题文字。
`heading-level-skip`	警告	从 H1 跳到 H3：大纲缺失了一个层级。	把它转换为下一个层级。
`paragraph-as-heading`	警告	单独成行的粗体大号文字：看起来像标题，却无法导航到它。	把它转换为真正的标题。
`fake-list`	警告	以“1.”或“-”手动输入的行：不会被读作列表，项目数量也会丢失。	把它们转换为真正的列表。
`blockquote-as-indent`	警告	用于缩进的引用块，会被读作引文。	—（请改用缩进按钮）

表格

规则	级别	检查的问题	一键修复
`table-missing-header`	警告	数据表格没有表头单元格，因此没有任何列或行有名称。	把第一行提升为表头，或者把表格标记为仅用于布局。
`table-header-empty`	错误	表头单元格没有文字：它所标记的列会被读作无名列。	输入标签，或者把它降级为普通单元格。
`table-missing-caption`	警告	数据表格没有标题，因此听众进入表格时不知道其中是什么内容。	输入表格标题。
`layout-table-semantics`	错误	布局表格仍然带有表头单元格或标题，会读出它实际并不存在的关系。	去除数据表格的标记。

修复问题

修复只会更改标记，绝不会自行编造文字。如果某条规则需要文字，请把文字传入，检查器会把它写到正确的位置，然后重新运行，使列表始终保持准确。

// Repair issue 0. The options an issue needs depend on its rule:
// the author supplies words, the editor does the markup.
var issues = editor.accessibilityChecker.getIssues();

editor.accessibilityChecker.repair(0, { altText: "Crew fitting the new roof" });   // image-missing-alt, image-alt-filename, image-alt-too-long
editor.accessibilityChecker.repair(0, { headingText: "Opening hours" });            // heading-empty
editor.accessibilityChecker.repair(0, { targetLevel: 2 });                          // heading-level-skip, paragraph-as-heading
editor.accessibilityChecker.repair(0, { captionText: "Sales by month" });           // table-missing-caption
editor.accessibilityChecker.repair(0, { markLayout: true });                        // table-missing-header, as a layout table
editor.accessibilityChecker.repair(0, {});                                          // fake-list, link-adjacent-duplicate: nothing to supply

有三条规则没有自动修复，这是有意为之：含义模糊的链接文字、对比度不足和重复的 id，都需要由人来决定措辞、颜色或由哪个元素保留该 id。

它不做什么

它读取的是编辑器中的内容，而不是您发布的页面：保存之后，站点应用的样式可能会改变对比度。
它无法判断替代文本是否准确，只能判断是否存在、是否不是文件名、是否过长。
使用相同文字书写的其他语言短语（例如英文中的法语）无法检测；语言规则依据的是书写系统。
它不能代替上线前用真实的屏幕阅读器进行测试。