CKEditor V4按钮title属性触发无障碍软件报错，求移除或修改方案（无法升级V5）

一、移除指定按钮的title属性 #

可以通过CKEditor的instanceReady事件遍历目标按钮，直接清除其title属性，实现起来简单高效：

CKEDITOR.on('instanceReady', function(evt) {
    var editor = evt.editor;
    // 定义需要移除title的按钮名称
    var targetButtons = ['bold', 'italic', 'font'];
    
    targetButtons.forEach(function(buttonName) {
        var button = editor.ui.get(buttonName);
        if (button && button.element) {
            button.element.removeAttribute('title');
        }
    });
});

如果需要批量处理更多按钮，只需扩展targetButtons数组即可。

二、其他合规修复方案 #

如果不想完全移除title属性，以下方案更符合无障碍设计原则：

• 统一title与按钮显示文本：将title属性修改为与按钮功能/显示文本完全一致的内容，从根源解决无障碍软件的检测错误，示例代码：

CKEDITOR.on('instanceReady', function(evt) {
    var editor = evt.editor;
    // 按钮名称与对应合规title的映射
    var buttonTitleMap = {
        'bold': '粗体',
        'italic': '斜体',
        'font': '字体'
    };
    
    Object.keys(buttonTitleMap).forEach(function(buttonName) {
        var button = editor.ui.get(buttonName);
        if (button && button.element) {
            button.element.setAttribute('title', buttonTitleMap[buttonName]);
        }
    });
});

• 优化内置无障碍配置：开启CKEditor的config.accessibilityHelpEnabled配置，同时通过config.title精细化控制编辑器区域的标题属性，确保整体符合WCAG无障碍标准。
• 自定义按钮模板：修改CKEditor的按钮模板文件，默认不生成title属性。这种方式需要定制编辑器核心模板，适合长期维护的项目，但要注意后续版本升级时的兼容性。

内容的提问来源于stack exchange，提问作者Mario Andrade