aria-level 是浏览器自动计算的内部值，不可手动编写；其值由标题标签（h1–h6）和语义容器（section/article）嵌套层级共同决定；应使用正确语义标签与结构嵌套来表达层级关系。
aria-level 不是 HTML 中可直接编写的属性，它不会出现在你的源代码里，而是浏览器（尤其是辅助技术）在解析语义化标题结构后，自动生成并暴露给屏幕阅读器的内部计算值。
你不能也不应该手动写 aria-level="3" 这样的代码。它的值由以下两个因素共同决定：
- 标题标签本身：
<h1></h1>→aria-level=1，<h2></h2>→aria-level=2，依此类推； - 所处语义容器（如
<section></section>、<article></article>）的嵌套层级 —— 在 HTML5 中，每个<section></section>或<article></article>可重置标题层级计数起点（即其内部的<h1></h1>被视为该区块的顶级标题，aria-level为 1，不继承外层）。
所以，“用 aria-level 标记自定义层级”本质上是个误解。真正可控的是：
✅ 正确做法：用语义标签 + 结构嵌套表达层级
- 用
<h1></h1>到<h6></h6>表达内容重要性与从属关系； - 用
<section></section>、<article></article>明确划分逻辑区块，并确保每个区块以适当级别的标题开头（推荐<h2></h2>或<h1></h1>）； - 避免跳级（如
<h2></h2>后直接<h4></h4>）、避免多个<h1></h1>（除非在独立<article></article>内部）。
例如：
<main><h1>网页主标题</h1>
<section><h2>服务介绍</h2>
<p>我们提供……</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5806" title="html-deploy"><img
src="https://img.php.cn/upload/skill/000/000/081/179066538882434.jpg" alt="html-deploy" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="overflowclass">html-deploy</a>
<p class="overflowclass">使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。</p>
</div>
<a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<section><h3>技术支持</h3>
<p>7×24 小时响应……</p>
</section></section><section><h2>客户案例</h2>
<article><h3>某电商平台迁移项目</h3>
<p>上线后性能提升 40%……</p>
</article></section></main>
这段代码中，浏览器和读屏软件会自动推导出：
-
<h1></h1>→aria-level=1 - 两个
<h2></h2>→aria-level=2 -
<h3></h3>（在<section></section>内）→aria-level=3 -
<h3></h3>（在<article></article>内）→aria-level=3（不是 4，因<article></article>是独立语义单元）
✅ 检查 aria-level 是否合理的方法
打开 Chrome DevTools → Elements 面板 → 右键任意 <h1></h1>–<h6></h6> 元素 → 选择 “Inspect ARIA attributes”
你会看到面板中显示 aria-level: X，并能直观判断是否连续、是否符合内容逻辑。
⚠️ 不推荐的做法（常见误区）
- 手动添加
aria-level="2"：无效，会被忽略； - 用 CSS 改变
<h2></h2>外观却写<h4></h4>：破坏语义，aria-level仍为 4； - 把
<div role="heading" aria-level="2"> 当标题用：虽技术上可行，但绕过原生语义，增加维护成本且易出错，仅限极特殊场景（如动态渲染无法改标签）。<p>真正健壮的标题结构，靠的是标签选对、嵌套清晰、不跳不滥。</p> </div>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
