Comprobador de accesibilidad

El comprobador lee el contenido del editor e informa de lo que dificultaría usarlo con un lector de pantalla o con baja visión. Está integrado e incluido en la licencia; no es un complemento de pago. Desde la versión 2.6.12 del editor aplica 18 reglas, y la mayoría ofrecen una reparación con un clic que corrige el marcado mientras el autor aporta las palabras.

Comprueba el contenido, no el editor: para saber cómo se comporta el propio editor con usuarios de teclado y de lectores de pantalla, consulta Accesibilidad (WCAG 2.2 AA).

Cómo usarlo

El botón de la barra de herramientas abre un panel con lo que ha encontrado; al seleccionar un problema, se resalta en el documento. Los errores son cosas que dejan el contenido inutilizable para alguien; las advertencias son cosas que lo hacen más difícil.

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

Cada problema lleva un code de las tablas de abajo, una severity con el valor error o warning, un message escrito para el autor y un path que identifica el elemento.

Imágenes, enlaces, color e idioma

Encabezados y estructura

Tablas

Reparar un problema

Una reparación cambia el marcado; nunca inventa palabras. Cuando una regla necesita texto, pásaselo y el comprobador lo escribe en el lugar adecuado y vuelve a ejecutarse para que la lista siga siendo correcta.

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

Tres reglas no tienen reparación automática, y es a propósito: el texto de enlace ambiguo, el contraste insuficiente y un id duplicado necesitan una decisión humana sobre la redacción, el color o qué elemento conserva el id.

Lo que no hace

• Lee el contenido del editor, no tu página publicada: los estilos que aplica tu sitio pueden cambiar el contraste después de guardar.
• No puede juzgar si el texto alternativo es exacto, solo si existe, si no es un nombre de archivo y si no es demasiado largo.
• Una frase en otro idioma escrita con el mismo sistema de escritura (francés dentro de inglés) no se puede detectar; la regla de idioma se basa en el sistema de escritura.
• No sustituye a las pruebas con un lector de pantalla real antes de un lanzamiento.