heading

适用场景

应始终优先使用 <h1> 至 <h6>。原生标题元素自带角色、级别以及内置的用户代理样式。

role="heading" 仅适用于无法使用原生标题的情况——通常是在受限的 CMS 中，所有文本均以 <p> 或 <div> 渲染。此时必须将 aria-level 设置为 1 至 6 之间的数字（更高的值在技术层面允许，但实际上辅助技术会忽略超过 6 的级别）。

不应跳过标题层级：<h2> 之后不应直接出现 <h4>，中间必须有 <h3>。依靠标题导航的屏幕阅读器用户需要连贯的文档大纲。

常见错误

• 使用 role="heading" 却不设置 aria-level。该角色必须携带级别信息。
• 视觉上看似标题（大号加粗文字）却包裹在无标题角色的 <div> 或 <span> 中，屏幕阅读器用户完全无法通过标题导航访问这些内容。
• 在同一页面上使用多个 <h1> 元素，而实际上只有一个主标题。最佳实践是每个页面使用一个 <h1> 来命名主要内容。
• 跳过标题层级——从 h2 直接跳到 h4——会破坏文档大纲。
• 将纯装饰性文字（仅视觉效果，非结构性标题）标记为标题，令屏幕阅读器的标题导航产生混乱。

示例

<!-- 推荐写法 -->
<h2>如何提交投诉</h2>

<!-- 仅在无法使用 <h2> 时采用 -->
<div role="heading" aria-level="2">如何提交投诉</div>