3步解锁Earthworm无障碍学习：让每个人都能高效掌握英语

你还在为英语学习中的操作障碍烦恼吗？无论是视力不佳、肢体不便，还是偏好语音交互，Earthworm的无障碍设计都能让你专注于语言学习本身。本文将带你快速配置个性化无障碍环境，通过快捷键、语音反馈和界面优化三大核心功能，轻松突破学习瓶颈。

无障碍功能全景图

Earthworm的无障碍设计围绕"降低操作门槛"构建，主要包含四大模块：

功能类别	核心实现	用户价值
键盘导航	自定义快捷键	解放鼠标，肢体障碍用户可高效操作
语音反馈	自动发音控制	视力障碍用户的"听觉教材"
界面适配	进度条组件	清晰展示学习状态，支持屏幕阅读器
操作简化	游戏模式设置	减少重复操作，专注学习内容

核心功能实现解析

1. 全键盘操作体系

Earthworm实现了VSCode级别的快捷键系统，支持全流程无鼠标操作：

// 默认快捷键配置 [shortcutKey.ts#L12-L19]
export const DEFAULT_SHORTCUT_KEYS = {
  sound: "Ctrl+'",      // 播放发音
  answer: "Ctrl+;",     // 显示答案
  skip: "Ctrl+.",       // 跳过题目
  previous: "Ctrl+,",   // 上一题
  mastered: "Ctrl+m",   // 标记掌握
  pause: "Ctrl+p"       // 暂停学习
};

用户可通过设置页面自定义组合键，系统会自动检测冲突：

// 快捷键冲突检测 [shortcutKey.ts#L115-L119]
function checkSameShortcutKey(key: string) {
  const keys = Object.values(shortcutKeys.value);
  const currentShortcutKey = shortcutKeys.value[currentKeyType.value];
  return keys.some((x) => x === key && x !== currentShortcutKey);
}

2. 智能语音交互系统

语音反馈模块提供多层次听觉支持，核心代码位于sound.ts：

// 自动发音控制 [sound.ts#L7-L21]
export function useAutoPronunciation() {
  const {
    value: autoPlaySound,
    isTrue: isAutoPlaySound,
    toggle: toggleAutoPlaySound,
    remove: removeAutoPlaySound,
  } = useLocalStorageBoolean(AUTO_PRONUNCIATION, true); // 默认开启

  return {
    autoPlaySound,
    isAutoPlaySound,
    toggleAutoPlaySound,
    removeAutoPlaySound,
  };
}

支持三种语音场景切换：

• 答案页面自动播放
• 答题过程实时发音
• 美式/英式口音切换

3. 无障碍界面组件

ProgressBar.vue实现了高对比度进度指示：

<template>
  <div class="rounded-lg border border-gray-300 dark:border-gray-600">
    <div
      class="h-full rounded-lg bg-gradient-to-r from-emerald-200 to-emerald-400 transition-all dark:from-emerald-300 dark:to-emerald-500"
      :style="{ width: `${percentage}%` }"
    ></div>
  </div>
</template>

深色模式自动适配系统设置，通过UserMenu.vue的主题切换功能实现：

// 主题切换逻辑 [UserMenu.vue#L117-L121]
{
  title: "主题切换",
  name: "changeTheme",
  eventName: toggleDarkMode,
  icon: isDarkMode.value ? "i-ph-moon" : "i-ph-sun",
},

3步快速配置指南

第1步：进入无障碍设置中心

1. 点击右上角用户菜单（头像图标）
2. 选择"设置"选项，进入User/Setting.vue
3. 系统会自动检测你的操作习惯，推荐个性化配置方案

第2步：配置核心无障碍选项

必选设置	推荐配置
键盘音效	开启（帮助确认操作）
自动发音	开启（听力辅助）
快捷键方案	肢体障碍用户建议简化为单键组合
错误提示	开启（三次错误自动显示答案）

第3步：验证无障碍环境

完成设置后，可通过以下方式验证：

1. 按Ctrl+'测试发音功能
2. 尝试不使用鼠标完成一整节课程
3. 检查屏幕阅读器是否能正确识别所有按钮

高级自定义技巧

快捷键高级配置

通过修改shortcutKey.ts的DEFAULT_SHORTCUT_KEYS常量，可实现：

• 单键操作（适合重度肢体障碍用户）
• 左手/右手优化布局
• 适配特殊输入设备

语音引擎扩展

项目预留了第三方TTS集成接口，可通过pronunciation.ts扩展更多语音引擎：

// 发音引擎扩展点 [pronunciation.ts#L104-L118]
<tr class="hover">
  <td class="label-text">切换口音</td>
  <td class="text-right">
    <div class="join">
      <input
        v-for="lang in getPronunciationOptions()"
        class="btn join-item btn-sm"
        type="radio"
        name="options"
        :value="lang.value"
        :aria-label="lang.label"
        :checked="pronunciation === lang.value"
        @change="togglePronunciation(lang.value as PronunciationType)"
      />
    </div>
  </td>
</tr>

无障碍路线图

Earthworm团队计划在未来版本中添加：

• 盲文输入支持
• 语音命令控制系统
• 学习数据语音播报
• 更多辅助技术兼容认证

如果你有特定无障碍需求，可通过建议反馈功能提交需求，开发团队会优先处理无障碍相关issues。

---

掌握这些设置后，无论你处于何种环境，都能通过Earthworm高效学习英语。立即打开设置页面，开启个性化无障碍学习之旅吧！如果觉得本文有帮助，请点赞收藏，关注项目更新获取更多无障碍使用技巧。

官方文档：packages/docs/get-started/quick-start.md
功能源码：apps/client/composables/user/
问题反馈：建议反馈入口