语言切换按钮需用 aria-label 明确动作(如“切换到英语”),lang 属性准确标记按钮内文语言,aria-label 语言须与当前页面一致,且应配合 hreflang 声明多语言版本。

语言切换按钮需要同时满足可访问性(无障碍)和语义正确性,核心是用 aria-label 清晰说明按钮功能,并用 lang 属性准确标记目标语言内容。
按钮本身用 aria-label 说明“切换到哪种语言”
aria-label 应描述操作结果,而非当前状态或语言名称本身。它面向屏幕阅读器用户,需明确动作意图:
- ✅ 推荐:
aria-label="切换到英语"、aria-label="Switch to Chinese" - ❌ 避免:
aria-label="English"(未说明动作)、aria-label="当前语言:中文"(与切换功能无关) - 若按钮内含文字(如“EN”),仍建议加
aria-label,因为缩写对部分用户不直观
按钮内文本或图标需用 lang 标记其语言归属
按钮上显示的语言标识(如“中文”“EN”“日本語”)本身是某种语言的文本,应通过 lang 属性标明其语言,确保语音合成器读音准确:
- 中文按钮文字:
- 英文按钮文字:
- 日文按钮文字:
- 若用缩写(如“EN”),按惯例属英语,用
lang="en";“CN”不是标准语言代码,应避免,改用“中文”+lang="zh"
整个按钮组合需保持逻辑一致
aria-label 的语言应与当前页面语言一致(即用户当前界面语言),而 lang 属性始终描述按钮内文本自身的语言:
立即学习“前端免费学习笔记(深入)”;
- 当前页是中文(
),按钮写“English”,则: - 当前页是英文(
),按钮写“中文”,则: - 不要让
aria-label和按钮内文语言混用(例如中文页里写aria-label="Switch to Chinese"),否则屏幕阅读器会按英文朗读该提示,造成理解障碍
进阶:配合 hreflang 或 link[rel="alternate"] 增强 SEO 与导航
lang 和 aria-label 主要服务可访问性,若按钮跳转到其他语言版本页面,还应在 中补充多语言声明:
- 在当前页 HTML 中添加:
- 这对搜索引擎识别语言版本很重要,但不影响按钮本身的可访问性实现
- 按钮的
href应指向对应hreflang标注的 URL,保持一致性











