如何让纯键盘导航用户在CKEditor5中选择文本样式？元素默认无tabindex

对于依赖键盘导航的用户，可通过以下几种方式在CKEditor5中修改文本样式：

一、使用内置快捷键直接操作 #

CKEditor5默认提供了常用样式的键盘快捷键，无需切换到工具栏即可快速应用：

• 加粗：Ctrl+B（Windows/Linux） / Cmd+B（Mac）
• 斜体：Ctrl+I / Cmd+I
• 下划线：Ctrl+U / Cmd+U
• 撤销：Ctrl+Z / Cmd+Z
• 重做：Ctrl+Y / Cmd+Y
• 更多样式的快捷键可通过编辑器内置的帮助菜单（若启用）查看，或对应命令的默认映射。

二、聚焦工具栏进行操作 #

若需要使用工具栏上的其他样式按钮（如标题、列表、对齐等），可通过以下步骤用键盘聚焦并操作：

1. 按下 Alt+F10（Windows/Linux）或 Option+F10（Mac），快速将焦点切换到编辑器工具栏。
2. 使用左右箭头键在工具栏按钮间切换焦点。
3. 按下回车键或空格键激活选中的样式按钮。
4. 若工具栏存在下拉菜单（如字体选择、格式菜单），激活后可使用上下箭头选择选项，回车确认。

三、让工具栏元素加入全局Tab流 #

如果需要让工具栏按钮直接参与页面的Tab键切换（默认工具栏不在Tab流中），可通过编辑器初始化时的配置或API修改：

1. 初始化配置+API调整：创建编辑器实例时，通过配置和代码为工具栏按钮添加tabindex属性：

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        toolbar: [ 'bold', 'italic', 'link', 'bulletedList', 'numberedList' ],
        accessibility: {
            toolbarKeyboardNavigation: true
        }
    } )
    .then( editor => {
        // 手动为工具栏按钮设置tabindex，使其进入Tab流
        editor.ui.view.toolbar.items.forEach( item => {
            if ( item.element ) {
                item.element.setAttribute( 'tabindex', '0' );
            }
        } );
    } )
    .catch( error => {
        console.error( error );
    } );

2. 配置完成后，按下Tab键即可在页面所有可交互元素（包括工具栏按钮）之间切换焦点，激活方式同上（回车/空格）。

四、确保表单内全局Tab交互正常 #

若编辑器嵌入在表单中，需避免编辑器捕获Tab键导致无法跳出到其他表单元素：

• 在编辑器配置中禁用Tab键的编辑器内缩进功能，让Tab键直接用于页面导航：

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        tabIndex: 0,
        keystrokes: [
            {
                key: 'Tab',
                callback: ( editor, cancel ) => {
                    // 取消编辑器对Tab键的默认处理，交由浏览器处理全局导航
                    cancel();
                }
            },
            {
                key: 'Shift+Tab',
                callback: ( editor, cancel ) => {
                    cancel();
                }
            }
        ]
    } )

• 此配置下，Tab键会从编辑器焦点切换到页面下一个可交互元素，Shift+Tab则切换到上一个，实现全局Tab流的连贯。

内容的提问来源于stack exchange，提问作者Matt Jackson