辅助功能检查器

最后更新：2026-11-04 10:10:15

此插件仅适用于付费 TinyMCE 订阅。

a11ychecker premium 插件允许您检查在编辑器中编写的 HTML，以查找各种 Web 内容无障碍指南 (WCAG) 2.1 和 Section 508 无障碍问题。它具有自动修复功能，可让用户修复已识别的问题。

Accessibility Checker 插件评估在编辑器中创建的内容。它不评估 TinyMCE 用户界面的可访问性，且其应用的规则也不构成对 TinyMCE 本身的一致性声明。有关使用键盘或屏幕阅读器与编辑器的信息，请参阅无障碍导航指南。有关涵盖 TinyMCE 用户界面的一致性声明，请参阅无障碍一致性。

交互式示例

HTML

<textarea id="a11ychecker">
  <p><strong>简介</strong></p>
  <p>注意：此演示旨在故意触发我们的大部分无障碍规则，以用于演示目的。</p>
  <hr>
  <h2><a id="example"></a>Tiny Logo</h2>
  <p><a href="https://www.tiny.cloud/docs/tinymce/8/a11ychecker/#liveexample" target="_blank" rel="noopener"><img src="https://www.tiny.cloud/docs/tinymce/latest/_images/logos/android-chrome-256x256.png" alt="" width="128" height="128"></a><a href="https://www.tiny.cloud/docs/tinymce/8/a11ychecker/#liveexample" target="_blank" rel="noopener">这是指向此演示的链接。左侧的 Logo 也添加了同一个链接。</a></p>
  <p>* 这是一个列表。</p>
  <p>* 其格式不正确。</p>
  <p>* 通过使用星号，而非使用 &lt;ul&gt;&lt;li&gt; 元素。</p>
  <h4><a id="example"></a>要创建一个<strong>不可访问的</strong>有序列表：</h4>
  <p>1. 选择一个排序方案，</p>
  <p>2. 为每个项目手动输入项目编号，</p>
  <p>3. 不使用 &lt;ol&gt;&lt;li&gt; 元素。</p>
  <p>此句子包含一些单词，这些单词具有<span style="background-color: #5a5a5a;">低颜色对比度</span>，这使得它们<span style="color: #ced4d9;">难以阅读</span>。</p>
  <h3>一个不可访问的表格</h3>
  <p>下表缺少标题和表头单元格（&lt;th&gt; 元素）。</p>
  <table style="border-collapse: collapse; width: 100%;" border="1">
  <tbody>
  <tr>
  <td style="width: 31.819%;">&nbsp;</td>
  <td style="width: 31.819%;">&nbsp;</td>
  <td style="width: 31.819%;">&nbsp;</td>
  </tr>
  <tr>
  <td style="width: 31.819%;">&nbsp;</td>
  <td style="width: 31.819%;">&nbsp;</td>
  <td style="width: 31.819%;">&nbsp;</td>
  </tr>
  <tr>
  <td style="width: 31.819%;">&nbsp;</td>
  <td style="width: 31.819%;">&nbsp;</td>
  <td style="width: 31.819%;">&nbsp;</td>
  </tr>
  </tbody>
  </table>
  <p>&nbsp;</p>
</textarea>

tinymce.init({
  selector: 'textarea#a11ychecker',
  plugins: 'a11ychecker advcode table advlist lists image media anchor link autoresize',
  toolbar: 'a11ycheck | blocks bold forecolor backcolor | bullist numlist | link image media anchor | table | code',
  max_height: 500,
  a11y_advanced_options: true,
  a11ychecker_html_version: 'html5',
  a11ychecker_level: 'aaa',
  a11ychecker_allow_decorative_images: true,
  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }'
});

基本设置

要将 Accessibility Checker 插件添加到编辑器，请在编辑器配置的 plugins 选项中添加 a11ychecker。

例如：

tinymce.init({
  selector: 'textarea',
  plugins: 'a11ychecker',
  toolbar: 'a11ycheck'
});

有关使用模块打包器打包此插件的信息，请参阅打包 TinyMCE - 概述。

无障碍规则

Accessibility Checker 插件可用以下检查。检查的规则取决于：

合规性级别（A、AA 或 AAA），使用 a11ychecker_level 选项设置。
内容的 HTML 版本，使用 a11ychecker_html_version 选项设置。

每条规则都有一个严重级别，以下按严重程度递增的顺序列出：

警告
错误

文档结构规则

D1 - 将段落用作标题

规则描述：此规则检查是否使用 h1-h6 标签来表示标题内容，而不是使用 p 标签。未使用正确的标题标记会使辅助技术难以表示和导航您的内容。

Accessibility Checker 规则详细信息 - D1

通知级别（严重程度）

警告

WCAG 级别

A 级；AA 级；AAA 级

HTML 版本

HTML4 和 HTML5

WCAG 2.1 规范

示例不符合规范的示例

<!-- 使用样式化为标题的段落 -->
<p style="font-size: 24px; font-weight: bold;">这看起来像是一个标题</p>

<!-- 使用 div 作为标题 -->
<div class="heading">另一个伪标题</div>

<!-- 带有标题类的样式化段落 -->
<p class="h2">不是真正的标题</p>

这些示例使用了看起来像标题的非语义标记，但辅助技术无法将其识别为标题。

符合规范的示例

<!-- 正确的标题标签 -->
<h1>主页面标题</h1>

<h2>章节标题</h2>

<!-- 为设计目的而样式化的标题 -->
<h3 class="custom-style">子章节标题</h3>

这些示例使用了正确的标题标签，辅助技术将能够正确解释这些标签。

D2 - 顺序标题

规则说明： 此规则检查标题级别是否按顺序排列。文档中的每个标题级别都应遵循逻辑序列。也就是说，不应跳过标题级别（例如，从 h2 跳到 h4）。

Accessibility Checker 规则详情 - D2

通知级别（严重性）

错误

WCAG 级别

A 级；AA 级；AAA 级

HTML 版本

HTML4 和 HTML5

WCAG 2.1 规范

G141 - 使用标题组织页面。

示例不符合规范的示例

<!-- 从 h1 跳到 h3 -->
<h1>主标题</h1>
<h3>子章节</h3>

<!-- 从 h2 跳到 h4 -->
<h2>章节</h2>
<h4>子子章节</h4>

<!-- 不正确的嵌套 -->
<h3>较高级别</h3>
<h2>较低级别</h2>

这些示例显示了不正确的标题级别进展，可能会使辅助技术用户感到困惑。

符合规范的示例

<!-- 正确的顺序标题 -->
<h1>主标题</h1>
<h2>章节</h2>
<h3>子章节</h3>
<h4>子子章节</h4>

