Barrierefreiheitsprüfung

Die Prüfung liest den Inhalt im Editor und meldet, was die Nutzung mit einem Screenreader oder bei eingeschränktem Sehvermögen erschweren würde. Sie ist eingebaut und in der Lizenz enthalten, kein kostenpflichtiges Add-on. Ab Editor 2.6.12 wendet sie 18 Regeln an, und die meisten bieten eine Reparatur per Klick, die das Markup korrigiert, während der Autor die Worte liefert.

Sie prüft den Inhalt, nicht den Editor: Wie sich der Editor selbst für Benutzer von Tastatur und Screenreader verhält, beschreibt Barrierefreiheit (WCAG 2.2 AA).

Verwendung

Die Schaltfläche in der Symbolleiste öffnet einen Bereich mit allen Funden; wenn Sie ein Problem auswählen, wird es im Dokument hervorgehoben. Fehler sind Dinge, die Inhalte für jemanden unbenutzbar machen; Warnungen sind Dinge, die die Nutzung erschweren.

// 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";
  });
}

Jedes Problem hat einen code aus den Tabellen unten, eine severity mit error oder warning, eine für den Autor geschriebene message und einen path, der das Element bezeichnet.

Bilder, Links, Farbe und Sprache

Überschriften und Struktur

Tabellen

Ein Problem reparieren

Eine Reparatur ändert das Markup; sie erfindet nie Worte. Braucht eine Regel Text, übergeben Sie ihn, und die Prüfung schreibt ihn an die richtige Stelle und läuft dann erneut, damit die Liste stimmt.

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

Drei Regeln haben keine automatische Reparatur, und das absichtlich: Mehrdeutiger Linktext, unzureichender Kontrast und eine doppelte id brauchen alle eine menschliche Entscheidung über Formulierung, Farbe oder darüber, welches Element die id behält.

Was die Prüfung nicht tut

• Sie liest den Inhalt im Editor, nicht Ihre veröffentlichte Seite: Styles Ihrer Website können den Kontrast nach dem Speichern verändern.
• Sie kann nicht beurteilen, ob ein Alt-Text zutreffend ist, nur ob er vorhanden ist, kein Dateiname ist und nicht übermäßig lang ist.
• Ein Ausdruck in einer anderen Sprache in derselben Schrift (Französisch in englischem Text) ist nicht erkennbar; die Sprachregel richtet sich nach dem Schriftsystem.
• Sie ersetzt nicht den Test mit einem echten Screenreader vor dem Launch.