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