hidden 和 aria-hidden 属性有什么区别?

htmlweb developmentfront end technology更新于 2025/3/29 16:12:17

hidden 和 aria-hidden 属性简介

HTML hidden 属性用于那些除非满足特定条件或标准才会显示给用户的元素，即其内容与特定用户无关的元素。它是一个布尔属性，用于元素时，会删除与该元素的所有相关性。

当在 HTML 元素上指定时，[hidden 属性] 表示该元素用于声明内容供页面其他部分重用，而不是由用户直接访问，或者该元素尚未或不再与页面的当前状态直接相关。

例如，如果我们使用 hidden 属性，浏览器将不会显示元素的内容，但我们可以使用某些 JavaScript 操作轻松访问 hidden 属性，并且当用户满足某些条件时，JavaScript 将允许浏览器显示 hidden 属性的内容。

语法

<element hidden>

Aria-hidden 属性向用户指示他们正在阅读的内容是否重要，是否应该被关注或忽略。它表示元素及其子元素将无法以程序员定义的方式在客户端显示或访问。

使用 aria-hidden 时，元素不会从浏览器中移除;相反，它会从无障碍树和辅助技术中移除，但仍在浏览器中可见。例如，aria-hidden = "true " 只会从无障碍树中移除所需的元素及其子元素。如果与 body 等绑定元素一起使用，则应仅将其用于特定元素。整个网站将呈现为无法访问。

语法

<element aria-hidden="true/false">

hidden 和 aria-hidden 属性的区别

语义区别

hidden 属性会将元素从所有显示设备中隐藏，包括打印机和屏幕阅读器(假设这些设备遵循 HTML 规范)。hidden 属性足以将元素从无障碍树以及视觉媒体中移除。

带有 aria-hidden="true" 的元素不会暴露给无障碍树，因此屏幕阅读器等设备不会通告它们。应谨慎使用此技术，因为它会为不同的用户提供不同的体验:无障碍用户代理不会通告/渲染它们，但视觉代理会。如果操作正确，这可能是一件好事，但也有可能被滥用。

语法差异

Hidden 是一个布尔属性，这意味着如果该属性存在，则无论其值如何，结果都为 true;如果该属性不存在，则结果为 false。在 true 情况下，最佳做法是使用无值 (<div hidden>...</div>) 或空字符串 (<div hidden="">...</div>)。最好避免使用 hidden="true"，因为读取/更新代码的人可能会认为 hidden="false" 会产生相反的效果，这完全是错误的。

另一方面，Aria-hidden 是一个枚举属性，其值有限。如果 aria-hidden 属性存在，则其值必须为"true"或"false"。如果我们想要"未定义(默认)"状态，则必须完全删除该属性。

示例

这是一个使用 hidden 属性的示例。

<!DOCTYPE html>
<html>
  <head>
    <title>Example of using hidden attribute</title>
    <style>
        body{
            margin:30px;
        }
        div{
            border:2px dashed mediumvioletred;
            height:40px;
            width:300px;
        }
        h3{
            color:navy;
        }
    </style>
  </head>
  <body>
    <h3>The paragraph underneath is hidden.</h3>
    <div>
    <p hidden>This is invisible text.</p>
    </div>
  </body>
</html>

aria-hidden 属性指示屏幕阅读器是否应忽略该元素。它指定元素及其后代元素将对用户不可见，这是由作者实现的。仅当隐藏可见内容的目的是通过删除冗余内容来提升辅助技术用户的体验时，才应谨慎使用此属性来隐藏辅助技术用户可见的呈现内容。作者必须确保辅助技术能够访问等效且相同的含义和功能。

示例

这是一个使用 aria-hidden 属性的示例。

<!DOCTYPE html>
<html>
  <head>
    <title>Example of using aria-hidden attribute</title>
    <style>
        body{
            margin:30px;
        }
        div{
            border:2px dashed navy;
            height:40px;
            width:300px;
        }
    </style>
  </head>
  <body>
    <p>aria-hidden="false"</p>
    <div>
    <p aria-hidden="false">This is accessible text.</p>
    </div>
    <br>
    <p>aria-hidden="true"</p>
    <div>
    <p aria-hidden="true">This is inaccessible text.</p>
    </div>
  </body>
</html>