<!-- 多个 h2 章节 -->
<h1>主标题</h1>
<h2>第一个章节</h2>
<h3>子章节</h3>
<h2>第二个章节</h2>
<h3>另一个子章节</h3>

这些示例演示了正确的标题级别进展。

D3 - 相邻链接

规则说明： 此规则检查相邻的链接是否具有相同的 href 属性。

例如：如果图像链接和文本链接具有相同的 href 属性，则这两个元素应放在同一个 a 元素中。如果图像链接和文本链接指向相同的 URL 但它们是两个独立的元素，则可能会使屏幕阅读器和其他辅助技术的用户感到困惑。

Accessibility Checker 规则详情 - D3

通知级别（严重性）

错误

WCAG 级别

A 级；AA 级；AAA 级

HTML 版本

HTML4 和 HTML5

WCAG 2.1 规范

H2 - 为相同资源组合相邻的图像和文本链接。

示例不符合规范的示例

<a href="/download"><img src="download-icon.png" alt="下载"></a>
<a href="/download">下载用户指南</a>

此示例有两个独立的链接指向相同的资源。屏幕阅读器会将这些宣布为两个不同的链接，这可能会造成冗余并使人困惑。

符合规范的示例

<a href="/download">
  <img src="download-icon.png" alt="">
  下载用户指南
</a>

此示例将图像和文本合并到一个链接中。由于文本已提供链接的目的，因此图像的 alt 属性为空。

D4O - 有序列表结构

规则说明： 此规则检查是否使用 ol 元素表示有序列表。不要使用以数字或罗马数字开头的段落代替包含 li 项目的 ol 元素。这样可以简化辅助技术用户对内容的导航和解析。

Accessibility Checker 规则详情 - D4O

通知级别（严重性）

错误

WCAG 级别

A 级；AA 级；AAA 级

HTML 版本

HTML4 和 HTML5

WCAG 2.1 规范

H48 - 使用 ol、ul 和 dl 表示列表或链接组。

示例不符合规范的示例

<p>1. 首先准备配料</p>
<p>2. 将干配料混合在一起</p>
<p>3. 缓慢加入湿配料</p>
<p>4. 在 350°F 烘烤</p>

此示例使用了手动编号的段落，而不是正确的列表标记。屏幕阅读器不会将其识别为列表结构。

符合规范的示例

<ol>
    <li>首先准备配料</li>
    <li>将干配料混合在一起</li>
    <li>缓慢加入湿配料</li>
    <li>在 350°F 烘烤</li>
</ol>

此示例使用了正确的有序列表标记，使屏幕阅读器能够宣布列表结构和项目数量。

D4U - 无序列表结构

规则描述：此规则检查无序列表是否使用 ul 元素。不要使用以 * 或 - 或其他类似字符开头的段落来代替包含 li 项的 ol 元素。这是为了简化辅助技术用户的导航和内容解析。

无障碍检查器规则详情 - D4U

通知级别（严重性）

错误

WCAG 级别

A 级；AA 级；AAA 级

HTML 版本

HTML4 和 HTML5

WCAG 2.1 规范

H48 - 使用 ol、ul 和 dl 进行列表或链接组。

示例不符合示例

<p>• 新鲜蔬菜</p>
<p>• 全谷物</p>
<p>- 瘦肉蛋白</p>
<p>* 健康脂肪</p>

此示例使用带有项目符号字符的段落，而不是正确的列表标记。屏幕阅读器不会将其识别为列表结构。

符合示例

<ul>
    <li>新鲜蔬菜</li>
    <li>全谷物</li>
    <li>瘦肉蛋白</li>
    <li>健康脂肪</li>
</ul>

此示例使用正确的无序列表标记，允许屏幕阅读器将其播报为列表并高效地浏览项目。

D5 - 文本对比度（D5A、D5B 和 D5C）

规则描述：此规则检查文本的对比度是否高于以下值：

当合规级别设置为 AA 时，
- 普通文本为 4.5:1
- 大文本为 3:1
当合规级别设置为 AAA 时，
- 任何文本为 7:1

对比度低的文本对于视力受损的用户来说难以阅读。

无障碍检查器规则详情 - D5A

通知级别（严重性）

错误

WCAG 级别

AA 级

HTML 版本

HTML4 和 HTML5

WCAG 2.1 规范

G145 - 确保文本（和文本图像）与其背后的背景之间至少存在 3:1 的对比度。

无障碍检查器规则详情 - D5B

通知级别（严重性）

错误

WCAG 级别

AA 级

HTML 版本

HTML4 和 HTML5

WCAG 2.1 规范

G18 - 确保文本（和文本图像）与其背后的背景之间至少存在 4.5:1 的对比度。

无障碍检查器规则详情 - D5C

通知级别（严重性）

错误

WCAG 级别

AAA 级

HTML 版本

HTML4 和 HTML5

WCAG 2.1 规范

G17 - 确保文本（和文本图像）与其背后的背景之间至少存在 7:1 的对比度。

示例不符合示例

<!-- 白色背景上的浅灰色文本（对比度：2.3:1） -->
<p style="color: #999999; background-color: #FFFFFF;">此文本对比度不足</p>

<!-- 白色背景上的黄色文本（对比度：1.2:1） -->
<p style="color: #FFFF00; background-color: #FFFFFF;">此文本非常难以阅读</p>

<!-- 大文本对 AA 级来说对比度不足 -->
<h1 style="color: #777777; background-color: #FFFFFF; font-size: 24px;">对比度差的大标题</h1>

这些示例展示了对比度不足且不符合 WCAG 要求的文本。

符合示例

<!-- 白色背景上的深灰色文本（对比度：4.5:1） -->
<p style="color: #767676; background-color: #FFFFFF;">此文本符合普通文本的 AA 标准</p>

<!-- 白色背景上的黑色文本（对比度：21:1） -->
<p style="color: #000000; background-color: #FFFFFF;">此文本超过 AAA 要求</p>

<!-- 符合大文本 AA 要求的深灰色大文本 -->
<h1 style="color: #959595; background-color: #FFFFFF; font-size: 24px;">对比度良好的大标题</h1>

这些示例符合其相应大小和级别的 WCAG 对比度要求。

HTML 规则

H93 - ID 必须唯一

规则描述：此规则检查编辑器中的所有 id 属性是否唯一。已知重复的 id 属性在解析内容时会导致辅助技术出现问题。

无障碍检查器规则详情 - H93

通知级别（严重性）

错误

WCAG 级别

A 级；AA 级；AAA 级

HTML 版本

HTML4 和 HTML5

