html5原生语义标签显著降低无障碍测试门槛，因其内置结构语义与辅助工具深度集成，但需同步保障交互行为合规。
HTML5 原生语义标签大幅降低无障碍测试门槛
HTML5 不是“加强版 HTML”，而是为可访问性重新设计的结构基础。它用 <nav></nav>、<main></main>、<article></article>、<section></section> 等语义化标签，直接向辅助工具（如 NVDA、VoiceOver、JAWS）暴露页面逻辑结构，无需额外 ARIA 注解就能被正确识别。
而传统 HTML（即 HTML4/XHTML1）几乎全靠 <div> 和 <code><span></span> 搭建界面，必须手动加 role、aria-label、aria-labelledby 等属性才能让屏幕阅读器理解意图——稍有遗漏，就会导致“按钮读成段落”“导航栏被跳过”等典型失败场景。
- HTML5 的
<button></button>自带键盘焦点、空格/回车触发行为；旧式<div onclick="..."> 需手动处理 <code>tabindex、keydown事件，否则无法被键盘用户访问 -
<input type="email">在 HTML5 中会触发系统软键盘优化和基础校验；HTML4 只能用<input type="text">+ JS 模拟，辅助工具无法感知输入意图 - 表单控件与
<label for="id"></label>关联在 HTML5 中是强制推荐实践；HTML4 项目常忽略for属性或用嵌套方式绕过，导致语音反馈缺失 - VoiceOver 在 macOS 上对
<main></main>的朗读优先级高于同级<div role="main">，前者自动获得“主内容区域”语境提示 <li>JAWS 2022+ 对 <code><time datetime="2023-06-15">6月15日</time>会读出完整 ISO 日期，而<span>6月15日</span>只读字面文本 - Android TalkBack 对
<progress value="70" max="100"></progress>能播报进度百分比；用<div class="progress-bar"> 实现时需手动维护 <code>aria-valuenow和aria-valuemaxHTML5 并不自动等于无障碍——常见误用反而更隐蔽
用对标签只是起点。HTML5 的便利性容易让人误以为“用了语义标签就万事大吉”，结果在交互层翻车：
<nav> <a href="#" onclick="toggleMenu()">菜单</a> </nav>
这段代码虽用了
<nav></nav>，但内部链接href="#"无真实跳转、又没声明role="button"，屏幕阅读器仍会读作“链接”，键盘用户按 Enter 后页面跳顶——这是典型的“语义正确但行为失当”。-
<details><summary></summary></details>是 HTML5 原生折叠组件，但 Safari 旧版本不支持键盘展开（需补tabindex="0"+space事件） -
<dialog></dialog>默认不可聚焦，必须调用.showModal()才激活可访问性栈；直接display: block会让 VoiceOver 忽略模态上下文 - 用
<h2></h2>样式模拟标题但实际是<div class="h2">，比纯 HTML4 更难被检测工具发现——因为视觉样式“看起来像标题”，掩盖了结构缺陷 <h3>无障碍测试建议：从 HTML5 语义出发，但必须验证行为流</h3> <p>别只扫一眼是否用了 <code><header></header>或<footer></footer>。重点测三类链路：- 键盘导航流：Tab 进入、Shift+Tab 退出、Enter/Space 触发、方向键操作（如
<select></select>下拉）是否连贯 - 屏幕阅读器上下文：NVDA/F12 查看“可访问性树”，确认
role、name、value是否与预期一致 - 动态更新反馈：AJAX 加载后，
aria-live="polite"区域是否被朗读；表单校验错误是否通过aria-invalid="true"+aria-describedby关联到输入框
HTML4 项目改造时，优先替换结构性
<div>；HTML5 新项目则要警惕“语义外壳+行为裸奔”。可访问性不是标签堆砌，是结构、行为、声明三者对齐——最易被忽略的是：哪怕所有标签都正确，一次 <code>event.preventDefault()忘记处理键盘事件，整个组件就对键盘用户失效。 - 键盘导航流：Tab 进入、Shift+Tab 退出、Enter/Space 触发、方向键操作（如
-
主流辅助工具对 HTML5 语义标签的支持已成事实标准
NVDA（Windows）、VoiceOver（macOS/iOS）、JAWS（企业级 Windows）均已将 HTML5 元素映射为对应可访问性 API（如 MSAA/UIA、AXAPI）中的标准角色。这意味着：只要不用 CSS 把 <nav></nav> 显示为 display: none 或覆盖其默认行为，这些工具就能稳定识别并提供导航快捷键（如 NVDA+Insert+F7 列出所有 <nav></nav>）。
反观 HTML4 页面，即使强行添加 ARIA，也容易因属性组合错误（如 role="button" 却没加 tabindex="0"）或动态更新未触发 aria-live，导致辅助工具状态不同步。
立即学习“前端免费学习笔记（深入）”；
