CKEditor 4按TAB键无法聚焦工具栏按钮的508无障碍适配需求

你遇到的TAB键无法聚焦工具栏的问题无需修改CKEditor源代码，仅通过调整初始化配置即可解决，具体可参考以下简易方案：

方案1：开启原生工具栏聚焦配置 #

CKEditor 4.x 本身内置了无障碍适配能力，默认关闭了TAB键遍历工具栏的能力以减少表单TAB跳转步骤，你只需要在初始化配置中添加如下参数即可开启：

CKEDITOR.replace('你的编辑器容器ID', {
  // 开启TAB键聚焦工具栏能力
  tabFocusesToolbar: true,
  // 注意不要在removePlugins配置项中移除tabfocus、accessibilityhelp两个默认自带的无障碍插件
  // 其余原有配置保持不变
})

配置完成后，当焦点落在编辑器前序输入框时按TAB，会依次遍历所有工具栏按钮，再进入编辑区域，符合508全键盘操作要求。

方案2：配置回调补充适配（适用于自定义修改过工具栏的场景） #

如果你之前的配置对工具栏做过自定义改造，方案1不生效的话，可以在初始化的instanceReady回调中批量给工具栏按钮设置可聚焦属性，无需修改源码：

CKEDITOR.replace('你的编辑器容器ID', {
  tabFocusesToolbar: true,
  // 其余原有配置保持不变
  on: {
    instanceReady: function(editorEvent) {
      // 批量修改工具栏按钮的tabindex属性为可聚焦状态
      const toolbarBtns = editorEvent.editor.container.findAll('.cke_toolbar .cke_button');
      for (let i = 0; i < toolbarBtns.count(); i++) {
        toolbarBtns.getItem(i).setAttribute('tabindex', 0);
      }
    }
  }
})

适配效果验证 #

适配完成后可按如下操作验证是否符合要求：

• 光标定位到编辑器前的输入框，按TAB键，焦点会依次落在每个工具栏按钮上，按回车或空格可触发对应按钮功能
• 按钮聚焦时会有系统默认的焦点边框提示，也可自定义聚焦样式提高辨识度

内容的提问来源于stack exchange，提问作者Sridhar。