WCAG 2.1 规范

H93：确保网页上的 id 属性是唯一的。

示例不符合规范的示例

<!-- 多个元素具有相同 ID -->
<div id="section1">First section</div>
<div id="section1">Second section</div>

<!-- 不同元素中重复使用 ID -->
<button id="submit">Submit</button>
<input id="submit" type="submit" value="Send">

<!-- 表单字段使用相同 ID -->
<label for="name">First name:</label>
<input id="name" type="text">
<label for="name">Last name:</label>
<input id="name" type="text">

这些示例展示了重复使用 ID 的错误做法，这会使辅助技术感到困惑。

符合规范的示例

<!-- 为各部分设置唯一 ID -->
<div id="section1">First section</div>
<div id="section2">Second section</div>

<!-- 为表单控件设置唯一 ID -->
<button id="submit-button">Submit</button>
<input id="submit-input" type="submit" value="Send">

<!-- 表单字段使用唯一 ID -->
<label for="firstname">First name:</label>
<input id="firstname" type="text">
<label for="lastname">Last name:</label>
<input id="lastname" type="text">

这些示例展示了正确使用唯一 ID 的方法。

图片规则

I1 - 图片无障碍性冲突或不完整

规则描述：此规则检查所有图片是否具有完整且无冲突的无障碍信息。它会标记那些对其用途传达冲突信号（既装饰又信息性）或无障碍信息不完整的图片。当 a11ychecker_allow_decorative_images 设置为 false 时，此规则还会标记不允许使用的装饰性图片。

无障碍检查器规则详情 - I1

通知级别（严重性）

错误

WCAG 级别

A 级；AA 级；AAA 级

HTML 版本

HTML4 和 HTML5

WCAG 2.1 规范

在 TinyMCE 6.3 及更高版本中，也可以应用规则 I3。如果应用此规则，当替代（alt）文本超过 100 个字符时，会显示一个图片替代文本应少于 100 个字符的警告对话框。此对话框还提供了一个可编辑字段来显示替代文本，以便立即修复。

示例不符合规范的示例

<!-- 信号冲突：有 alt 文本但被标记为装饰性 -->
<img src="logo.jpg" alt="Company Logo" role="presentation">

<!-- 信息不完整：无无障碍信息 -->
<img src="chart.jpg">

<!-- 信号冲突：装饰性意图但有 aria-label -->
<img src="icon.jpg" role="presentation" aria-label="Icon">

<!-- 信号冲突：空 alt 但有 aria-label -->
<img src="decoration.jpg" alt="" aria-label="Decoration">

<!-- 信号冲突：装饰性但有 title（干扰意图） -->
<img src="spacer.gif" role="presentation" title="Spacer">

<!-- 无效：空 role -->
<img src="photo.jpg" alt="Description" role="">

<!-- 当不允许装饰性图片时（如果 a11ychecker_allow_decorative_images = false） -->
<img src="spacer.gif" alt="" role="presentation">

这些示例展示了各种无障碍性问题：信号冲突、意图不明确以及不允许时使用装饰性图片。

符合规范的示例

<!-- 带有有意义 alt 文本的信息性图片 -->
<img src="logo.jpg" alt="Company Logo">

<!-- 带有空 alt 的装饰性图片 -->
<img src="divider.png" alt="">

<!-- 仅带 role 的装饰性图片 -->
<img src="spacer.gif" role="presentation">

<!-- 同时带有两者的装饰性图片（冗余但有效） -->
<img src="pattern.jpg" alt="" role="presentation">

<!-- 带有辅助 aria-describedby 的信息性图片 -->
<img src="chart.png"
     alt="Sales performance chart"
     aria-describedby="chart-desc">
<p id="chart-desc">Detailed breakdown of Q3 sales performance...</p>

这些示例展示了具有明确意图且符合 ARIA 规范的正确无障碍标记方法。

I2 - 缺少 `alt` 属性

规则描述：此规则检查所有 <img> 元素是否包含 alt 属性，即使存在其他可访问名称属性（如 aria-label、aria-labelledby 或 title）也是如此。所有图片都需要 alt 属性，并且信息性图片必须至少有一个有意义的文本替代方案。

无障碍检查器规则详情 - I2

通知级别（严重性）

错误

WCAG 级别

A 级；AA 级；AAA 级

HTML 版本

HTML4 和 HTML5

WCAG 2.1 规范

F65 - 由于省略 img 元素上的 alt 属性而导致成功标准 1.1.1 失败。

在 TinyMCE 6.3 及更高版本中，也可以应用规则 I3。如果应用此规则，当替代（alt）文本超过 100 个字符时，会显示一个图片替代文本应少于 100 个字符的警告对话框。此对话框还提供了一个可编辑字段来显示替代文本，以便立即修复。

示例不合规示例

<!-- 完全没有 alt 属性 -->
<img src="chart.jpg">

<!-- 没有 alt 属性（即使有 aria-label） -->
<img src="icon.jpg" aria-label="Settings">

<!-- 没有 alt 属性（但有 aria-labelledby） -->
<img src="chart.jpg" aria-labelledby="chart-caption">

<!-- 没有 alt 属性（但有 title） -->
<img src="button.jpg" title="Submit">

这些示例不符合规范，因为它们缺少必需的 alt 属性。注意：完全没有属性的图片会触发规则 I1（意图不完整），而不是 I2。

合规示例

<!-- 基本 alt 属性用法 -->
<img src="product.jpg" alt="Red coffee mug">

<!-- 装饰性图片使用空 alt -->
<img src="separator.png" alt="" role="presentation">

<!-- 配合 aria-describedby 的 alt -->
<img src="chart.png"
     alt="Sales performance chart"
     aria-describedby="chart-desc">
<p id="chart-desc">Detailed breakdown of Q3 sales performance...</p>

<!-- 配合 title 显示工具提示的 alt -->
<img src="icon.png"
     alt="Settings"
     title="Settings">

这些示例都包含必需的 alt 属性，并为信息性图片提供了有意义的文本替代内容。

I3 - 将文件名用作 `alt` 文本

规则描述：此规则检查 alt 属性是否使用文件名（例如 photo.jpg）替代有意义的图片描述。像 "IMG_1234.jpg" 或 "photo.png" 这样的文件名并不能帮助用户理解图片内容。

Accessibility Checker 规则详情 - I3

通知级别（严重性）

错误

WCAG 级别

Level A ; Level AA ; Level AAA

HTML 版本

HTML4 和 HTML5

WCAG 2.1 规范

