HTML语义化是视障用户理解页面结构的决定性因素，因屏幕阅读器依赖语义标签的隐式ARIA role构建导航大纲，而div无法提供同等支持。
HTML 语义化不是“加分项”，而是视力障碍用户能否理解页面结构的决定性因素。 屏幕阅读器不读样式，只解析标签含义和 ARIA 属性；用 div 堆出的导航栏、按钮或标题，在视障用户听来就是一串无意义的“空白块”。
为什么 header、nav、main 这些标签不能被 div 替代
屏幕阅读器依赖这些元素的隐式 ARIA role（如 role="banner"、role="navigation"）自动构建页面大纲。用户按快捷键（如 NVDA 的 H 键跳标题、D 键跳定义列表）时，只有语义化标签才会被识别。
-
div class="header"不会出现在阅读器的结构导航菜单里，用户无法一键跳到页头 -
nav元素自带aria-label可选上下文，而div需手动加role="navigation"+aria-label，漏一个就失效 - 主流读屏工具（JAWS、NVDA、VoiceOver）对 HTML5 语义标签的支持率已超 98%，但对自定义
div+ ARIA 的容错率低——比如少写aria-hidden="true"就可能把隐藏菜单内容错误播报
alt 属性写什么，直接决定视障用户“看见”了什么
alt 不是“图片说明”，是“当这张图不存在时，用户需要知道什么才能继续操作或理解上下文”。空值 alt="" 仅适用于纯装饰图；任何含信息、功能或上下文依赖的图都必须有描述。
- 按钮中的图标：用
alt="删除项目"，而不是alt="垃圾桶图标" - 数据图表：优先用
<figure><figcaption>描述趋势结论，alt只作简要补充（如“柱状图：2025年Q1-Q4销售额对比”） - 链接内的图片：
alt应体现链接目的，例如<a href="/report"><img src="pdf.png" alt="下载年度报告PDF"></a> - 避免
alt="图片"、alt="icon"这类无信息量写法——读屏器会如实念出，造成干扰
标题层级（h1–h6）断裂会让视障用户彻底迷失
屏幕阅读器用户极少滚动浏览，而是靠标题树快速定位。跳过 h2 直接写 h4，或全页面只用 h1，等于拆掉他们的导航地图。
立即学习“前端免费学习笔记（深入）”；
- 每个页面有且仅有一个
h1，代表主主题（如“用户订单详情”） -
h2是一级分区（如“订单信息”“配送地址”“支付状态”），h3是其子模块（如“收货人姓名”“联系电话”） - 用 CSS 改变视觉大小 ≠ 改变语义层级；不要为了样式放弃
h2而改用span+ 字体放大 - 检查方式：在 Chrome 中右键 → “检查” → 切换到 Lighthouse 面板，运行 Accessibility 审计，看 “Heading levels should only increase by one” 是否报错
title 属性几乎对视力障碍用户无效，别把它当 alt 用
title 在绝大多数屏幕阅读器中默认不播报，且触屏、键盘用户根本触发不了。把它塞进关键提示里，等于对视障用户“静音屏蔽”。
- 表单错误提示必须放在
<label>旁或用aria-describedby关联，而非只靠title="请输入邮箱" - 工具提示类文案，应使用可见的
<span class="tooltip">+aria-live="polite"动态区域，确保变化可被监听 - 如果非要保留
title（如兼容旧系统），它只能是冗余补充，绝不能承载唯一、必要信息
最常被忽略的一点：语义正确 ≠ 可访问完成。即使标签全对，若焦点顺序混乱、tabindex 滥用、或动态内容未用 aria-live 通知，视障用户仍会在交互中卡死。可访问性是结构、行为、反馈三者的实时协同，缺一不可。
