多语言切换链接必须用而非，因其本质是导航行为；支持原生跳转、键盘访问、新标签打开及seo索引，而会破坏语义与可访问性。

多语言切换链接必须用 @#@#@#@#@#@#@#@#@#@0，而不是只放德国国旗 emoji

避免用 role="menu" + role="menuitem" 模拟下拉菜单——这不是菜单，是平行导航，过度 ARIA 反而干扰读屏体验

如果语言选项超过 4 个，考虑折叠为 <details><summary></summary></details>，但需测试 Safari 对 <details></details> 的键盘支持是否完整

最易被忽略的是：hreflang 的双向一致性——/en/ 页面声明了 zh-Hans 版本，那么 /zh/ 页面也必须反向声明 en 版本，缺一不可。漏掉任一方向，Google 就可能忽略整组语言关联。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

<a href="/en/about.html" hreflang="en" rel="alternate">English</a><br><a href="/zh/about.html" hreflang="zh-Hans" rel="alternate">中文</a><br><a href="/ja/about.html" hreflang="ja" rel="alternate">日本語</a>

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！