直接改HTML标签比加ARIA更有效安全，因结构性错误（如div冒充按钮、main嵌套在div里、缺lang属性）会导致屏幕阅读器彻底失语；必须用语义标签替换非语义容器，确保lang="zh-CN"、<main>为body直接子元素、标题层级连续、表单label显式关联。
直接改 HTML 标签比加 ARIA 属性更有效，也更安全。很多页面无障碍问题根源不在“没加 aria-label”，而在用了 <div> 冒充按钮、用 <span> 当标题、<main> 嵌套在 <div> 里——这些结构错误会让屏幕阅读器彻底失语。
检查并修复根级结构与语言声明
不带 lang 属性的 HTML 页面，NVDA 和 VoiceOver 很可能把中文读成日文或英文；没有 <!DOCTYPE html> 或多个同级 <div> 直接挂在 <body> 下，会导致 DOM 树解析异常、SSR 渲染错乱。
-
<html>标签必须带lang="zh-CN"（简体）或lang="zh-TW"（繁体），不能只写lang="zh"或留空 -
<meta charset="UTF-8">必须出现在<head>最前面，且不能被 JS 动态插入 -
<main>必须是<body>的**直接子元素**，不能包在<div class="wrapper">之类容器里 - 全页只能有一个
<main>；若存在多个逻辑主区（如双栏文章+侧边推荐），应只把核心正文放进<main>，其余用<aside>
替换非语义容器为语义化标签
把 <div class="header"> 改成 <header> 不是“锦上添花”，而是让 AT 用户按 H 键就能跳到页头；把 <div onclick="submit()"> 换成 <button> 后，键盘用户 Tab 就能聚焦、回车就能触发——不用手写 tabindex 和 keydown。
- 导航区域统一用
<nav aria-label="主导航">，面包屑用<nav aria-label="面包屑"><ol>，避免多个<nav>无区分地堆在一起 -
<section>必须以<h2>–<h6>开头，否则语义退化为普通<div>；不要用它替代<article>包裹独立内容（如博客正文） - 所有按钮交互必须用
<button>，链接必须用<a href>；禁止<div role="button">+tabindex="0"+ 手动监听事件的组合 -
<figure>+<figcaption>替代图文混排的<div class="img-wrap">，让读屏明确识别图像与说明的关系
校验标题层级与表单可访问性
标题跳级（比如 <h2> 后直接 <h4>）不是“看起来差不多”，而是会让屏幕阅读器用户导航时直接“掉出章节”。表单没配 <label>，等于关闭了视障用户的输入入口。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 用浏览器 DevTools 的 Accessibility 面板检查标题树，确保
<h1>–<h6>连续、不跳跃；JS 动态插入的标题也要同步补全层级 - 每个
<input>、<select>、<textarea>必须有显式<label for="xxx">或包裹式<label><input>xxx</label> -
<img>的alt属性不能缺失、不能为空值（alt）、不能写 “图片” 或 “图标”；装饰图写alt=""，功能图写动作（如alt="提交表单"） - 禁用默认焦点框（
outline: none）前，必须提供等效视觉样式，例如：button:focus { outline: 2px solid #007aff; outline-offset: 2px; }
别依赖 ARIA 修补结构性缺陷
给一个嵌套在 <div> 里的 <main> 加 role="main"，不会让它被正确识别——浏览器和 AT 已在解析阶段丢弃了该节点的语义上下文。ARIA 是补丁，不是胶水；原生语义失效的地方，ARIA 往往也无效。
- 优先删掉冗余
role：比如<button role="button">、<nav role="navigation">，纯属重复且干扰可访问性树 -
aria-hidden="true"只用于视觉隐藏但需保持 DOM 存在的内容（如加载动画），不能替代display: none；后者才是真正移除可访问性暴露 - 模态框打开后，焦点必须锁定在内部；用
inert属性（现代浏览器）或手动管理tabindex，而非仅靠aria-modal="true" - 所有自定义组件（下拉、开关、滑块）必须同时满足：键盘可操作、状态可感知（
aria-expanded/aria-checked）、角色明确（role="combobox"等），缺一不可
最常被忽略的是：重构后没在真实 AT 环境中验证。NVDA + Chrome、VoiceOver + Safari、TalkBack + Android WebView，三者行为差异很大；仅靠 axe 或 Lighthouse 扫描，会漏掉焦点流断裂、朗读顺序错乱等关键问题。