在 TinyMCE 6.3 及更高版本中，也可应用规则 I3。如果应用，当替代（alt）文本超过 100 个字符时，会显示一个 “图片替代文本应少于 100 个字符” 的警告对话框。该对话框还会在可编辑字段中显示替代文本，以便立即修复。

示例不合规示例

<!-- alt 文本与文件名相同 -->
<img src="sunset.jpg" alt="sunset.jpg">

<!-- alt 文本与不带扩展名的文件名相同 -->
<img src="photo.png" alt="photo">

<!-- 通用文件名用作 alt -->
<img src="DSC_0123.jpg" alt="DSC_0123.jpg">

<!-- 带路径的文件名用作 alt -->
<img src="/images/team/john-smith.png" alt="john-smith.png">

这些示例将文件名用作 alt 文本，无法提供关于图片内容的有意义信息。

合规示例

<!-- 使用描述性 alt 文本而非文件名 -->
<img src="sunset.jpg" alt="Vibrant orange sunset over ocean waves">

<!-- 使用有意义的描述而非通用名称 -->
<img src="photo.png" alt="Team celebrating product launch">

<!-- 使用描述性文本而非相机文件名 -->
<img src="DSC_0123.jpg" alt="Students collaborating in the library">

<!-- 为团队成员使用有意义的描述 -->
<img src="/images/team/john-smith.png" alt="John Smith, Senior Developer">

这些示例使用描述性 alt 文本来解释图片所展示或代表的内容。

I4 - 过长的 `alt` 文本

规则描述：此规则检查 alt 文本是否超过配置的字符限制（默认：150 个字符）。过长的描述可能会让屏幕阅读器用户难以处理。复杂的图片可能需要在周围文本中提供详细描述，尽管某些图片可能需要更长的描述才能被完全理解。

Accessibility Checker 规则详情 - I4

通知级别（严重性）

警告

WCAG 级别

Level A ; Level AA ; Level AAA

HTML 版本

HTML4 和 HTML5

WCAG 2.1 规范

不适用

示例不合规示例

<img src="office-photo.jpg"
     alt="Our modern office space features an open floor plan with collaborative workstations, standing desks, and multiple meeting rooms. The space is brightly lit with natural light from floor-to-ceiling windows, and includes a fully stocked kitchen area, relaxation zone with comfortable seating, and a game room with ping pong tables and video games for employee breaks.">

<img src="chart.png"
     alt="Bar graph showing monthly sales data for the past year, with blue bars representing domestic sales and red bars representing international sales, demonstrating a steady increase in both markets with particular growth in Q3 and Q4, reaching peak sales in December.">

这些示例使用了过于详细的 alt 文本，可能会因一次性提供过多信息而让屏幕阅读器用户感到难以承受。

合规示例

<img src="office-photo.jpg"
     alt="Modern open-plan office with collaborative spaces"
     aria-describedby="office-details">
<p id="office-details">Our office features collaborative workstations, standing desks, and meeting rooms, complemented by natural lighting, a kitchen area, and recreational spaces including a game room.</p>

<img src="chart.png"
     alt="Monthly sales growth chart for domestic and international markets"
     aria-describedby="chart-details">
<p id="chart-details">The bar graph shows steady growth in both domestic (blue) and international (red) sales throughout the year, with significant increases in Q3 and Q4, peaking in December.</p>

这些示例使用了简洁的 alt 文本，并在周围内容中提供了额外的详细信息。

表格规则

T1 - 表格标题

规则描述： 此规则检查所有 table 元素是否都有 caption 元素来描述表格内的数据，以便简化辅助技术用户对内容的解析和导航。

Accessibility Checker 规则详情 - T1

通知级别（严重性）

错误

WCAG 级别

A 级；AA 级；AAA 级

HTML 版本

HTML4 和 HTML5

WCAG 2.1 规范

H39 - 使用 caption 元素将数据表格标题与数据表格关联。

示例不合规示例

<!-- Table without caption -->
<table>
    <tr>
        <th>Product</th>
        <th>Price</th>
    </tr>
    <tr>
        <td>Widget A</td>
        <td>$10.00</td>
    </tr>
</table>

<!-- Using text outside the table -->
<p>Product Pricing Table</p>
<table>
    <tr>
        <th>Product</th>
        <th>Price</th>
    </tr>
    <!-- ... table content ... -->
</table>

这些示例缺少适当的标题元素，使屏幕阅读器用户更难理解表格的用途。

合规示例

<!-- Simple table with caption -->
<table>
    <caption>Product Pricing</caption>
    <tr>
        <th>Product</th>
        <th>Price</th>
    </tr>
    <tr>
        <td>Widget A</td>
        <td>$10.00</td>
    </tr>
</table>

<!-- Table with detailed caption -->
<table>
    <caption>2023 Quarterly Sales by Region (in thousands USD)</caption>
    <tr>
        <th>Region</th>
        <th>Q1</th>
        <th>Q2</th>
        <th>Q3</th>
        <th>Q4</th>
    </tr>
    <!-- ... table content ... -->
</table>

这些示例包含适当的标题元素，描述了表格的内容和用途。

T2 - 复杂表格摘要

规则描述： 此规则检查所有复杂表格是否必须有 summary 属性，该属性向辅助技术用户解释如何在表格内的数据中导航。

此规则仅适用于 HTML 4 内容，当 a11ychecker_html_version 设置为 html5 时不进行检查。

Accessibility Checker 规则详情 - T2

通知级别（严重性）

警告

WCAG 级别

A 级；AA 级；AAA 级

HTML 版本

HTML4

WCAG 2.1 规范

H73 - 使用 table 元素的 summary 属性提供数据表格的概览。

示例不合规示例

<!-- Complex table without summary -->
<table>
    <caption>Employee Performance Review Scores</caption>
    <tr>
        <th rowspan="2">Department</th>
        <th colspan="2">Q1 2023</th>
        <th colspan="2">Q2 2023</th>
    </tr>
    <tr>
        <th>Average</th>
        <th>Range</th>
        <th>Average</th>
        <th>Range</th>
    </tr>
    <!-- ... table content ... -->
</table>

<!-- Summary that just repeats caption -->
<table summary="Employee Performance Review Scores">
    <caption>Employee Performance Review Scores</caption>
    <!-- ... table content ... -->
</table>

这些示例要么缺少摘要，要么提供的摘要没有解释表格的结构。

合规示例

<!-- 带有描述性摘要的复杂表格 -->
<table summary="按部门排列的绩效得分。每个部门都有2023年第一季度和第二季度的平均得分和得分范围。横向阅读可进行季度比较，纵向阅读可进行部门比较。">
    <caption>员工绩效评估得分</caption>
    <tr>
        <th rowspan="2">部门</th>
        <th colspan="2">2023年第一季度</th>
        <th colspan="2">2023年第二季度</th>
    </tr>
    <tr>
        <th>平均分</th>
        <th>范围</th>
        <th>平均分</th>
        <th>范围</th>
    </tr>
    <!-- ... 表格内容 ... -->
