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

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

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

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

Html To Pdf

使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。

下载

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

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

静态生成器不校验 HTML 语义，<div class="nav"> 在构建后仍是 <code><div>，对屏幕阅读器不可见。你得手动写对标签，并确保它被原样输出。<p>常见错误与修正：</p> <ul> <li>导航栏必须用 <code><nav></nav> 包裹，内部用 <ul><li>@#@#@#@#@#@#@#@#@#@0</li></ul>

Eleventy 的 addShortcode 可封装安全链接组件，强制要求传入 text 和 ariaLabel 参数，避免漏写

注意 Hugo 的 {{ relLangURL }} 或 Eleventy 的 {{ url | url }} 过滤器只处理路径，不碰链接文本——可访问性责任始终在内容作者端

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