Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/84.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 如何使CKEditor删除线功能可访问?_Javascript_Html_Ckeditor_Accessibility_Strikethrough - Fatal编程技术网

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

Javascript 如何使CKEditor删除线功能可访问?,javascript,html,ckeditor,accessibility,strikethrough,Javascript,Html,Ckeditor,Accessibility,Strikethrough,CKEditor的默认删除线功能很好地工作,并且执行逻辑操作,在带有删除线的文本周围添加一个“s”标记(我也可以让编辑器使用html5的“del”标记),但问题是,辅助阅读技术,如NVDA或JAWS,在没有特殊设置的情况下,不会以任何不同于普通文本的方式阅读此类内容。我想做的是在删除线文本的开头和结尾添加一个span标记,向用户指出这一事实: <p> <span style="height: 1px; width: 1px; position: absolute; ov

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>
这与真正的插件完全一样,我试图绕过这段代码,但就我所知,样式定义中的元素属性只接受一个标记,我需要一种使用元素属性嵌套标记的方法来实现这一点

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


任何帮助都将不胜感激。

对我来说,您似乎试图解决问题的错误端。读者的问题是他们阅读内容的方式不同。重读内容可能会有一段时间的帮助(尽管它会破坏编辑),但当读者更新并开始正确阅读内容时,这将是一个问题

不管怎样,如果你坚持现在就有一些解决方案,那么我有两个建议:

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

谢谢@Reinmar,我也考虑了第二种选择,我将探讨如何将其应用到我们的流程中。关于第一个,使用aria属性,我在尝试之前没有想到它。再次感谢
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'
            } );
        }
    }
});