Front Matter 必须显式声明 lang 和 dir 字段，模板中渲染为 ；导航用 、主内容用 、标题严格嵌套、图片 alt 不可空、链接文字需自解释。

Front Matter 里必须声明 lang 和 dir 字段

可访问性不是靠 CSS 或 JS 补救的，而是从 根标签开始。Eleventy、Hugo 等工具默认不注入 lang 或 dir 属性，但屏幕阅读器依赖它们判断语言切换和文本流向。

正确做法是在每个内容文件的 Front Matter 中显式声明：

财经HTML高端海报生成

复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP

下载

• lang: zh-CN（不要写成 language: zh，模板里取值必须匹配字段名）
• dir: ltr 或 dir: rtl，中文/英文用 ltr，阿拉伯语等用 rtl
• 在模板中渲染为：
• 若全站统一，可在全局数据（如 _data/site.json）里定义，再通过 {{ site.lang }} 注入，避免每篇重复写

模板中必须用语义化 HTML 标签，且禁用纯 div 导航

静态生成器不校验 HTML 语义，

在构建后仍是

，对屏幕阅读器不可见。你得手动写对标签，并确保它被原样输出。

常见错误与修正：

• 导航栏必须用
  包裹，内部用
  • @#@#@#@#@#@#@#@#@#@0
• Eleventy 的 addShortcode 可封装安全链接组件，强制要求传入 text 和 ariaLabel 参数，避免漏写
• 注意 Hugo 的 {{ relLangURL }} 或 Eleventy 的 {{ url | url }} 过滤器只处理路径，不碰链接文本——可访问性责任始终在内容作者端

最易被忽略的一点：键盘焦点管理不在生成阶段解决，而在于你是否在模板中主动写 tabindex="-1" 或 aria-hidden="true"。静态生成器只管输出 HTML，它不会帮你判断某个装饰性图标该不该被聚焦。这意味着可访问性不是配置开关，而是每一处

、每一个 alt、每一行 Markdown 链接的持续选择。

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