</table>

<!-- 带有导航说明的表格 -->
<table summary="以矩阵格式呈现的月度销售数据。行表示产品，列表示月份。每个季度的底部提供了小计。">
    <caption>2023年产品月度销售情况</caption>
    <!-- ... 表格内容 ... -->
</table>

这些示例包含解释表格结构及其导航方式的摘要。

T3 - 表格标题与摘要

规则描述：此规则检查表格标题与摘要的文本内容是否重复。标题应说明表格是什么，而摘要应说明如何浏览表格内部的数据。

在 HTML 5 中，表格的 summary 属性已被弃用，所有是什么和如何的信息都应移到表格标题中。

无障碍检查器规则详情 - T3

通知级别（严重性）

错误

WCAG 级别

A 级；AA 级；AAA 级

HTML 版本

HTML4 和 HTML5

WCAG 2.1 规范

H73 - 使用 table 元素的 summary 属性为数据表提供概述。

示例不合规示例

<!-- HTML4：标题与摘要完全相同 -->
<table summary="2023年季度销售报告">
    <caption>2023年季度销售报告</caption>
    <!-- ... 表格内容 ... -->
</table>

<!-- HTML4：无附加价值的摘要 -->
<table summary="此表格显示销售数据">
    <caption>2023年季度销售报告</caption>
    <!-- ... 表格内容 ... -->
</table>

<!-- HTML5：未解释结构的标题 -->
<table>
    <caption>2023年销售数据</caption>
    <!-- ... 复杂表格内容 ... -->
</table>

这些示例展示了标题与摘要中的冗余信息或信息不足的情况。

合规示例

<!-- HTML4：互补的标题与摘要 -->
<table summary="销售数据按产品类别（行）和季度（列）组织。每个单元格包含收入和销售单位数。最后一行提供了总计。">
    <caption>2023年按产品类别划分的季度销售情况</caption>
    <!-- ... 表格内容 ... -->
</table>

<!-- HTML5：包含是什么和如何浏览的综合标题 -->
<table>
    <caption>
        2023年按产品类别划分的季度销售情况
        （数据按产品类别在行、季度在列组织。
        每个单元格显示收入和销售单位数，最后一行提供总计）
    </caption>
    <!-- ... 表格内容 ... -->
</table>

这些示例展示了表格内容与其导航方式之间的适当区分。

T4A - 表格标记

规则描述：此规则检查所有 tables 是否包含 tr 和 td 元素。

无障碍检查器规则详情 - T4A

通知级别（严重性）

错误

WCAG 级别

A 级；AA 级；AAA 级

HTML 版本

HTML4 和 HTML5

WCAG 2.1 规范

H51 - 使用表格标记呈现表格信息。

示例不合规示例

<!-- 直接包含内容的表格 -->
<table>
    没有行或单元格的内容
</table>

<!-- 仅包含 div 的表格 -->
<table>
    <div>第 1 行第 1 列</div>
    <div>第 1 行第 2 列</div>
    <div>第 2 行第 1 列</div>
    <div>第 2 行第 2 列</div>
</table>

<!-- 包含段落的表格 -->
<table>
    <p>标题 1</p>
    <p>标题 2</p>
    <p>数据 1</p>
    <p>数据 2</p>
</table>

这些示例缺乏包含行和单元格的适当表格结构，导致屏幕阅读器无法访问。

合规示例

<!-- 具有正确标记的简单表格 -->
<table>
    <tr>
        <td>第 1 行，第 1 列</td>
        <td>第 1 行，第 2 列</td>
    </tr>
    <tr>
        <td>第 2 行，第 1 列</td>
        <td>第 2 行，第 2 列</td>
    </tr>
</table>

<!-- 带有表头和数据单元格的表格 -->
<table>
    <tr>
        <th>表头 1</th>
        <th>表头 2</th>
    </tr>
    <tr>
        <td>数据 1</td>
        <td>数据 2</td>
    </tr>
</table>

<!-- 带有 thead 和 tbody 的表格 -->
<table>
    <thead>
        <tr>
            <th>第 1 列</th>
            <th>第 2 列</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>数据 1</td>
            <td>数据 2</td>
        </tr>
    </tbody>
</table>

这些示例使用了正确的表格标记，包含行和单元格，确保了可访问性。

T4B - 表格表头

规则描述：此规则检查所有 table 元素是否至少包含一个表格表头 (th) 元素。

Accessibility Checker 规则详情 - T4B

通知级别（严重性）

错误

WCAG 级别

Level A ; Level AA ; Level AAA

HTML 版本

HTML4 和 HTML5

WCAG 2.1 规范

H51 - 使用 table 标记呈现表格信息。

示例不合规示例

<!-- 无表头的表格 -->
<table>
    <tr>
        <td>产品</td>
        <td>价格</td>
    </tr>
    <tr>
        <td>小部件</td>
        <td>$10.00</td>
    </tr>
</table>

<!-- 使用常规单元格作为表头 -->
<table>
    <tr>
        <td><strong>姓名</strong></td>
        <td><strong>职位</strong></td>
    </tr>
    <tr>
        <td>约翰·史密斯</td>
        <td>开发人员</td>
    </tr>
</table>

这些示例缺少正确的表头单元格，导致屏幕阅读器难以理解表格的结构。

合规示例

<!-- 带有列标题的简单表格 -->
<table>
    <tr>
        <th>产品</th>
        <th>价格</th>
    </tr>
    <tr>
        <td>小部件</td>
        <td>$10.00</td>
    </tr>
</table>

<!-- 带有行标题和列标题的表格 -->
<table>
    <tr>
        <th scope="col">季度</th>
        <th scope="col">收入</th>
        <th scope="col">增长</th>
    </tr>
    <tr>
        <th scope="row">Q1</th>
        <td>$10,000</td>
        <td>5%</td>
    </tr>
    <tr>
        <th scope="row">Q2</th>
        <td>$15,000</td>
        <td>50%</td>
    </tr>
</table>

<!-- 带有多级表头的复杂表格 -->
<table>
    <thead>
        <tr>
            <th rowspan="2">产品</th>
            <th colspan="2">2023</th>
            <th colspan="2">2024</th>
        </tr>
        <tr>
            <th>Q1</th>
            <th>Q2</th>
            <th>Q1</th>
            <th>Q2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">小部件 A</th>
            <td>100</td>
            <td>150</td>
            <td>200</td>
            <td>250</td>
        </tr>
    </tbody>
