什么是 aria-hidden？
在网页开发中，我们经常需要隐藏一些内容，以便在特定条件下进行显示。而使用 display: none 或 visibility: hidden 可以轻松地隐藏元素，但这对于一些特定的用户来说可能不是理想的方式，例如视力障碍者使用屏幕阅读器浏览网页时，它们将无法识别被隐藏的元素。
这时就需要使用 aria-hidden 属性来帮助解决这个无障碍性的问题。该属性允许开发者指定哪些元素应该在屏幕阅读器中被隐藏。
如何使用 aria-hidden？
在 HTML 元素上添加 aria-hidden 属性并将其设置为 true，即可让屏幕阅读器忽略该元素及其子元素的内容，实现隐藏的效果。
<div aria-hidden="true"> <p>这里是需要隐藏的内容</p> </div>
aria-hidden 的一些注意事项
- 只有当用户能够通过其他方式获得所隐藏内容的信息时，才应该使用 aria-hidden。例如，一个展开内容的按钮加上一个 aria-expanded 属性，用户可以使用屏幕阅读器读取该属性来发现内容是否已打开。
- 如果一个元素被设置为 aria-hidden="true"，则该元素及其所有后代元素都应该被默认隐藏。如果某个元素需要在其中包含其他不需要隐藏的元素，则应该在包含这些元素的上级元素中取消隐藏。
- 由于 aria-hidden="true" 属性可以屏蔽所有屏幕阅读器上的显示，所以不要在用户需要的情况下盲目使用。
总结
使用 aria-hidden 属性可以帮助开发者在满足隐藏需求的同时，也确保了网页的无障碍性。但是要注意的是，只有在用户可以通过其他方式获得所隐藏内容的信息时才应该使用 aria-hidden，同时也要注意好哪些元素需要隐藏，哪些元素需要取消隐藏，这些问题的解决都是需要开发者们深思熟虑的。
参考资料
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e73106f6b2d6eab329ce44