如何语义化标记含不可点击章节标题的导航（符合无障碍要求）

核心思路 #

无需使用带层级的标题（如h3）或treeview角色，而是通过语义化<nav>结合无层级文本容器实现分类标题，配合无障碍属性强化识别，同时确保当前页链接的高亮状态可被辅助技术感知。

1. 推荐语义结构 #

用<nav>包裹分类标题与链接列表，分类标题采用无层级文本容器（如<div>），通过aria-label明确导航用途，避免打乱页面主体的标题层级：

<nav aria-label="内容分类导航">
  <div class="nav-section-title">技术分类</div>
  <ul>
    <li><a href="/frontend" class="current-page" aria-current="page">前端开发</a></li>
    <li><a href="/backend">后端开发</a></li>
    <li><a href="/devops">运维部署</a></li>
  </ul>
  
  <div class="nav-section-title">资源分类</div>
  <ul>
    <li><a href="/tutorials">教程文档</a></li>
    <li><a href="/tools">开发工具</a></li>
  </ul>
</nav>

关键细节：

• <nav>的aria-label：明确告知屏幕阅读器这是「内容分类导航」，而非网站主导航，辅助技术用户可快速区分导航类型。
• 分类标题用<div>：避免使用h1-h6，防止因导航在页面H1之前导致标题层级逻辑混乱，同时通过CSS样式（如加粗、字号调整）让视觉用户识别为分类标题。
• 当前页高亮处理：给当前页链接添加类名（如current-page）实现视觉高亮，同时添加aria-current="page"属性，屏幕阅读器会明确播报「当前页面：前端开发」，兼顾视觉与无障碍体验。

2. 关于treeview的误区 #

role="treeview"专为可折叠/展开的层级交互菜单设计（如文件夹结构），你的场景中分类标题不可点击、不可折叠，完全不需要使用treeview——强行使用会让辅助技术用户产生交互预期困惑，还需额外添加aria-disabled="true"或tabindex="-1"阻止交互，徒增复杂度。

3. 额外无障碍强化 #

• 确保链接焦点状态可见：给<a>添加:focus样式（如轮廓线），方便键盘用户识别当前聚焦的链接。
• 分类标题视觉区分：通过CSS让分类标题与普通链接有明显样式差异（如更大字号、加粗），帮助普通用户快速识别分类逻辑。

内容的提问来源于stack exchange，提问作者XP84