如何为 CKEditor 中的代码块添加 aria-label 以提升可访问性？
2024-03-12 18:46:40
在 CKEditor 中为代码块添加 aria-label
前言
在 CKEditor 5 中插入代码块时，会出现一个用于指定代码块语言的小标签。然而，此标签对于辅助技术用户来说不可访问，因为它缺乏适当的语义信息。本文将指导您通过为代码块添加 aria-label 来解决此问题。
问题：可访问性缺失
代码块中的小标签只显示一个语言标识符，例如 "js" 或 "html"。对于辅助技术用户，这些标识符毫无意义，无法识别代码块的语言。这会阻碍他们理解和与内容互动。
解决方法：添加 aria-label
为了提高可访问性，应为代码块添加一个 aria-label 属性。aria-label 为标签提供文本，使其可以被辅助技术读取。通过添加一个代码块语言的 aria-label，辅助技术用户将能够轻松识别代码块的内容。
步骤：
- 事件侦听器： 当代码块的语言改变时，应触发一个事件侦听器。
- 查询预元素： 使用 JavaScript，查询所有预元素 (
<pre>)，这些元素包含代码块。 - 获取语言： 对于每个预元素，获取其包含的代码元素 (
<code>) 的类名，并提取语言标识符。 - 设置 aria-label： 使用获取的语言标识符，为预元素设置 aria-label 属性。
代码示例：
CKEDITOR.on('instanceReady', (e) => {
const editor = e.editor;
editor.model.document.on('change', () => {
const preElements = editor.document.querySelectorAll('pre');
preElements.forEach(pre => {
const code = pre.querySelector('code[class^="language-"]');
if (code) {
const language = code.className.replace('language-', '');
pre.setAttribute('aria-label', language);
}
});
});
});
好处：
- 提高可访问性： 辅助技术用户现在可以轻松识别代码块的语言，使其更容易理解和与内容互动。
- 增强语义： aria-label 提供了有关代码块的附加语义信息，这对于理解和索引内容很有用。
- 符合标准： 为代码块添加 aria-label 符合 WCAG（网络内容无障碍指南）的最佳实践，它规定应为所有交互式元素提供适当的标签。
常见问题解答
1. 为什么我的 aria-label 不起作用？
确保已正确设置 aria-label 属性，并且您的代码块包含一个类名以标识其语言。
2. 如何为多种语言的代码块添加 aria-label？
如果代码块包含多种语言，请将每个语言标识符用空格分隔添加到 aria-label 中。
3. 我可以用其他方法提高代码块的可访问性吗？
除了添加 aria-label 之外，您还可以在代码块周围添加一个 <details> 元素，以提供有关代码块的附加信息，例如代码块的标题和描述。
4. 为代码块添加 aria-label 会影响我的 SEO 吗？
向代码块添加 aria-label 不会对您的 SEO 产生负面影响，反而有助于搜索引擎更好地理解和索引您的代码内容。
5. 我可以在其他编辑器中使用此方法吗？
此方法依赖于 CKEditor 5 的特定事件和元素结构。它可能不适用于其他编辑器，但您可以根据其文档调整代码。
结论
通过为 CKEditor 5 中的代码块添加 aria-label，您可以显著提高其可访问性。这使辅助技术用户能够轻松识别代码块的语言，并与内容进行有效互动。通过实施此解决方法，您可以为所有用户创造一个更包容和无障碍的体验。
