当前位置：首页 > 文章列表 > 文章 > 前端 > 模态对话框正确使用aria-modal和aria-hidden

模态对话框正确使用aria-modal和aria-hidden

2026-03-08 17:13:37 0浏览收藏

aria-modal="true" 和 aria-hidden="true" 是构建真正可访问模态对话框的黄金组合：前者在模态容器上声明“这是不可绕过的交互焦点”，确保屏幕阅读器理解并强制隔离上下文；后者则动态屏蔽背景内容，防止干扰性朗读和焦点逸出——二者协同作用，缺一不可，单独使用都会导致辅助技术误判、焦点失控甚至用户迷失，正确实施不仅能通过 WCAG 标准，更能为视障用户带来与健视者一致的清晰、安全、可控的模态体验。

模态对话框的 aria-modal 和 aria-hidden 组合正确用法

模态对话框中，aria-modal="true" 和 aria-hidden="true" 不是互斥或可随意混用的属性，它们作用对象不同、职责分明——用错组合会直接破坏屏幕阅读器对“模态性”的理解，导致背景内容被误读、焦点管理失效，甚至让用户迷失上下文。

aria-modal="true"：声明“这是模态框本身”

该属性必须加在模态框容器上（通常是 role="dialog" 或 role="alertdialog" 的元素），明确告诉辅助技术：“当前这个区域是模态的，背景内容应被逻辑隔离”。

仅对设置了 role="dialog" 或 role="alertdialog" 的元素有效；其他 role（如 role="modal"）无效且不合法。
值只能是 "true"；设为 "false" 或省略，等同于未声明模态状态，屏幕阅读器可能继续朗读背景内容。
它不控制视觉显示，也不影响 DOM 可见性，只改变辅助技术的语义解析行为。

aria-hidden="true"：隐藏“非活动区域”

该属性用于**模态框打开时，将背景主内容（如

、

、侧边栏等）临时屏蔽**，防止屏幕阅读器意外聚焦或朗读无关内容。

必须动态设置：模态框打开时，给所有非模态区域加 aria-hidden="true"；关闭后立即移除或设为 "false"。
不能加在模态框自身上——否则整个对话框会被辅助技术完全忽略，用户“看不见也听不到”。
常见误用：给遮罩层（overlay）设 aria-hidden="true"。遮罩层本身无语义，一般用 aria-hidden="true" 是合理的，但更推荐用 role="presentation" 或直接不加任何 ARIA（因其纯装饰）。

典型正确组合示例

假设页面结构如下：

<body>
  <header></header>
  <main id="main-content">...</main>
  <div id="modal-root">
    <div class="modal-overlay"></div>
    <div id="my-dialog" role="dialog" aria-modal="true" aria-labelledby="dlg-title" aria-describedby="dlg-desc">
      <h2 id="dlg-title">确认删除？</h2>
      <p id="dlg-desc">此操作不可撤销</p>
      <button>确定</button>
      <button>取消</button>
    </div>
  </div>
</body>

JavaScript 打开时应执行：

设置 document.getElementById('my-dialog').setAttribute('aria-modal', 'true')（若尚未设置）
对 document.getElementById('main-content') 和其他非模态区域调用 el.setAttribute('aria-hidden', 'true')
将焦点移入模态框内首个可交互元素（如第一个按钮）

关闭时反向操作：移除所有 aria-hidden="true"，恢复 aria-modal 为未设置或设为 "false"（但更推荐直接移除该属性），并把焦点切回触发按钮。