CKEditor v4 Remove / Change Button Title Attribute

Question

On CKEditor V4 all the editor buttons include a title attribute which triggers 50 errors on my client accessibility software.

Although we advised that this is not really an issue since the issue is caused because the title attribute exists with a different text that is on the button, the client insists this issue needs to be fixed.

Upgrading to V5 is not a possibility.

Is it possible to remove the title attribute from CKEditor buttons (ex: Bold, Italic, Font...)?

Is there another way to fix this issue?

Thanks in advance.

Answer 1

First of all: You should not remove the title attribute, it is deteriorating usability and therefore accessibility.

A user’s understanding of an icon is based on previous experience. Due to the absence of a standard usage for most icons, text labels are necessary to communicate the meaning and reduce ambiguity.

– Icon Usability by NN/g

---

It might still be interesting how one would go about reliably changing toolbar buttons’ properties.

A lot of articles work directly on the DOM, which is a hack and sensitive to side-effects. You never know when a component is re-rendering its DOM.

The editor titles come from the toolbar configuration, specifically from config.toolbar[*].items[*].title.

You will need to apply an “Item by Item” Configuration by creating a function to remove titles from the configuration.

I couldn’t figure out how to intervene each time when a new config part is loaded, for example by plug-ins, so in the example editorConfig is only called once with an object that does not define toolbar.

   // This should go in the config.js file

const removeToolbarTitles = c => ({
   ...c,
   toolbar: [
      c.toolbar?.map(t => ({
        ...t,
        items: Array.isArray(t.items) ? t.items.map(i => removeItemTitle(i)) : t.items
      }))
   ]
});

const removeItemTitle = i => Object.fromEntries(Object.entries(i).filter(e => e[0] !== 'title'));

/* Change any loaded config file to remove titles */
CKEDITOR.editorConfig = removeToolbarTitles;

<script src="https://cdn.ckeditor.com/4.22.1/standard/ckeditor.js" integrity="sha384-IBDNY5TVKWr+u1841ldzW99oyOoUBpoGeouNuoXVwF0PBFR3v10dzwm09xNIEeiG" crossorigin="anonymous"></script>