How to make CKEditor strikethrough functionality accessible?

Question

Default strikethrough functionality of CKEditor works well and do what is logic, adding an "s" tag surrounding the text that has strikethrough (also I can make the editor use html5's "del" tag), the problem however, is that assistive reading technologies such as NVDA or JAWS do not read this kind of content in any way different from normal text without special settings. What I'm trying to do is to add a span tag at the beginning and at the end of strikethrough text indicating this fact to the user:

<p>
    <span style="height: 1px; width: 1px; position: absolute; overflow: hidden; top: -10px;">Start strikethrough. </span>
    <s>Text with strikethrough</s>
    <span style="height: 1px; width: 1px; position: absolute; overflow: hidden; top: -10px;">End strikethrough. </span>
</p>

As you can see in this code the span is not visible in the page but the reader will follow dom order so the user will be alerted of the strikethrough. I know you can build a plugin to insert any html but I have to make this work in the same way basic styles buttons work, with toggle feature:

• The easy part: if there is a selection in the content and the button is pressed we have to strikethrough the content. This one is easier as we can get the selected html and surround it with what I want.
• The harder part: if there is no selection and the button is pressed then every text written next must have the strikethrough.

After lot of researching and analysing how the "real" plugin was made I came to something like this:

CKEDITOR.plugins.add( 'customStrike', {
    icons: 'customStrike',
    init: function( editor ) {
        var style = new CKEDITOR.style( { element: 's' } );

        editor.attachStyleStateChange( style, function (state) {
            !editor.readOnly && editor.getCommand( 'customStrike').setState(state);
        } );

        editor.addCommand( 'customStrike', new CKEDITOR.styleCommand( style ) );

        if ( editor.ui.addButton ) {
            editor.ui.addButton( 'CustomStrike', {
                label: 'Strike Through',
                command: 'customStrike',
                toolbar: 'custom'
            } );
        }
    }
});

This works exactly as the real plugin, I tried to work around this code but the element property in the style defintion only accepts one tag as far as I know, I would need a way to nest tags using the element property to accomplish this.

Is there any way to solve this?

Any help would be appreciated.

Answer 1

For me it looks like you're trying to fix the wrong end of the problem. It's readers' problem that they don't read the content differently. Clobbering the content may help for a while (although it will break the editing), but will be a problem when the readers are updated and start reading the content properly.

Anyway, if you insist on having some solution right now, then I have two advices:

• There may be some ARIA role or other attribute that you could set on the s/del tag which will somehow affect the readers.
• Do not clobber the content inside the editor, because you will break it. You could for example process the content before sending it to the end user, if that's the part that you want to fix.