Vérificateur d’accessibilité

Le vérificateur lit le contenu de l’éditeur et signale ce qui le rendrait difficile à utiliser avec un lecteur d’écran ou en cas de basse vision. Il est intégré et inclus dans la licence, et non vendu comme module complémentaire. Depuis la version 2.6.12 de l’éditeur, il applique 18 règles, et la plupart d’entre elles proposent une réparation en un clic qui corrige le balisage pendant que l’auteur fournit les mots.

Il vérifie le contenu, pas l’éditeur : pour le comportement de l’éditeur lui-même avec le clavier et les lecteurs d’écran, consultez Accessibilité (WCAG 2.2 AA).

Utilisation

Le bouton de la barre d’outils ouvre un panneau qui liste ce qui a été trouvé ; sélectionner un problème le met en évidence dans le document. Les erreurs rendent le contenu inutilisable pour quelqu’un ; les avertissements le rendent plus difficile à utiliser.

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

Chaque problème porte un code tiré des tableaux ci-dessous, une severity valant error ou warning, un message rédigé pour l’auteur et un path qui identifie l’élément.

Images, liens, couleur et langue

Titres et structure

Tableaux

Réparer un problème

Une réparation modifie le balisage ; elle n’invente jamais de mots. Lorsqu’une règle a besoin de texte, transmettez-le : le vérificateur l’écrit au bon endroit, puis se relance pour que la liste reste exacte.

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

Trois règles n’ont pas de réparation automatique, et c’est voulu : un texte de lien ambigu, un contraste insuffisant et un id en double nécessitent tous une décision humaine sur la formulation, la couleur ou l’élément qui garde l’id.

Ce qu’il ne fait pas

• Il lit le contenu de l’éditeur, pas votre page publiée : les styles appliqués par votre site peuvent modifier le contraste après l’enregistrement.
• Il ne peut pas juger si un texte alternatif est exact, seulement s’il est présent, s’il n’est pas un nom de fichier et s’il n’est pas excessivement long.
• Une expression dans une autre langue écrite dans la même écriture (du français dans un texte anglais) n’est pas détectable ; la règle sur la langue s’appuie sur le système d’écriture.
• Il ne remplace pas un test avec un vrai lecteur d’écran avant une mise en ligne.