Accessibility checker for CKEditor5

The CKeditor4 accessibility checker was never ported to v5, so I’ve been working for the last year to rewrite Editoria11y to fill that niche — and as a bonus, the work resulted in code that can also check inline TinyMCE instances as well as Gutenberg.

The 2.3 Demo includes an editable container (TinyMCE). Try editing, deleting and adding content to see how this works.

Setup

Since Editoria11y wraps around the editor, it is not installed as a CKEditor plugin. Rather, you install both libraries separately, and then tell Editoria11y to watch for content editor containers.

Note that it should “just work” if Editoria11y is monitoring the whole page. But in many content management systems, CKEditor is called on a separate edit page, rather than inline with the other content. For those systems, it often makes sense to pass different parameters to Editoria11y on the edit pages.

Here’s a basic example of settings for an edit page:

window.addEventListener("load", () => {
  window.setTimeout(() => {
    const ed11y = new Ed11y({
      cssUrls: ['/PATH/TO/YOUR/EDITORIA11Y.MIN.CSS'],
      checkRoots : '[contenteditable="true"]',
      preventCheckingIfAbsent: '[contenteditable="true"]',
      alertMode : 'active',
      buttonZIndex : 999,
    });
  }, 100);
  window.setTimeout(function(){
    if (Ed11y.panel) {
      Ed11y.alignButtons(); // Optional, in case drawing the editor misaligns something.
    } else {
      // In my Drupal and WordPress implementations, I also do a fallback init hereish 
      // if the load event never fired, with a once variable to prevent double loading.
    }
  }, 2500);
});

Those settings would only check the editable fields, and would not even show Editoria11y if there were no editable fields.

There are many other options you may want to set — e.g., to define what the first heading level in the editor should be, or to tell Editoria11y to ignore headings that are not inside the editable container.

The Drupal and WordPress implementations also sync dismissals, so dismissed items are recognized between the “live” and “edit” views of the same content.

It gets a bit more complicated if you load CKEditor after a user interaction. The Drupal module sets listeners for CMS events that may fire if a user interaction adds or removes editable fields, and tells Editoria11y to check for new editors after these events. If CMS events are not available, you might need to write your own initiator that watches for browser interactions or mutations.