用对语义化标签而非div堆砌结构，因搜索引擎和屏幕阅读器只识别标签本意：明确标识导航区，而无语义；误用div包裹标题却不设h1–h6会破坏层级解析；多个违反规范；须语义独立；alt必填且需有意义，空字符串仅限装饰图；和须正确配置以保障seo与可访问性。
用对语义化标签，别用 div 堆出结构
搜索引擎和屏幕阅读器不认 class 名，只认标签本意。写 <div class="nav"> 和写 <code><nav></nav>，对机器来说是两回事：前者等于没说，后者直接告诉它“这是导航区”。
常见错位场景：
- 用
div包裹标题，却不写h1–h6—— 搜索引擎无法提取内容层级，辅助技术跳过该区域 - 把按钮逻辑塞进
span或div，再靠 JS 绑定 click —— 缺失键盘焦点、无法空格/回车触发、AT（辅助技术）完全不可控 - 多个
<main></main>出现在同一页面 —— 违反规范，部分读屏软件会报错或忽略后续内容
实操建议：
-
<header></header>用于页面或区块顶部，不是所有带 logo 的div都该套它 -
<main></main>必须且只能出现一次，且不能嵌套在<article></article>或<section></section>内 -
<aside></aside>不是“右边那块”，而是语义上“可剥离而不影响主干理解”的内容，比如引用、相关链接、广告
alt 属性不是可选项，是必填项且必须有意义
<img> 没有 alt，等于对搜索引擎和视障用户关闭了这张图的信息入口。空字符串 alt="" 是合法的，但仅适用于纯装饰图（如分隔线、背景花纹）。
容易踩的坑：
-
alt="图片"或alt="logo"—— 关键词堆砌且无信息量，搜索引擎忽略，AT 用户听到的是废话 - 把文件名当 alt：
alt="banner_v2_0723.jpg"—— 机器无法解析，也不符合可访问性要求 - 在响应式图组中，为
<picture></picture>里的每个<source></source>单独设alt—— 错误，alt只属于外层<img>
实操建议：
- 功能性图（如图标按钮）：写动作，如
alt="删除此条记录" - 信息性图（如数据图表）：简述结论，如
alt="2025年Q3用户留存率上升12%，达84%" - 复杂图（如流程图）：用
<figure><figcaption></figcaption></figure>补充说明，alt仍需存在，但可更简略
lang 和 charset 是基础配置，失效后整页降权
没设 lang，搜索引擎就无法判断页面语言；charset 放错位置，中文可能乱码，爬虫直接放弃抓取。
关键细节：
-
必须写在根标签上，不能只在某个子模块里加 - 多语言站点不要硬编码
lang="zh-CN"，应随内容动态输出，比如服务端渲染时根据用户语言偏好设置 -
<meta charset="UTF-8">必须是中第一个标签，否则旧版 IE 可能误判编码
性能与兼容性影响：
- 缺失
lang会导致语音合成引擎发音错误（如把“行”读成 xíng 而非 háng） -
charset晚于其他 meta 标签时，Chrome 会先按默认编码解析，再重排版，触发 FOIT（Flash of Invisible Text）
表单和交互组件必须原生支持键盘与焦点流
用 div + click 模拟下拉菜单，或者用 span 做开关按钮，本质上是在制造可访问性断点。
真实问题现象：
- Tab 键无法进入组件，或进入后无法用方向键操作
- 屏幕阅读器读不出当前状态（如“筛选已启用”“展开”）
- 键盘用户无法用空格/回车触发，只能靠鼠标
实操建议：
- 优先用原生
<select></select>、<button></button>、<input type="checkbox">，而非自定义 div - 若必须自定义（如带搜索的下拉），至少补全
role、aria-expanded、aria-controls、tabindex四要素 - 所有交互元素必须有清晰的焦点样式（别用
outline: none一刀切）
复杂点往往不在标签本身，而在状态同步——比如点击切换开关后，aria-checked 是否实时更新，tabindex 是否随展开/收起动态调整。漏掉任一环，AT 用户就会卡住。
