html模板实现无障碍访问的核心是语义化结构而非堆砌aria属性，必须从doctype开始规范lang、charset、结构标签、标题占位符、表单/链接语义等，否则所有衍生页面将继承缺陷。
直接说结论：HTML模板实现无障碍访问，核心不是加多少aria-属性，而是从第一行开始就按语义化结构组织内容——模板一旦定型，后续所有页面都继承它的可访问性基底，也继承它的缺陷。
模板开头必须带lang和charset
没这两个，屏幕阅读器连语言都判错，中文可能读成日文或英文音调，尤其对多语言混排页面影响明显。常见错误是只写不加属性，或lang值写成zh而非zh-CN（后者才被主流AT识别为简体中文）。
-
是底线，不能省；地区码建议写全，避免zh-HK、zh-TW等场景下语音引擎选错发音库 -
<meta charset="UTF-8">必须在最前面，晚于它插入的<title></title>可能导致标题乱码，屏幕阅读器读出一堆问号 - 别信“浏览器会自动补”，某些老旧内嵌WebView（如部分银行App）根本不认默认行为
结构标签不能靠CSS模拟
用<div class="header"> + CSS撑出页眉样式，等于主动放弃导航快捷键（如NVDA的<code>H跳标题、U跳区域）。真实模板里，<header></header>、<nav></nav>、<main></main>、<footer></footer>这四个必须作为一级区块存在，且顺序符合逻辑流。
-
<main></main>只能出现一次，且不能嵌套在<article></article>或<section></section>里——否则屏幕阅读器会把它当子区域，忽略其“主内容”语义 -
<nav></nav>要包裹完整导航链，如果只包几个<a></a>而漏掉搜索框或登录入口，AT用户就无法用N键一次性进入全部导航区 - 避免
<section></section>滥用：它需要有明确主题，纯为了布局加的<section></section>反而干扰AT理解层级
模板里预留<title></title>和<h1></h1>占位符要可替换
静态模板若把<title>我的网站</title>硬编码死，所有页面标题都一样，SEO和AT体验双崩。同理，<h1></h1>不能写成<h1>首页</h1>然后靠JS改——屏幕阅读器在DOM加载完成前就读完了，根本等不到JS执行。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 服务端模板（如EJS、Django）用变量插值：
<title></title>，确保每个页面生成时<title></title>真实不同 - 客户端渲染（如React/Vue）需在
useEffect或onMounted里同步更新document.title，并触发document.querySelector('h1').textContent = ...，不能只改状态 - 别用
aria-label给<h1></h1>加替代名——标题就是标题，aria-label只用于无文本控件，这里加了反而让AT跳过真实文本
表单和链接的默认行为不能被模板覆盖
很多UI框架模板会在<button></button>上默认加type="button"，或给<a></a>加href="#"再用JS跳转——这两者都会破坏键盘可访问性。前者让回车键失效，后者让Tab焦点停在无效链接上，用户按Enter只会刷新页面顶部。
- 按钮模板必须区分语义：
<button type="submit"></button>用于表单提交，<button type="button"></button>用于纯交互，<button></button>（无type）默认是submit，但显式声明更安全 - 链接模板禁止用
href="#"或href="javascript:void(0)"，真实路由必须走href="/about"，前端路由应由JS接管click事件并preventDefault()，同时保持原href可访问 - 所有
<input>在模板中必须带name属性，哪怕后端不用——AT依赖name生成可访问名称，空name会导致字段被读作“编辑文本”而无上下文
最难绷的是：模板一旦上线，所有基于它生成的页面都会继承同一套无障碍逻辑。一个漏掉lang的模板，意味着几百个页面全得重发；一个用div冒充nav的模板，会让整站导航对AT用户不可见。所以检查点不在“某个页面有没有问题”，而在“这个模板是否让每个页面天生就少踩坑”。
