根本原因是语义结构未立住：<main>缺失或嵌套错误、<nav>被当class用、<label>与id错配，导致屏幕阅读器无法识别主内容、导航和表单，所有ARIA补救均失效。
无障碍达标率低，根本原因不是缺ARIA，而是语义结构没立住——<main>缺失、<nav>被当class用、<label>和id错配，这些基础错误会让所有后续补救失效。
确保唯一且不嵌套在语义容器内
很多SPA项目把整个<div id="app">塞进<footer>或<section>里，再动态挂载内容，结果<main>要么没写，要么被包了三层。屏幕阅读器直接跳过主内容区，用户按Ctrl+Alt+Home（NVDA）毫无反应。
-
<main>必须且只能出现一次，且不能是<article>、<aside>、<footer>、<header>、<nav>的子元素 - 如果页面有多个“主要内容块”（如首页含推荐流+热门榜单），不要硬塞进一个
<main>，改用<section>+<h2>分组，再由<main>包裹整体 - 检查DOM：打开DevTools，搜索
<main，确认它父节点是<body>或<html>
别用class模拟
写<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移除
表单控件必须显式绑定
JS动态生成表单项时漏掉<label>，或for="userEmail"但input的id是email-input，会导致屏幕阅读器完全读不出字段用途，“语音点击邮箱框”指令彻底失效。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 优先用显式包裹：
<label>邮箱<input type="email" name="email"></label>，天然绑定，零配对风险 - 禁用空
<label for="xxx"></label>——阅读器会静默跳过，用户不知道这是什么 - 单选/多选组必须用
<fieldset>+<legend>，否则组标题不会被读出，只读选项本身 - 验证失败时，设
aria-invalid="true"并focus()到首个错误字段，不能只靠视觉红框提示
活动页写“2026年7月15日”，屏幕阅读器读作普通文本；换成<time datetime="2026-07-15">2026年7月15日</time>，辅助技术才能识别为时间类型，支持日历聚合或语音快捷操作。
-
<time>必须带datetime属性，值需符合ISO 8601格式（如"2026-07-15"或"2026-07-15T14:30"），纯中文不生效 -
<figure>要包裹<img>+<figcaption>，且<figcaption>必须是<figure>的直接子元素，否则屏幕阅读器无法建立图文关联 -
<blockquote>必须用于真实引用内容，不要用来做视觉缩进——它会触发阅读器特殊播报语气
最常被忽略的是焦点流与DOM顺序的一致性：语义标签写对了，但CSS用flex-direction: column-reverse或order打乱视觉顺序，键盘Tab焦点仍按HTML源码顺序走，用户操作路径就和看到的完全脱节。
