直接改结构比加aria更有效，因语义化标签如自带角色、焦点和键盘支持，而需手动补全所有无障碍属性；表单label必须正确绑定input；图片alt、表格caption、aria-live等最小修复点成本低但效果显著。

直接改结构比加ARIA更有效，也更省事。绝大多数可访问性问题不是“缺提示”，而是“没结构”——<div class="header"> 和 <code><header></header> 在视觉上没区别，但对屏幕阅读器、搜索引擎、自动化测试工具来说，是完全不同的两个东西。

为什么必须把 div 换成语义化标签

浏览器会为 <nav></nav>、<main></main>、<button></button> 等原生标签自动注入角色（role）、焦点行为和键盘支持；而 <div> 什么都不会有，哪怕你手动加 <code>role="navigation"，也得自己补 tabindex、onkeydown、aria-expanded……漏一项，键盘用户或读屏用户就卡住。

• <main></main> 必须是 的直接子元素，且全页只能有一个；用 <div class="main"> 会导致无障碍树里找不到主内容区 <li> <code><nav aria-label="主导航"></nav> 比 <div class="nav"> + <code>aria-label 更可靠：前者自带隐式 role="navigation"，后者若漏写 role，NVDA 就当普通容器处理
• 标题层级不能跳级：<h1></h1> 后直接 <h3></h3> 会让 VoiceOver 用户误判章节深度，也影响 SEO 权重传递

label 和 input 怎么配才不翻车

表单是无障碍高频失守区。很多项目用 placeholder 当标签、靠 CSS 对齐“假装有 label”，结果键盘用户 Tab 进去只听到“编辑框”，根本不知道该填邮箱还是手机号。

• 优先用包裹式写法：<label>用户名<input type="text" name="username"></label>，天然绑定，无需 for/id 配对
• 必须分离时，id 值要唯一、无空格、无特殊字符；<label for="email">邮箱</label><input id="email"> 才生效
• <input type="checkbox"> 每个选项都要独立 <label></label>，共用一个会导致点击错位、状态不同步
• 禁用 placeholder 替代 label：它不进可访问树，且输入后消失，对低视力用户极不友好

图片、表格、动态内容的最小修复点

这三类问题在审计报告里常年排前三，但修复成本其实很低——关键在“动刀位置准”。


Wechat HTML Publisher
直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。
下载
• 功能性图片必须带描述性 alt：<img src="search.svg" alt="搜索网站内容">；纯装饰图显式写 alt=""，别留空或删掉属性
• <table> 必须紧贴开头加 <code><caption></caption>，比如 <caption>2026 年 Q3 用户地域分布统计</caption>；别塞进 <thead> 或用 CSS 移走 <li>AJAX 提交后，错误提示要用 <code>aria-live="polite" 包裹，并放在 <form></form> 开头附近；否则屏幕阅读器根本不会读出“邮箱格式错误”
• 模态框打开时，焦点必须立即移到第一个可聚焦元素（如关闭按钮），并用 aria-modal="true" 锁定背景朗读

最常被忽略的是 lang 属性和 DOCTYPE：没有 ，VoiceOver 会用英文引擎读中文；没有 ，某些 SSR 渲染会出 DOM 结构异常。这些看似“基础”的点，恰恰是自动化检测工具最先报错、也最容易批量修复的地方。