Thorium Reader 注释面板的可访问性改进与数据展示优化-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_07177/article/details/148665640

Thorium Reader 注释面板的可访问性改进与数据展示优化

thorium-reader A cross platform desktop reading app, based on the Readium Desktop toolkit 项目地址: https://gitcode.com/gh_mirrors/th/thorium-reader

在电子书阅读器开发领域，Thorium Reader作为一款开源阅读器，其注释功能是核心交互模块之一。近期社区反馈揭示了注释面板在数据展示和可访问性方面存在若干值得关注的优化点。

当前注释面板的信息架构

注释面板目前展示的信息维度包括：

注释文本内容（核心信息）
修改日期（时间戳）
书籍位置百分比（空间定位）
操作按钮（编辑/删除功能入口）

缺失的关键元数据

通过用户反馈发现，以下三类元数据虽然存在于系统后台，但未在前端界面充分展示：

颜色标识系统
当前仅通过左侧边框的视觉颜色区分不同类型注释，但缺乏：
- 屏幕阅读器可识别的文本描述
- 颜色名称/类型的文字说明
- 色彩编码的系统性说明文档
创作者信息
多用户协作场景下缺失：
- 注释作者标识
- 作者区分机制
- 权限关联展示
完整时间轴
时间维度信息存在展示矛盾：
- 界面显示修改日期而非创建日期
- 缺乏修改历史追溯
- 时间展示格式未标准化

可访问性缺陷分析

对辅助技术用户的主要障碍：

颜色信息仅通过视觉通道传递，违反WCAG 1.4.1色彩使用准则
动态生成的注释列表缺乏ARIA标签支持
排序/过滤功能依赖不可见属性，造成认知负担

技术实现建议

前端展示层优化

// 注释项组件增强方案示例
interface EnhancedAnnotationItem {
  content: string;
  color: { 
    code: string;
    name: string; // 国际化颜色名称
    ariaLabel: string;
  };
  creator: {
    id: string;
    displayName: string;
    avatar?: string;
  };
  timestamps: {
    created: ISOString;
    modified: ISOString;
    formattedCreated: string; // 本地化格式
    formattedModified: string;
  };
  location: {
    percentage: number;
    chapter?: string;
  };
}