HTML语义化是无障碍访问的必要前提，错误使用标签如用div替代nav或嵌套main于table中会导致屏幕阅读器无法识别；main必须唯一，article强调独立性，section仅作主题分组；label和fieldset需原生结构绑定，否则影响兼容性。
HTML语义化本身不自动实现无障碍，但它是辅助技术（如屏幕阅读器）正确解析页面的必要前提——用错标签，再好的ARIA也救不回来。
为什么 screen reader 会读错或跳过你的导航栏
常见错误现象：用户反馈“听不到导航菜单”“main区域没被识别为主要内容”，往往不是JS或CSS问题，而是<nav>被写成了<div class="nav">，或者<main>被意外嵌套在<table>里。
使用场景：当用户用快捷键（如NVDA的Insert+Tab）切换到“导航区域”时，只有原生<nav>会被识别；<div role="navigation">虽能模拟，但缺失隐式语义（如键盘焦点管理、默认aria-expanded逻辑），且易被遗漏。
- 必须确保每个
<nav>直接包裹可聚焦的链接（<a>或带tabindex的元素），不能只放文字或<span> -
<nav>不应嵌套在<table>、<ul>等有严格子元素限制的标签内——这会导致HTML无效，浏览器可能丢弃整个节点 - 多个导航区建议加
aria-label区分，例如<nav aria-label="主导航">和<nav aria-label="页脚导航">
main、article、section 混用时的可访问性陷阱
错误现象：屏幕阅读器把<section>当成独立内容块朗读，但用户实际想快速跳转到真正唯一的主体内容——这时<main>被漏掉或误用是主因。
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
参数差异：三者语义不可互换：<main>必须全局唯一，代表页面核心内容；<article>强调可独立分发（如博客、新闻）；<section>只是主题分组，无独立语义权重。
- 一个页面只能有一个
<main>，重复或缺失都会破坏可访问性树结构 -
<article>内部可嵌套<header>/<footer>，但<section>内部不应滥用<h1>——标题层级应连续，避免从<h2>跳到<h1> - 如果
<main>里只包了一个<section>，不如直接用<main>+<h1>，减少冗余包装
label、fieldset 和 div 嵌套表单时的兼容性影响
错误现象：“输入框没关联说明文字”“表单分组无法被跳过”，常因<label>未用for/id绑定，或<fieldset>被<div>包裹后丢失语义。
性能 / 兼容性影响：辅助技术对<label>和<fieldset>的识别高度依赖原生结构。用<div>替代<fieldset>并加role="group"，虽能勉强工作，但部分旧版JAWS或VoiceOver可能忽略aria-labelledby，导致分组标题不可达。
-
<label>必须显式绑定<input>（for+id，或包裹方式），仅靠视觉位置或aria-label不够稳定 -
<fieldset>不能被<div>包裹后再设role="group"——它必须是直接父容器，否则<legend>无法正确关联 - 动态表单中，若用JS插入新
<input>，需同步生成<label>并调用focus()，否则屏幕阅读器可能不播报新增项
最易被忽略的一点：语义标签是否“名副其实”，比是否用了它更重要。比如用<aside>包广告横幅没问题，但若把它当布局容器塞进整页侧边栏，就破坏了其“与主内容相关但可分离”的本意——辅助技术不会报错，但用户心智模型会被悄悄误导。
