如何使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角色或其他屬性，這將以某種方式影響讀者。
• 不要破壞編輯器中的內容，因為這會破壞它。 例如，您可以在將內容發送給最終用戶之前對其進行處理（如果這是您要修復的部分）。