HTML语义化标签是辅助技术正常工作的基本前提，它通过原生role属性实现区域识别、快捷跳转与结构定位，避免依赖易出错的ARIA手动补全。
HTML 语义化标签直接告诉屏幕阅读器“这是什么”，而不是让它靠猜。比如写一个导航栏，用 <nav>，读屏软件立刻知道这是可跳转的导航区域；换成 <div class="nav">，它就只当是普通盒子，连“导航”两个字都不会提。
让关键区域一键跳转
屏幕阅读器支持快捷键跳转到特定语义区域：<nav> 对应 N 键，<main> 对应 M 键，<header> 和 <footer> 也各自有地标识别。这些能力来自标签原生携带的 role 属性（如 role="navigation"），不需要额外加 ARIA。而 <div> 没有默认 role，必须手动补全 role、tabindex、键盘事件监听等，漏一项就失效。
确保正文能被准确定位
<main> 是屏幕阅读器定位“真正要读的内容”的首要锚点。它必须全页唯一、是 <body> 的直接子元素，且不能嵌套在 <header>、<footer> 或 <nav> 里。一旦缺失或误放，读屏器只能退而求其次：先找 role="main"，再找不到就从第一个 <h1> 开始算正文——但页眉里常有 <h1>，结果用户得下拉 7–12 次才摸到商品列表或文章主体。
构建可信的文档结构
标题层级（<h1>–<h6>）、段落（<p>）、列表（<ul>/<ol>+<li>）这些标签自带语义和隐含关系。读屏器据此生成大纲视图，用户能按 heading 快速浏览章节。用 <div> 套文字，它就真当那是无结构的字符串，可能把三段话连成一句朗读；用 <time datetime="2026-09-04">，读屏器能识别这是日期，并支持长按复制或唤起日历。
立即学习“前端免费学习笔记（深入）”；
减少对 ARIA 的依赖和误用
原生语义标签已经内置了角色、状态、名称和交互逻辑。比如 <button> 自动支持空格/回车触发、disabled 状态禁用、焦点管理；而 <div role="button"> 即使加上 tabindex="0"，仍需手动处理键盘事件、同步 aria-disabled、写 CSS 焦点样式——实际项目中，90% 的补救都会漏项。语义化不是“锦上添花”，是让辅助技术不卡壳的基本前提。