</table>

这些示例展示了在不同复杂度层级下正确使用表格表头的方法。

T4C - 表格标题范围

规则描述：此规则检查所有表格表头 (th) 元素是否具有 scope 属性，以明确标题在 table 内的范围。允许的值为 row、col、rowgroup 和 colgroup。这对于辅助技术用户解析表格数据非常重要。

Accessibility Checker 规则详情 - T4C

通知级别（严重性）

错误

WCAG 级别

Level A ; Level AA ; Level AAA

HTML 版本

HTML4 和 HTML5

WCAG 2.1 规范

H63 - 使用 scope 属性关联数据表中的表头单元格和数据单元格。

示例不合规示例

<!-- 无范围属性的表头 -->
<table>
    <tr>
        <th>产品</th>
        <th>Q1</th>
        <th>Q2</th>
    </tr>
    <tr>
        <th>小部件 A</th>
        <td>100</td>
        <td>150</td>
    </tr>
</table>

<!-- 错误地使用范围属性 -->
<table>
    <tr>
        <th scope="row">姓名</th>
        <th scope="row">部门</th>
    </tr>
    <tr>
        <td>约翰·史密斯</td>
        <td>工程部</td>
    </tr>
</table>

这些示例要么缺少范围属性，要么错误地使用了范围属性。

合规示例

<!-- 具有正确scope属性的简单表格 -->
<table>
    <tr>
        <th scope="col">Product</th>
        <th scope="col">Q1</th>
        <th scope="col">Q2</th>
    </tr>
    <tr>
        <th scope="row">Widget A</th>
        <td>100</td>
        <td>150</td>
    </tr>
</table>

<!-- 具有rowgroup和colgroup的复杂表格 -->
<table>
    <thead>
        <tr>
            <th scope="col" rowspan="2">Department</th>
            <th scope="colgroup" colspan="2">2023</th>
            <th scope="colgroup" colspan="2">2024</th>
        </tr>
        <tr>
            <th scope="col">Budget</th>
            <th scope="col">Actual</th>
            <th scope="col">Budget</th>
            <th scope="col">Forecast</th>
        </tr>
    </thead>
    <tbody>
        <th scope="rowgroup" rowspan="2">Engineering</th>
        <tr>
            <th scope="row">Development</th>
            <td>100K</td>
            <td>95K</td>
            <td>120K</td>
            <td>125K</td>
        </tr>
    </tbody>
</table>

这些示例展示了在不同表格结构中正确使用scope属性的方法。

选项

以下配置选项会影响Accessibility Checker插件的行为。

`a11y_advanced_options`

此选项会影响以下功能：

Accessibility Checker插件（a11ychecker）。
Image插件（image）。
由Uploadcare驱动的Media Optimizer插件（uploadcare）。

将a11y_advanced_options设置为true时：

在“插入/编辑图片”对话框中添加“图片是装饰性的”选项，允许用户指定图片为装饰性图片，并且不需要为无障碍性提供替代文本。
在Media Optimizer的“替代文本”上下文工具栏中添加“装饰性图片”按钮，允许用户指定图片为装饰性图片，并且不需要为无障碍性提供替代文本。
在需要标记为装饰性的图片的“Accessibility Checker错误”对话框中添加“图片是装饰性的”选项。

如果未明确设置a11ychecker_allow_decorative_images，则将使用a11y_advanced_options中定义的值。

类型：Boolean

默认值：false

可能的值：true、false

示例：使用`a11y_advanced_options`

tinymce.init({
  selector: 'textarea',  // 根据需要更改此值以匹配你的HTML
  plugins: 'a11ychecker',
  toolbar: 'a11ycheck',
  a11y_advanced_options: true,
});

`a11ychecker_alt_text_max_length`

此选项设置图片替代文本的最大长度，超过此长度将触发警告。

类型：Number

默认值：150

示例：

tinymce.init({
  selector: 'textarea',
  plugins: 'a11ychecker',
  toolbar: 'a11ycheck',
  a11ychecker_alt_text_max_length: 200  // 如有需要，允许更长的描述
});

`a11ychecker_allow_decorative_images`

此选项确定Accessibility Checker是否允许装饰性图片。装饰性图片是指仅用于视觉增强、不传达有意义内容或不具有特定功能的图片。

当此选项设置为true时，装饰性图片必须使用以下一种或两种方法进行标记：

空的替代文本属性（alt=""），或者
role="presentation"或role="none"属性，或者
同时使用两种方法

这些方法中的任何一种都会明确告知辅助技术忽略这些图片，从而改善屏幕阅读器用户的浏览体验。

装饰性图片的常见使用场景

背景图案或纹理
装饰性边框或分隔线
仅起装饰作用且重复附近文本的图标
由相邻文本内容描述的图片
用于布局目的的间隔图片

装饰性图片示例：

<!-- 使用空的alt属性 -->
<img src="decorative-border.png" alt="" />

<!-- 使用role="presentation" -->
<img src="spacer.gif" role="presentation" />

<!-- 同时使用两种方法 -->
<img src="pattern.png" role="presentation" alt="" />

<!-- 使用空的alt和title属性 -->
<img src="decorative-border.png" alt="" title=""/>

信息性图片示例（非装饰性）：

<img src="company-logo.png" alt="Company Name Logo" />

验证规则

如果将a11ychecker_allow_decorative_images设置为true，当出现以下情况时，Accessibility Checker将显示错误：

图片存在冲突的无障碍访问信息（例如，同时包含有意义的 alt 文本和 role="presentation"）。
图片的无障碍访问信息不完整（无明确的装饰性或信息性意图）。

如果 a11ychecker_allow_decorative_images 设置为 false，当出现以下情况时，Accessibility Checker 将显示错误：

图片没有替代文本属性（alt）。
图片的替代文本属性为空。
图片具有 role="presentation" 属性。

如果 a11ychecker_allow_decorative_images 未明确设置，将使用 a11y_advanced_options 中定义的值。

类型： Boolean

默认值： false

可能的值： true、false

示例：使用 `a11ychecker_allow_decorative_images`

tinymce.init({
  selector: 'textarea',
  plugins: 'a11ychecker',
  toolbar: 'a11ycheck',
  a11ychecker_allow_decorative_images: true
});

`a11ychecker_filter_issue`

a11ychecker_filter_issue 选项允许使用回调函数从 Accessibility Checker 报告中移除 Accessibility Checker 问题。该选项是 a11ychecker_ignored_rules 选项的灵活替代方案。此选项可从对话框中显示的结果以及 getReport API 中移除问题。

