如何使你的编辑器可访问

Editor

我们努力使 Tiptap 对每个人都可访问。但这与我们作为无头编辑器的事实是相悖的。我们不提供界面，因此确保编辑器可访问性完全依赖于你。以下是一些帮助你的指导方针。

可访问编辑器演示

以下是使你的编辑器可访问的非详尽指导方针清单：

确保所有编辑器功能都可以通过键盘访问。这包括在编辑器中导航、选择文本、菜单，以及使用所有编辑器功能。如果你查看上面的演示，你会发现可以通过键盘导航编辑器，具体方法如下：

使用 Tab 在编辑器内聚焦
使用 Alt + F10 聚焦于编辑器的工具栏
- 使用箭头键在工具栏中导航
- 使用 Enter 选择菜单项
- 使用 Tab 或 Esc 导航返回编辑器内容
使用 Shift + 箭头键 选择文本
- 使用 Tab 导航到文本选择菜单
- 使用 Enter 选择菜单项
- 使用 Tab 或 Esc 导航返回编辑器内容
使用 Enter 创建一个新段落
- 使用 Tab 导航到插入内容菜单
  - 使用箭头键在工具栏中导航
  - 使用 Enter 选择菜单项，插入内容
  - 使用 Tab 或 Esc 导航返回编辑器内容
所有其他编辑器快捷键，如键盘快捷键中所述

所有默认的 Tiptap 扩展都生成语义标记。这意味着编辑器生成的 HTML 对于屏幕阅读器来说易于理解。

为了进一步帮助屏幕阅读器，您的编辑器和菜单应提供适当的 Aria 角色。以下是一些示例：

界面需要具有明确定义的对比度及足够大的点击区域。目前，我们不提供界面，因此这完全取决于你。

在实现可访问性时，我们发现了一些需要注意的事项：

在 macOS 上使用 VoiceOver 时，需要注意它可能会连接跨越块元素的单词。这可能导致依赖屏幕阅读器的用户出现意外的阅读体验。

例如，考虑以下 HTML 结构：

<h1>标题</h1>
<p>段落</p>

VoiceOver 会将其读作 "标题段落"，而不是 "标题段落"（注意空格）。要解决此问题，可以在每个块元素后添加一个零宽空格：

.tiptap {
  h1::after,
  h2::after,
  h3::after,
  h4::after,
  h5::after,
  h6::after,
  p::after {
    content: '\200B';
  }
}

键盘陷阱是指用户无法使用键盘从某个元素导航离开的情况。如果你有可以通过键盘打开的模态或菜单，这可能是一个问题。确保用户始终能够离开这些元素。

可选的写作辅助可以帮助人们书写语义上正确的内容，例如指出标题级别的错误使用。通过由核心开发者提供这样的辅助，我们可以帮助改善许多应用程序的内容。