数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法学研究隐藏属性和 aria-hidden 属性的区别是什么？
隐藏属性和 aria-hidden 属性简介
HTML 的hidden属性用于那些除非满足某些条件或标准，否则不会显示给用户的元素，即其内容与特定用户无关的元素。它是一个布尔属性，当用于某个元素时，会消除该元素的所有关联性。
当在 HTML 元素上指定时，[hidden 属性]表示该元素用于声明由页面其他部分重用的内容，而不是直接由用户访问，或者该元素尚未或不再直接与页面的当前状态相关。
例如，如果我们使用 hidden 属性，浏览器将不会显示该元素的内容，但是我们可以很容易地使用某些 JavaScript 操作访问隐藏属性，当用户满足某些条件时，JavaScript 将允许浏览器显示隐藏属性的内容。
语法
<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>
174 次浏览
