语义化标签是可访问性的底线，必须使用等标签构建清晰结构，配合准确alt、显式label绑定和iframe title，三者协同保障屏幕阅读器正确解析。
语义化标签不是“加分项”，而是可访问性的底线。没有它们，屏幕阅读器只能读出一堆“division”“generic element”，用户根本无法判断哪是导航、哪是正文、哪是页脚。
为什么 <header></header>、<nav></nav>、<main></main> 不可省略
这些标签直接参与辅助技术的结构解析。浏览器和屏幕阅读器（如NVDA、VoiceOver）依赖它们构建导航树；缺失时，用户必须靠逐个 tab 键摸索，效率极低。
-
<header></header>必须包裹站点标识或主标题，不能只当样式容器用；class="header"的<div> 对可访问性零贡献 <li> <code><nav></nav>需包含真实导航链接，多个<nav></nav>时建议加aria-label="主导航"或aria-label="页脚链接"区分 -
<main></main>全局唯一，且不能嵌套在<article></article>或<section></section>内——否则屏幕阅读器会误判内容层级 - 图标按钮（如放大镜搜索）：
alt="搜索"，不是alt="search-icon.png" - 数据图表：
alt="2025年各季度销售额：Q1 120万，Q2 145万，Q3 162万，Q4 188万"（简明、可读、不含冗余修饰） - 复杂图表/流程图：用
<figure></figure>+<figcaption></figcaption>或外部链接补充，alt仍需概括核心结论 - 正确方式是用
for和id显式绑定：<label for="email">邮箱</label><input id="email" type="email"> - 若无法加
id（如模板渲染限制），可用包裹写法：<label>邮箱<input type="email"></label> - 错误示例：
<div> <span>邮箱</span><input type="email"> </div>—— 无任何可访问性保障 - title 值必须具体：
title="嵌入式客服聊天窗口"，而非title="内容"或title="" - 第三方嵌入代码常默认不带 title，务必手动补全；若内容动态变化，需用 JavaScript 同步更新
iframe.title - 配合
sandbox和loading="lazy"使用时，title仍是第一优先级——安全与性能不能牺牲可访问性
<img> 的 alt 属性到底怎么写
空 alt="" 是合法且必要的，但仅限纯装饰图；任何承载信息的图片，alt 必须准确传达其功能或内容，而非描述文件名或绕开问题。
表单控件为什么必须绑定 <label></label>
仅靠视觉对齐（CSS 定位文字挨着输入框）对键盘聚焦毫无意义。屏幕阅读器聚焦 <input> 时，若无显式关联，用户完全不知道这是邮箱、密码还是验证码。
<iframe></iframe> 缺少 title 是高危疏漏
未设 title 的 <iframe></iframe> 在 VoiceOver/NVDA 中只会报“框架”或“无标题框架”，用户无法预判内容类型，极易跳过关键交互区域（如嵌入的登录弹窗、地图、视频）。
最常被忽略的其实是组合动作：比如用了 <nav></nav> 却没确保其中链接可键盘聚焦，或写了 alt 却忘了给 <input> 加 <label></label>。可访问性不是单点修补，而是结构、文本、交互三者同步生效。
