直接改结构比加ARIA更有效，因语义化标签如<header><nav><main>自带角色、焦点和键盘支持，而<div>需手动补全所有无障碍属性；表单label必须正确绑定input；图片alt、表格caption、aria-live等最小修复点成本低但效果显著。
直接改结构比加ARIA更有效，也更省事。绝大多数可访问性问题不是“缺提示”，而是“没结构”——<div class="header"> 和 <header> 在视觉上没区别，但对屏幕阅读器、搜索引擎、自动化测试工具来说，是完全不同的两个东西。
为什么必须把 div 换成语义化标签
浏览器会为 <nav>、<main>、<button> 等原生标签自动注入角色（role）、焦点行为和键盘支持；而 <div> 什么都不会有，哪怕你手动加 role="navigation"，也得自己补 tabindex、onkeydown、aria-expanded……漏一项，键盘用户或读屏用户就卡住。
-
<main>必须是<body>的直接子元素，且全页只能有一个；用<div class="main">会导致无障碍树里找不到主内容区 -
<nav aria-label="主导航">比<div class="nav">+aria-label更可靠：前者自带隐式role="navigation"，后者若漏写role，NVDA 就当普通容器处理 - 标题层级不能跳级：
<h1>后直接<h3>会让 VoiceOver 用户误判章节深度，也影响 SEO 权重传递
label 和 input 怎么配才不翻车
表单是无障碍高频失守区。很多项目用 placeholder 当标签、靠 CSS 对齐“假装有 label”，结果键盘用户 Tab 进去只听到“编辑框”，根本不知道该填邮箱还是手机号。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 优先用包裹式写法：
<label>用户名<input type="text" name="username"></label>，天然绑定，无需for/id配对 - 必须分离时，
id值要唯一、无空格、无特殊字符；<label for="email">邮箱</label><input id="email">才生效 -
<input type="checkbox">每个选项都要独立<label>，共用一个会导致点击错位、状态不同步 - 禁用
placeholder替代 label：它不进可访问树，且输入后消失，对低视力用户极不友好
图片、表格、动态内容的最小修复点
这三类问题在审计报告里常年排前三，但修复成本其实很低——关键在“动刀位置准”。
立即学习“前端免费学习笔记（深入）”；
- 功能性图片必须带描述性
alt：<img src="search.svg" alt="搜索网站内容">；纯装饰图显式写alt=""，别留空或删掉属性 -
<table>必须紧贴开头加<caption>，比如<caption>2026 年 Q3 用户地域分布统计</caption>；别塞进<thead>或用 CSS 移走 - AJAX 提交后，错误提示要用
aria-live="polite"包裹，并放在<form>开头附近；否则屏幕阅读器根本不会读出“邮箱格式错误” - 模态框打开时，焦点必须立即移到第一个可聚焦元素（如关闭按钮），并用
aria-modal="true"锁定背景朗读
最常被忽略的是 lang 属性和 DOCTYPE：没有 <html lang="zh-CN">，VoiceOver 会用英文引擎读中文；没有 <!DOCTYPE html>，某些 SSR 渲染会出 DOM 结构异常。这些看似“基础”的点，恰恰是自动化检测工具最先报错、也最容易批量修复的地方。