回调函数将接收由 getReport() API 生成的 issue 对象。要从 Accessibility Checker 报告中移除某个问题，回调函数需要针对该特定问题返回 false。

类型： Function

默认值：

(issue) => true;

示例：使用 `a11ychecker_filter_issue` 过滤掉 Accessibility Checker T1 规则

以下示例中的回调函数，如果问题的 id 值为 'T1'，则返回 false，从而从 Accessibility Checker 报告中过滤掉 'T1' 问题。

tinymce.init({
  selector: 'textarea',  // 根据你的 html 更改此值
  plugins: 'a11ychecker',
  toolbar: 'a11ycheck',
  a11ychecker_filter_issue: (issue) => {
    return issue.id !== 'T1';
  }
});

示例：使用 `a11ychecker_filter_issue` 过滤掉所有 Accessibility Checker 表格规则以及小于 `'error'` 级别的规则

以下示例中的回调函数，仅当问题的 element 为 'table' 且 'severity' 级别不是 'error' 时，才返回 false，从而从 Accessibility Checker 报告中过滤掉所有低严重性级别和 table 元素相关的问题。

tinymce.init({
  selector: 'textarea',  // 根据你的 html 更改此值
  plugins: 'a11ychecker',
  toolbar: 'a11ycheck',
  a11ychecker_filter_issue: (issue) => {
	  return !(issue.element.nodeName.toLowerCase() === 'table' || issue.severity !== 'error');
  }
});

示例：使用 `a11ychecker_filter_issue` 过滤掉具有空替代文本的图片的 Accessibility Checker I1 规则

以下示例中的回调函数，仅针对具有空 +'alt+' 属性的图片元素且 'id' 为 'I1' 的问题返回 false，否则该问题将不会被过滤掉。当您希望将具有空替代文本的图片视为装饰性图片时，此实现会非常有用。

tinymce.init({
  selector: 'textarea',  // 根据你的 html 更改此值
  plugins: 'a11ychecker',
  toolbar: 'a11ycheck',
  a11ychecker_filter_issue: (issue) => {
    const element = issue.element;
    const isImageAndI1Issue = issue.id === 'I1' && element.nodeName.toLowerCase() === 'img';
    const hasEmptyAltAttribute = element.hasAttribute('alt') && element.alt === '';
    return !(isImageAndI1Issue && hasEmptyAltAttribute);
  }
});

`a11ychecker_html_version`

此配置选项用于设置检查问题时使用的 HTML 版本。

例如：将版本设置为 HTML 4 将启用规则“复杂表格应具有摘要”，其中 summary 是 HTML 4 中的有效属性，但在 HTML 5 中不是。

类型： String

默认值： html5

可能的值： html4、html5

示例：使用 `a11ychecker_html_version`

tinymce.init({
  selector: 'textarea',
  plugins: 'a11ychecker',
  toolbar: 'a11ycheck',
  a11ychecker_html_version: 'html4'
});

`a11ychecker_ignored_rules`

a11ychecker_ignored_rules 选项可防止检查特定的 Accessibility Checker 规则。此功能允许开发人员跳过他们不希望检查的规则。例如：跳过标记已知内容问题或不应检查的自定义 HTML 的规则。

类型： 以逗号分隔的字符串。

默认值： ''

可能值： 'D1', 'D2', 'D3', 'D4O', 'D4U', 'D5A', 'D5B', 'D5C', 'H93', 'I1', 'I2', 'T1', 'T2', 'T3', 'T4A', 'T4B', 'T4C'

示例：使用 `a11ychecker_ignored_rules`

本示例展示如何忽略以下检查（规则）：

D2 - 顺序标题
I2 - 图片 alt 文本不是图片文件名
T4B - 表格标题

tinymce.init({
  selector: 'textarea',  // 根据你的 html 修改此值
  plugins: 'a11ychecker',
  toolbar: 'a11ycheck',
  a11ychecker_ignored_rules: 'D2, I2, T4B'
});

`a11ychecker_issue_url_callback`

a11ychecker_issue_url_callback 选项用于更改 Accessibility Checker 对话框中“点击查看更多信息”按钮 ( 帮助图标 - 圆圈内的问号 ) 的目标 URL。默认情况下，“查看更多信息”链接将指向 https://www.tiny.cloud/docs/tinymce/8/a11ychecker/#<ruleId>，例如 https://www.tiny.cloud/docs/tinymce/8/a11ychecker/#D1。此选项可用于将目标 URL 设置为 https://www.tiny.cloud/docs/ 之外的页面。

类型： Function

默认值：

(ruleId) => `https://www.tiny.cloud/docs/tinymce/6/a11ychecker/#${ruleId}`

示例：使用 `a11ychecker_issue_url_callback`

本示例展示如何将 Accessibility Checker 对话框中“点击查看更多信息”按钮 ( 帮助图标 - 圆圈内的问号 ) 的链接更改为指向 www.example.com/tinymce/a11ychecker/more_info 的锚点。

tinymce.init({
  selector: 'textarea',  // 根据你的 html 修改此值
  plugins: 'a11ychecker',
  toolbar: 'a11ycheck',
  a11ychecker_issue_url_callback: (ruleId) =>
    `https://www.example.com/tinymce/a11ychecker/more_info#${ruleId}`
});

`a11ychecker_level`

此配置选项设置检查问题时要使用的 WCAG 级别。

例如，“文本必须具有至少…的对比度”规则：

使用 AA 时，Accessibility Checker 将检查对比度不小于 4.5:1。
使用 AAA 时，Accessibility Checker 将检查对比度不小于 7.0:1。

类型： String

默认值： aa

可能值： a, aa, aaa

示例：使用 `a11ychecker_level`

tinymce.init({
  selector: 'textarea',
  plugins: 'a11ychecker',
  toolbar: 'a11ycheck',
  a11ychecker_level: 'aaa'
});

工具栏按钮

Accessibility Checker 插件提供以下工具栏按钮：

工具栏按钮标识符	描述
`a11ycheck`	打开无障碍检查器对话框。

这些工具栏按钮可通过以下方式添加到编辑器：

菜单项

Accessibility Checker 插件提供以下菜单项：

菜单项标识符	默认菜单位置	描述
`a11ycheck`	工具	打开无障碍检查器对话框。

这些菜单项可通过以下方式添加到编辑器：

menu 配置选项。
contextmenu 配置选项。
自定义菜单工具栏按钮。

事件

Accessibility Checker 插件提供以下事件。

