本页面介绍了影响 TinyMCE 如何支持键盘用户和屏幕阅读器的配置选项。有关使用键盘操作编辑器的指导,请参阅后续的“如何使用编辑器”部分。
有关 TinyMCE 开发所依据的无障碍标准以及可供下载的无障碍一致性报告,请参阅 无障碍一致性。
如何使用编辑器
TinyMCE 支持完整的键盘导航。用户无需使用鼠标即可访问菜单栏、工具栏和上下文工具栏。
菜单和工具栏
编辑器提供了两种主要方式来访问格式和编辑功能:
菜单栏:当已知所需命令时使用菜单栏。菜单将相关操作分组,对于有经验的用户来说,导航速度更快。
工具栏:使用主工具栏执行常用操作。工具栏按钮默认可见,并提供对常见格式选项的快速访问。
上下文工具栏:某些操作仅在上下文工具栏中可用,当光标位于特定内容(如图像、链接或表格)上时,这些工具栏会出现。
当某个功能仅出现在上下文工具栏中(例如,编辑图像的替代文本)时,按 Ctrl+F9 可将焦点置于上下文工具栏。
编辑器导航的键盘快捷键
将焦点移动到菜单栏、工具栏、上下文工具栏、元素路径和通知的快捷键列于编辑器键盘快捷键中。在各个菜单、工具栏按钮和对话框控件之间移动的快捷键列于无障碍键盘快捷键中。有关这些快捷键的逐个任务解释,请参阅 无障碍导航指南。
当光标位于具有上下文特定操作的内容(如图像或链接)上时,会出现上下文工具栏。例如,仅使用键盘编辑图像的替代文本:
将光标置于图像上。
按 Ctrl+F9(Windows、Linux 或 macOS)将焦点置于上下文工具栏。
使用箭头键移动到所需按钮(例如,图像选项或替代描述)。
按 Enter 或 Space 激活按钮。
屏幕阅读器
TinyMCE 可与常见的屏幕阅读器配合使用,包括 VoiceOver(macOS 和 iOS)、JAWS 和 NVDA。帮助插件提供了一个“键盘导航”选项卡,记录了完整的键盘导航模型。当加载帮助插件时,打开帮助对话框的快捷键(Alt+0 或 ⌥+0)默认显示在状态栏中。
a11y_advanced_options
此选项影响以下插件的功能:
无障碍检查器插件(
a11ychecker)。图像插件(
image)。由 Uploadcare 提供支持的媒体优化器插件(
uploadcare)。
将 a11y_advanced_options 设置为 true:
在插入/编辑图像对话框中添加图像是装饰性的选项,允许用户指定图像为装饰性图像,并且出于无障碍目的不需要替代文本。
在媒体优化器的替代文本上下文工具栏中添加装饰性图像按钮,允许用户指定图像为装饰性图像,并且出于无障碍目的不需要替代文本。
在无障碍检查器错误对话框中为需要标记为装饰性的图像添加图像是装饰性的选项。
如果未显式设置
a11ychecker_allow_decorative_images,则会使用a11y_advanced_options中定义的值。
类型:Boolean
默认值:false
可能的值:true,false
示例:使用 a11y_advanced_options
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'a11ychecker image',
toolbar: 'a11ycheck image',
a11y_advanced_options: true,
});highlight_on_focus
在 TinyMCE 7.0 中,highlight_on_focus的默认设置已从false更改为true。任何在 TinyMCE 中使用此highlight_on_focus: true选项的编辑器,在升级到 TinyMCE 7.0 时可以从其 TinyMCE 初始化配置中删除此选项。
highlight_on_focus 选项会在实例化的 TinyMCE 编辑器获得输入焦点时为其添加蓝色轮廓。使用 oxide-dark 皮肤时,轮廓为白色。
这允许用户清楚地看到编辑器何时处于焦点状态,或者在有多个 TinyMCE 实例可用时,哪个编辑器具有焦点。
类型:Boolean
默认值: true
可能的值: true,false
示例:使用 highlight_on_focus
tinymce.init({
selector: "textarea",
highlight_on_focus: false
});使用 highlight_on_focus 配合自定义外观
如果使用了自定义外观,可以更新两个变量来使 highlight_on_focus 选项的外观与自定义外观相匹配。
这两个规则及其默认值如下:
@edit-area-border-color: #2D6ADF; @edit-area-border-width: 2px;
这完全是可选的。如果默认值未更改,highlight_on_focus 选项在自定义外观下的工作方式与 TinyMCE 默认外观下的工作方式完全相同。iframe_aria_text
此选项为 TinyMCE 的 iframe 及其可编辑内容区域设置可访问名称。屏幕阅读器会读取该值以帮助用户识别编辑器。
TinyMCE 按如下方式应用该值:
所有操作系统:TinyMCE 将该值设置为 iframe 元素的
title属性。macOS 和 iOS:TinyMCE 还会将该值设置为 iframe 文档内
<body>元素上的aria-label,同时设置role="textbox"和aria-multiline="true"。VoiceOver 屏幕阅读器不会播报 iframe 的title,因此在这些操作系统上,<body>元素承载可访问名称。
例如,在 macOS 上:
<iframe title="Rich Text Area"> <!-- Inside the iframe document --> <body role="textbox" aria-multiline="true" aria-label="Rich Text Area"></body> </iframe>
此选项仅适用于 TinyMCE classic (iframe) 模式,对 inline 编辑器无效。
类型: String
默认值: 'Rich Text Area'
当加载Help 插件时,'. Press ALT-0 for help.' 会被追加到默认值中,从而得到 'Rich Text Area. Press ALT-0 for help.'。当插件未加载时,不会添加该后缀,因为其描述的快捷方式不可用。
示例:使用 iframe_aria_text
tinymce.init({
selector: 'textarea', // change this value according to your HTML
iframe_aria_text: 'Text Editor'
});Tab 键顺序
页面中元素的 Tab 键顺序(包括 TinyMCE)应通过在相关 HTML 元素上设置 tabindex 属性来配置。浏览器随后会原生处理 Tab 键顺序。
要为 TinyMCE 编辑器配置 tabindex,请在编辑器的目标元素上设置该属性。
在 iframe(经典编辑器)模式下,TinyMCE 会将目标元素的 tabindex 属性复制到编辑器的 iframe 中,以确保其正常工作。
示例:配置 Tab 键顺序
<script>
tinymce.init({
selector: 'textarea'
});
</script>
...
<input tabindex="1">
<textarea tabindex="2"></textarea>
<input tabindex="3">help_accessibility
当加载Help 插件时,TinyMCE 编辑器默认会在 TinyMCE 状态栏中显示用于访问 Help 对话框的键盘快捷方式。
help_accessibility 选项允许关闭此显示。
类型: Boolean
默认值: true
可能的值: true,false
示例:关闭 help_accessibility
tinymce.init({
selector: "textarea", // change this value according to your HTML
plugins: "help",
help_accessibility: false,
});示例:显式开启 help_accessibility
加载 Help 插件时,help_accessibility 选项默认设置为 true。
没有必要,但可能有用,是显式将该选项设置为 true。
tinymce.init({
selector: "textarea", // change this value according to your HTML
plugins: "help",
help_accessibility: true,
});