アクセシビリティチェッカー

チェッカーはエディター内のコンテンツを読み取り、スクリーンリーダーで使う場合やロービジョンの場合に使いにくくなる点を報告します。組み込みの機能でライセンスに含まれており、有料のアドオンではありません。エディター 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 が含まれます。

画像、リンク、色、言語

見出しと構造

表

問題を修正する

修正で変わるのはマークアップで、言葉を勝手に作ることはありません。ルールにテキストが必要な場合はそれを渡すと、チェッカーが正しい場所に書き込み、一覧が正確に保たれるよう再度チェックを実行します。

// 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

3 つのルールには自動の修正がありませんが、これは意図的なものです。あいまいなリンクのテキスト、不十分なコントラスト、重複した id は、いずれも言葉づかい、色、どの要素が id を保持するかについて、人間の判断が必要です。

チェッカーが行わないこと

• 読み取るのはエディター内のコンテンツで、公開したページではありません。サイトが適用するスタイルによって、保存後にコントラストが変わることがあります。
• 代替テキストが正確かどうかは判断できません。判断できるのは、存在するか、ファイル名でないか、長すぎないかだけです。
• 同じ文字体系で書かれた別の言語のフレーズ（英語の中のフランス語など）は検出できません。言語のルールは文字体系を手がかりにしているからです。
• 公開前に実際のスクリーンリーダーでテストすることの代わりにはなりません。