名称	数据	描述
A11ycheckStart	N/A	当 Accessibility Checker `打开` 时触发
A11ycheckStop	N/A	当 Accessibility Checker `关闭` 时触发
A11ycheckIgnore	N/A	当点击 `Ignore` 按钮时触发
A11ycheckRepair	N/A	当点击 `Repair` 按钮时触发
A11ycheckShowDetails	N/A	按下“Click for more info”按钮时触发

API

Accessibility Checker 插件提供以下 API。

`toggleaudit()`

打开和关闭无障碍检查器对话框，显示审计结果并提供纠正问题的选项（如果有）。

示例：使用 `toggleaudit()`

tinymce.activeEditor.plugins.a11ychecker.toggleaudit();

`getReport()`

执行无障碍审计并报告结果，而不打开对话框。生成的报告是一个对象数组，每个对象代表一个问题。

示例：使用 `getReport()`

const issues = tinymce.activeEditor.plugins.a11ychecker.getReport();

console.log(issues);

// 示例结果
[
  {
    "contentID": "<div id=\"accessibility-issue__contentID\"><span>文本:&nbsp;</span><span>“H5”</span></div>",
    "description": "标题必须按顺序应用。例如：1 级标题之后应是 2 级标题，而不是 3 级标题。",
    "element": h5, // 发现问题的 DOM 元素引用
    "id": "D2",
    "severity": "error",
    "url": "https://www.w3.org/WAI/WCAG21/Techniques/general/G141.html",
  },
  {
    "contentID": "<div id=\"accessibility-issue__contentID\"><span>表格:&nbsp;</span><span>“2x2”</span></div>",
    "description": "表格必须有标题",
    "element": table, // 发现问题的 DOM 元素引用
    "id": "T1",
    "severity": "error",
    "url": "https://www.w3.org/WAI/WCAG21/Techniques/html/H39.html",
  }
]

`issue` 对象

在 a11ychecker 中，当编辑器中的内容经过 audited 时，会检查每个元素以确保没有违反任何 Accessibility 规则。任何不遵守规则的元素都会在审计中生成一个 issue；其详细信息将显示在 a11ychecker 对话框中。

'issue' 对象提供与违反 Accessibility 规则的元素生成的任何问题相关的数据：

id : String TinyMCE 使用的 A11ychecker 问题标识符，如 D1、T4A。有关问题的描述和其他详细信息，请参阅 Accessibility Rules。
description : String 问题的描述；将显示在对话框中。
severity : String 问题的严重级别；可以是 warning 或 error。
url : String 问题的 URL 参考。默认情况下，这将是一个指向 W3 网站的链接，包含需要处理以解决问题的 W3 WCAG 技术。
element : Object 发现问题的 DOM 元素。
contentID : String 发现问题的内容片段（如文本、链接、图像或表格）。

辅助功能检查器

交互式示例

基本设置

无障碍规则

文档结构规则

D1 - 将段落用作标题

Accessibility Checker 规则详细信息 - D1

D2 - 顺序标题

Accessibility Checker 规则详情 - D2

D3 - 相邻链接

Accessibility Checker 规则详情 - D3

D4O - 有序列表结构

Accessibility Checker 规则详情 - D4O

D4U - 无序列表结构

无障碍检查器规则详情 - D4U

D5 - 文本对比度（D5A、D5B 和 D5C）

无障碍检查器规则详情 - D5A

无障碍检查器规则详情 - D5B

无障碍检查器规则详情 - D5C

HTML 规则

H93 - ID 必须唯一

无障碍检查器规则详情 - H93

图片规则

I1 - 图片无障碍性冲突或不完整

无障碍检查器规则详情 - I1

I2 - 缺少 alt 属性

无障碍检查器规则详情 - I2

I3 - 将文件名用作 alt 文本

Accessibility Checker 规则详情 - I3

I4 - 过长的 alt 文本

Accessibility Checker 规则详情 - I4

表格规则

T1 - 表格标题

Accessibility Checker 规则详情 - T1

T2 - 复杂表格摘要

Accessibility Checker 规则详情 - T2

T3 - 表格标题与摘要

无障碍检查器规则详情 - T3

T4A - 表格标记

无障碍检查器规则详情 - T4A

T4B - 表格表头

Accessibility Checker 规则详情 - T4B

T4C - 表格标题范围

Accessibility Checker 规则详情 - T4C

选项

a11y_advanced_options

示例：使用a11y_advanced_options

a11ychecker_alt_text_max_length

a11ychecker_allow_decorative_images

装饰性图片的常见使用场景

装饰性图片示例：

信息性图片示例（非装饰性）：

验证规则

示例：使用 a11ychecker_allow_decorative_images

a11ychecker_filter_issue

示例：使用 a11ychecker_filter_issue 过滤掉 Accessibility Checker T1 规则

示例：使用 a11ychecker_filter_issue 过滤掉所有 Accessibility Checker 表格规则以及小于 'error' 级别的规则

示例：使用 a11ychecker_filter_issue 过滤掉具有空替代文本的图片的 Accessibility Checker I1 规则

a11ychecker_html_version

示例：使用 a11ychecker_html_version

a11ychecker_ignored_rules

示例：使用 a11ychecker_ignored_rules

a11ychecker_issue_url_callback

示例：使用 a11ychecker_issue_url_callback

a11ychecker_level

示例：使用 a11ychecker_level

工具栏按钮

菜单项

事件

API

toggleaudit()

示例：使用 toggleaudit()

getReport()

示例：使用 getReport()

issue 对象

I2 - 缺少 `alt` 属性

I3 - 将文件名用作 `alt` 文本

I4 - 过长的 `alt` 文本

`a11y_advanced_options`

示例：使用`a11y_advanced_options`

`a11ychecker_alt_text_max_length`

`a11ychecker_allow_decorative_images`

示例：使用 `a11ychecker_allow_decorative_images`

`a11ychecker_filter_issue`

示例：使用 `a11ychecker_filter_issue` 过滤掉 Accessibility Checker T1 规则

示例：使用 `a11ychecker_filter_issue` 过滤掉所有 Accessibility Checker 表格规则以及小于 `'error'` 级别的规则

示例：使用 `a11ychecker_filter_issue` 过滤掉具有空替代文本的图片的 Accessibility Checker I1 规则

`a11ychecker_html_version`

示例：使用 `a11ychecker_html_version`

`a11ychecker_ignored_rules`

示例：使用 `a11ychecker_ignored_rules`

`a11ychecker_issue_url_callback`

示例：使用 `a11ychecker_issue_url_callback`

`a11ychecker_level`

示例：使用 `a11ychecker_level`

`toggleaudit()`

示例：使用 `toggleaudit()`

`getReport()`

示例：使用 `getReport()`

`issue` 对象