Thorium Reader 可访问性优化：注解编辑器中的标签重复问题分析

在开发 Thorium Reader 电子书阅读器的过程中，我们发现注解编辑器面板中存在一个潜在的可访问性问题。这个问题涉及到为视觉障碍用户设计的屏幕阅读器（Screen Reader）可能会重复读取相同的标签信息。

问题背景

在注解编辑器的"高亮类型"选择区域，开发团队使用了单选按钮（radio buttons）来实现不同类型的高亮效果选择。这些单选按钮的代码实现中同时使用了两种命名方式：

1. 通过 aria-label 属性提供可访问名称
2. 通过 title 属性提供工具提示文本

这两种命名方式实际上包含了相同或相似的内容，这可能导致屏幕阅读器重复读取相同的信息，影响用户体验。

技术实现分析

在 React 组件 AnnotationEdit.tsx 中，单选按钮的实现采用了以下结构：

<input
  type="radio"
  aria-label={`${__("reader.annotations.highlight")}...`}
  // 其他属性
/>
<label
  title={`${type === "solid_background" ? __("reader.annotations.type.solid")...`}
  // 其他属性和子元素
>
  {/* SVG图标 */}
</label>

这种实现方式引发了关于最佳可访问性实践的讨论。开发团队需要考虑：

1. 屏幕阅读器如何与视觉隐藏的输入元素交互
2. 如何为仅包含SVG图标的标签提供有意义的文本描述
3. 工具提示(title)和ARIA标签(aria-label)的合理使用场景

可访问性最佳实践

根据WAI-ARIA创作实践指南，在处理表单元素的可访问名称时，应遵循以下原则：

1. 优先使用原生HTML技术：在HTML文档中，尽可能依赖HTML本身的命名技术，如表单元素的label标签和表格的caption元素。这些技术虽然灵活性较低，但简单可靠，能确保稳定的可访问体验。

2. 避免浏览器回退机制：当开发者没有使用专门的命名元素或属性时，浏览器会尝试使用回退方法生成可访问名称。例如，HTML的title和placeholder属性会被作为最后的手段用于提供可访问名称。但由于这些属性本意并非用于命名，它们提供的内容通常质量较低，效果不佳。

解决方案讨论

针对Thorium Reader中的具体情况，开发团队考虑了多种解决方案：

1. 保留现有实现：同时使用aria-label和title属性，确保在各种情况下都能提供足够的可访问信息。这种"双保险"的做法虽然可能导致轻微的内容重复，但能覆盖更广泛的使用场景。

2. 简化实现：仅依赖title属性，因为现代屏幕阅读器已经能够很好地处理这种场景。这种做法可以减少代码复杂度，但可能在某些边缘情况下表现不佳。

3. 重构UI结构：考虑修改视觉设计，在标签中包含明确的文本内容，而不仅仅是图标。这样可以直接使用label元素的文本内容作为可访问名称，是最符合HTML原生实践的做法。

经过实际测试（特别是使用VoiceOver屏幕阅读器），团队确认现有实现能够提供良好的可访问性体验，最终决定保持当前的双重命名策略。这种决策平衡了代码简洁性和用户体验可靠性，确保了所有用户都能无障碍地使用注解编辑器功能。

结论

在开发具有高可访问性要求的应用时，Thorium Reader团队的经验表明，有时需要在代码简洁性和用户体验可靠性之间做出权衡。通过实际测试和遵循WAI-ARIA指南，团队确保了注解编辑器对所有用户——包括使用辅助技术的用户——都能提供一致且友好的体验。这个案例也展示了在React应用中实现良好可访问性实践的具体方法。