真正被屏幕阅读器实质性识别的语义化标签只有、、、、、、；等需配合标题才生效，误以为所有html5标签“写了就有用”是常见误区。
哪些语义化标签真能被屏幕阅读器识别
只有 <nav></nav>、<main></main>、<header></header>、<footer></footer>、<article></article>、<aside></aside>、<time></time> 这几个标签在主流辅助技术中被实质性支持；其他如 <section></section> 或 <figure></figure> 要配合标题或上下文才起作用。
常见误判是以为所有 HTML5 标签“写了就有用”。实际中：<section></section> 没有内部 <h1>–<h6></h6>
</h1>，VoiceOver 和 NVDA 通常跳过不读；<div role="navigation"> 不如直接用 <code><nav></nav>，前者需额外维护 ARIA 属性，后者原生暴露导航角色。
-
<main></main>页面中只能出现一次，且不能嵌套在<article></article>、<aside></aside>、<nav></nav>、<header></header>、<footer></footer>内 -
<time datetime="2024-03-15"></time>的datetime值必须是机器可读格式（ISO 8601），否则屏幕阅读器无法播报日期 - Safari 12 之前，
<aside></aside>常被 VoiceOver 读作 “complementary”，而非语义名，需测试真实版本
标题层级错乱会直接破坏可访问性
屏幕阅读器用户依赖标题结构快速跳转内容。跳级（如 <h2></h2> 后接 <h4></h4>）、重复使用 <h1></h1>、或在 <article></article> 内部不重置层级，都会让大纲断裂。
正确做法是：每个 <article></article> 或 <section></section> 内部都应有且仅有一个标题（通常是 <h2></h2> 或 <h3></h3>），其子内容再用下一级标题，而不是延续全局层级。
- 页面级
<h1></h1>只能有一个，代表整个页面主题 -
<article></article>中的<h2></h2>是该文章的标题，不是页面副标题 - 避免用
<div class="title"> + CSS 模拟标题——它不会出现在屏幕阅读器的标题列表里 <h3>什么时候该退回 <code><div> 而不是硬套语义标签 <p>语义标签不是装饰品。当内容逻辑与标签隐含含义冲突时，强行使用反而制造歧义。</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf"><img src="https://img.php.cn/upload/skill/000/000/081/178956546773641.jpg" alt="html-ppt-to-pdf" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf" class="overflowclass">html-ppt-to-pdf</a> <p class="overflowclass">将使用 `<section class="slide">` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。</p> </div> <a rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <p>例如仪表盘里的“实时在线人数卡片”，既不可独立分发（不符合 <code><article></article>），也无章节标题（不适合<section></section>），更不是侧边信息（<aside></aside>不贴切）。这时用<div role="region" aria-labelledby="card1-title"> 更准确，且可控性强。 <ul> <li> <code><section></section>要求有标题，且代表逻辑上可独立成节的内容单元，不是“视觉分块”工具 -
<aside></aside>不等于“右边那栏”，而是指与主内容间接相关、可选读的信息（如作者简介、延伸阅读） - IE9–11 对
<dialog></dialog>完全不支持，降级为普通<div> 且无焦点管理，不如用 <code><div role="dialog"> + 手动控制 <h3>兼容旧浏览器时语义标签要不要 polyfill</h3> <p>不需要为渲染加 polyfill ——现代 CSS 重置已默认设 <code>display: block，IE9+ 和 Safari 5.1+ 都能正常显示。真正要确认的是辅助技术是否能正确暴露结构意图。底线组合是
<nav></nav>、<main></main>、<header></header>、<footer></footer>：它们在 IE9–11 中虽不被识别为语义角色，但至少不干扰 DOM 结构，且多数屏幕阅读器（如 JAWS 16+）仍能通过上下文推断。-
<figure>+<figcaption></figcaption></figure>在 Safari 6.1+ 才正确关联，旧版中图注可能脱离图像上下文 - 若项目必须支持 IE8，所有语义标签都应回退为
<div> 并补全 ARIA role，因为 IE8 完全不识别新标签 <li>不要依赖 <code>document.createElement('article')这类 hack，它只解决 DOM 创建，不解决辅助技术识别
最常被忽略的点是：语义标签的价值不在“看起来像什么”，而在“告诉机器这是什么”。写完检查一遍：屏幕阅读器能否靠标签本身说出区域功能？搜索引擎能否据此判断内容权重？如果答案是否定的，那很可能标签选错了，或者缺了关键配套（比如标题、datetime、role 等）。
-
