Verificador de acessibilidade

O verificador lê o conteúdo do editor e aponta o que dificultaria o uso com um leitor de tela ou por pessoas com baixa visão. Ele já vem embutido e está incluído na licença; não é um complemento pago. A partir da versão 2.6.12 do editor, ele aplica 18 regras, e a maioria oferece uma correção com um clique, que ajusta a marcação enquanto o autor fornece o texto.

Ele verifica o conteúdo, não o editor: para saber como o próprio editor se comporta para quem usa teclado e leitor de tela, veja Accessibility (WCAG 2.2 AA).

Como usar

O botão da barra de ferramentas abre um painel com a lista do que foi encontrado; ao selecionar um problema, ele é destacado no documento. Erros são coisas que deixam o conteúdo inutilizável para alguém; avisos são coisas que dificultam o uso.

// 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 traz um code das tabelas abaixo, uma severity igual a error ou warning, uma message escrita para o autor e um path que identifica o elemento.

Imagens, links, cor e idioma

Títulos e estrutura

Tabelas

Corrigir um problema

Uma correção altera a marcação; ela nunca inventa texto. Quando uma regra precisa de texto, passe-o como parâmetro e o verificador o grava no lugar certo e depois roda de novo, para que a lista continue correta.

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

Três regras não têm correção automática, e isso é proposital: texto de link ambíguo, contraste insuficiente e id duplicado exigem uma decisão humana sobre o texto, a cor ou qual elemento fica com o id.

O que ele não faz

• Ele lê o conteúdo do editor, não a sua página publicada: estilos aplicados pelo seu site podem alterar o contraste depois de salvar.
• Ele não consegue avaliar se o texto alternativo é preciso, apenas se ele existe, se não é um nome de arquivo e se não é longo demais.
• Uma frase em outro idioma escrita no mesmo sistema de escrita (francês dentro de um texto em inglês) não é detectável; a regra de idioma se baseia no sistema de escrita.
• Ele não substitui os testes com um leitor de tela real antes de um lançamento.