HTML可访问性核心在于正确使用原生语义标签：<main>必须唯一且为<body>直接子元素，不得嵌套；<section>须带标题并表逻辑分组；<nav>需真实语义而非类名模拟；表单控件必须绑定<label>；标题层级须严格递进。
HTML可访问性不是加一堆aria-属性就能解决的，核心是让原生标签真正承担语义职责——结构对了，读屏器才不会“读丢”内容，键盘焦点才不会跳飞。
用对<main>、<section>和避免嵌套失焦
很多项目把整个页面塞进一个<div id="app">，<main>要么缺失，要么被包在<header>或<footer>里。结果就是屏幕阅读器按Ctrl+Alt+Home（NVDA）根本跳不到主内容区。
-
<main>必须且只能出现一次，不能嵌套在<article>、<aside>、<footer>等标签内 -
<section>不是“视觉分隔线”，它代表有主题关联的一组内容，必须带<h2>–<h6>，不能只包<p> - 纯装饰性区块（比如广告位）别硬套
<section>，它默认带regionrole，会污染屏幕阅读器大纲树
别让<nav>变成“导航类名容器”
写成<div class="nav"><ul></ul></div>，哪怕加了role="navigation"，浏览器也不会把它识别为地标（landmark），键盘用户按D键跳转直接失效。
- 真实
<nav>要包裹完整导航逻辑链：主导航、面包屑、页内锚点列表都算 - 多个
<nav>必须加aria-label区分，例如：<nav aria-label="主导航">、<nav aria-label="页脚导航"> - 响应式折叠菜单仍需保留在
<nav>内，仅用hidden或aria-hidden="true"控制可见性，不可移除DOM
表单控件必须绑定<label>且禁用for/id错配
动态生成表单项时JS拼HTML容易漏掉<label>，或for值与实际id不一致。后果是屏幕阅读器完全读不出控件用途，“点击邮箱输入框”这类语音指令直接失效。
立即学习“前端免费学习笔记（深入）”；
- 优先用显式包裹：
<label>邮箱<input type="email"></label>，比手动配for/id更可靠 - 禁用空
<label for="xxx"></label>——这会让阅读器静默跳过，用户根本不知道这是什么控件 - 多选/单选组必须用
<fieldset>+<legend>，否则组标题不会被读出
标题层级断裂比不用语义标签更致命
很多页面从<h2>开始，或在<main>外堆了三个<h1>。这对键盘用户和读屏用户是灾难：大纲树错乱，无法跳转到“产品介绍”板块。
- 全页只允许一个
<h1>，代表页面核心主题（通常是logo或主标题） -
<main>内部标题必须严格递进：<h2>→<h3>→<h4>，禁止跳级或降级 - CSS隐藏
<h1>时，必须同步加aria-hidden="true"，否则读屏会播报两次
最容易被忽略的是：可访问性退化往往不是因为没加ARIA，而是因为原生语义标签被当成“样式容器”用了——比如用<div class="button">代替<button>，或者把<time>写成纯文本。这些地方一旦松动，整页的无障碍结构就塌了一角。
