在前端开发中，经常需要对一些内容进行隐藏，以便在需要时进行显示。而在实现页面内容的隐藏时，我们通常会使用 CSS 的 display 和 visibility 属性。但是，这些属性只是将元素从视觉上隐藏，而并不会影响屏幕阅读器等辅助技术对页面内容的理解。这时，我们就需要使用 aria-hidden 属性来实现页面内容的隐藏。
什么是 aria-hidden 属性？
aria-hidden 属性是 WAI-ARIA 规范中定义的一个属性，用于指示一个元素是否应该被屏幕阅读器等辅助技术忽略。当一个元素的 aria-hidden 属性被设置为 true 时，屏幕阅读器等辅助技术将忽略该元素及其子元素的内容。当属性值为 false 或未设置时，屏幕阅读器等辅助技术将正常解析该元素及其子元素的内容。
如何正确使用 aria-hidden 属性？
为了正确使用 aria-hidden 属性，我们需要遵循以下几点：
1. 只在必要时使用 aria-hidden 属性
虽然 aria-hidden 属性可以帮助我们实现页面内容的隐藏，但是如果滥用该属性，可能会影响屏幕阅读器等辅助技术对页面的理解。因此，我们应该仅在必要时使用 aria-hidden 属性。
2. 确保隐藏元素的内容不会对页面理解造成影响
当我们使用 aria-hidden 属性将一个元素的内容隐藏时，需要确保该元素的内容对页面的理解没有任何影响。例如，一个重要的表单元素不应该被隐藏，因为它的内容对用户提交表单数据至关重要。
3. 使用 CSS 来控制元素的可见性
虽然 aria-hidden 属性可以帮助我们实现页面内容的隐藏，但是它并不会影响元素的可见性。因此，我们还需要使用 CSS 来控制元素的可见性。
4. 使用 tabindex 属性来控制元素的可聚焦性
当我们使用 aria-hidden 属性将一个元素的内容隐藏时，需要使用 tabindex 属性来控制该元素的可聚焦性。当 tabindex 属性值为 -1 时，该元素不可聚焦。
示例代码
下面是一个使用 aria-hidden 属性实现页面内容隐藏的示例代码：
<div>
<p>这是一个需要隐藏的段落。</p>
<button aria-controls="hidden-content" aria-expanded="false">显示隐藏内容</button>
<div id="hidden-content" aria-hidden="true" style="display: none;">
<p>这是需要隐藏的内容。</p>
</div>
</div>在上面的示例代码中，我们使用了 aria-controls 和 aria-expanded 属性来控制隐藏内容的显示与隐藏。当用户点击“显示隐藏内容”按钮时，隐藏内容将被显示出来。
总结
通过正确使用 aria-hidden 属性，我们可以实现页面内容的隐藏，并确保屏幕阅读器等辅助技术对页面的理解不受影响。但是，在使用该属性时，我们需要遵循一些规则，以确保页面的可访问性和可用性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65585b68d2f5e1655d28bb7f