HTML中的aria-hidden属性

HTML中的aria-hidden属性

我们常常看到这样的html，

<div id="modal" class="modal" aria-hidden="true">
   <div class="modal-header">...</div>
   <div class="modal-body">...</div>
   <div class="modal-footer">...</div>
</div>

尤其是在作为页面弹窗的元素(modal)上，通常会有一个属性aria-hidden="true"，那么它有什么作用呢？

网上的专业资料通常会这样写：
  ARIA (Accessible Rich Internet Applications) 是一组属性，用于定义使残障人士更容易访问 Web 内容和 Web 应用程序（尤其是使用 JavaScript 开发的应用程序）的方法。
  它补充了 HTML，以便在没有其他机制时可以将应用程序中常用的交互和小部件传递给辅助技术。例如，ARIA 支持 HTML4 中的可访问导航地标、JavaScript 小部件、表单提示和错误消息、实时内容更新等。

  现代的辅助技术能够识别并朗读由 CSS 生成的内容和特定的 Unicode 字符。为了避免屏幕识读设备抓取非故意的和可能产生混淆的输出内容（尤其是当图标纯粹作为装饰用途时），我们为这些图标设置了 aria-hidden=“true” 属性。

我的博客里会这样写：
  让这个元素对浏览器隐藏。
  （这里的“隐藏”更多指的是语义化的隐藏，常用于配合厂商的无障碍阅读，而实现弹窗效果需配合display: none等样式使用）

参考资料——MDN