資料結構
網路
關係資料庫管理系統 (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 次瀏覽
