如何使CKEditor删除线功能可访问？

Question

CKEditor的默认删除线功能可以很好地工作，并且可以执行逻辑操作，在带有删除线的文本周围添加“ s”标签（我也可以使编辑器使用html5的“ del”标签），但是问题是，辅助阅读技术因为NVDA或JAWS在没有特殊设置的情况下不会以不同于普通文本的任何方式读取此类内容。 我想做的是在删除线文本的开头和结尾添加一个span标记，以向用户指示这一事实：

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

如您在该代码中看到的那样，跨度在页面中不可见，但是阅读器将遵循dom顺序，因此将向用户提醒删除线。 我知道您可以构建一个插件来插入任何html，但是我必须以具有切换功能的基本样式按钮的工作方式来完成此工作：

• 最简单的部分：如果内容中有一个选择并且按下了按钮，我们就必须删除内容。 这一点比较容易，因为我们可以获取所选的html并用我想要的内容包围它。
• 更难的部分：如果没有选择并且按下了按钮，那么接下来写的每个文本都必须带有删除线。

经过大量的研究和分析，“真正的”插件是如何制成的，我得出这样的结论：

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'
            } );
        }
    }
});

这与真正的插件完全一样，我尝试解决此代码，但是就我所知，样式定义中的element属性仅接受一个标签，我需要一种使用element属性嵌套标签的方法来完成此操作。

有什么办法解决这个问题？

任何帮助，将不胜感激。

Answer 1

对我来说，您似乎正在尝试解决问题的错误原因。 读者的问题是他们没有以不同的方式阅读内容。 掩盖内容可能会帮助一段时间（尽管这会破坏编辑），但是在更新读者并开始正确阅读内容时会出现问题。

无论如何，如果您现在坚持要一些解决方案，那么我有两个建议：

• 您可以在s/del标记上设置一些ARIA角色或其他属性，这将以某种方式影响读者。
• 不要破坏编辑器中的内容，因为这会破坏它。 例如，您可以在将内容发送给最终用户之前对其进行处理（如果这是您要修复的部分）。