HTML5语义化标签自带隐式ARIA地标角色，如默认为role="banner"，为role="navigation"，为role="main"，为role="contentinfo"，故无需手动添加role属性；仅在语义缺失时（如实现搜索区）才需显式设置role。

为什么不用 role 也能有地标？

因为 HTML5 大部分语义化标签自带隐式 ARIA 角色。比如

默认就是 role="banner"，

对应 role="navigation"，

是 role="main"，

是 role="contentinfo"。辅助技术（如屏幕阅读器）直接读取这些隐式角色，无需你手动加 role 属性。

常见错误是给

再写一遍 role="navigation"——纯属冗余，还可能干扰某些旧版辅助技术的解析逻辑。

• 只有当语义缺失时才显式添加 role：比如用
  实现搜索区，就得补 role="search"
• HTML4 或无 JS 回退场景下，才考虑用 role 弥合语义断层
• 避免对
  或
  随意加 role="region"：它会生成额外地标，导致屏幕阅读器用户听到一堆“区域 1、区域 2…”而无法判断用途

多个

怎么区分？

一个页面可以有多个导航区域（主导航、页脚链接、侧边栏工具栏），但所有

默认都算 role="navigation"，屏幕阅读器无法分辨哪个是主菜单、哪个是辅助链接。

解决方案是用 aria-label 提供唯一上下文：

• ：用于顶部横向菜单
• ：放在
  内的链接集合
• ：仅当搜索框展开后动态渲染的建议列表才适用

注意：aria-labelledby 也可用，但需确保引用的 ID 存在且文本有意义；aria-label 更直接、更可控。

role="region" 什么时候该用？

role="region" 是兜底角色，只在既没有合适 HTML5 标签、又确实需要被识别为独立导航目标时才用。它本身不带语义，必须配 aria-label 或 aria-labelledby，否则对用户毫无意义。

典型误用：


Wechat Article Html
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
下载
• 给每个
  都加 role="region"：制造大量空泛地标，破坏导航效率
• 用
  包裹广告位却不加 label：屏幕阅读器只报“区域”，用户不知道这是广告还是内容

  正确做法：

  • 仅对功能明确但无原生标签的区块使用，例如实时通知弹窗、多步骤表单的状态面板
  • 必须提供具体、简短的 aria-label，如 aria-label="订单状态更新"
  • 避免嵌套多个 role="region"：优先用
    、
    等已有语义的标签

  为什么

  只能有一个？

  对应 role="main"，是页面中唯一的核心内容容器。辅助技术依赖它快速跳转到主要内容，跳过头部、导航等重复结构。

  违反“唯一性”会导致严重可访问性问题：

  • 多个
    ：屏幕阅读器可能只识别第一个，或报错、行为不可预测
  • 把
    嵌套在
    或
    内：破坏层级逻辑，role="main" 被降级为普通内容
  • 用
    替代

    ：绕过浏览器内置校验，但失去语义一致性，且部分旧辅助技术不识别

    检查方法：用浏览器开发者工具打开可访问性树（Accessibility Inspector），确认 role="main" 节点是否唯一、是否包裹全部主体内容、是否未被其他地标角色包裹。

    真正难的不是加 role，而是判断哪里不该加——删掉多余的 role，比堆砌更多属性更能提升可访问性。