Hypertext Markup Language (HTML) serves as a foundational language for web development. By combining it with additional programming languages such as Cascading Style Sheets (CSS) and JavaScript (JS), developers can craft a multitude of interactive web applications to address various everyday challenges.
In addition to the previously listed technologies, HTML incorporates tools such as ARIA, which stands for Accessible Rich Internet Applications. ARIA assists developers in crafting web content that is user-friendly for individuals with specific abilities.
Alongside significant benefits, there are also specific drawbacks to consider. Initially, it can be confusing for newcomers to distinguish between certain keywords found in both HTML and ARIA, leading to potential confusion. For instance, the term "hidden" is a keyword present in both HTML and ARIA.
HTML hidden attribute
The HTML hidden attribute is specifically designed for elements that are hidden from the user until certain conditions or criteria are met. These elements contain content that may not be relevant to every user.
By employing a hidden attribute, the browser conceals the element's content. However, through specific JavaScript functions, we can conveniently retrieve the hidden attributes. Subsequently, when particular conditions are met by the user, JavaScript enables the browser to reveal the concealed attribute's content.
Syntax:
<element hidden>
Example:
Program to display the use of hidden attribute
<html>
<head>
<title>hidden attribute</title>
<style>
body {
text-align: center;
border: 2px solid crimson;
}
h1 {
color:crimson;
}
</style>
</head>
<body>
<h1>Example of the "hidden" attribute</h1>
<!-- hidden paragraph -->
<p hidden>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Esse hic consequatur sed ipsa similique necessitatibus velit soluta veritatis provident delectus accusantium vero, expedita, natus aut illum, voluptate consectetur facilis sapiente! Deleniti incidunt numquam unde distinctio officiis ipsam mollitia error, ipsa debitis sequi? Ipsum esse ut minus dolorum, sapiente placeat magni.</p>
</body>
</html>
Output
Illustrative script showcasing the utilization of concealed attributes through the retrieval of elements using JavaScript.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hidden attributes</title>
<style>
.container {
font: 16px "Open Sans", Helvetica, Arial, sans-serif;
border: 1px solid crimson;
padding: 12px;
width: 500px;
text-align: center;
border-radius: 10px;
}
.button {
font: 22px "Open Sans";
padding: 5px 36px;
background-color: crimson;
border: none;
border-radius: 20px;
color: aliceblue;
text-shadow: black;
}
h1 {
margin-top: 0;
font-size: 175%;
color: crimson;
}
</style>
</head>
<body>
<div id="show" class="container" hidden>
<h1>Thanks!</h1>
<p>Thank you by clicking the <strong>ok</strong>
you fulfil the criteria required to display the hidden content which was displayed using JAVASCRIPT!</p>
</div>
<div id="hidden" class="container">
<h1>this is an example of hidden attribute</h1>
<p>By clicking "OK" you agree to display the hidden content!</p>
<button class="button" id="okButton">OK</button>
</div>
<script>
document.getElementById("okButton")
.addEventListener("click", function() {
document.getElementById("hidden").hidden = true;
document.getElementById("show").hidden = false;
}, false);
</script>
</body>
</html>
Output
Aria hidden attribute
The purpose of Aria hidden attributes is to communicate to users the significance of the content they are viewing and whether it should be prioritized or disregarded. These attributes signal that elements along with their child elements are intended to be hidden from view or interaction by the user, based on the developer's specifications.
When using aria-hidden, the element remains visible in the browser but is excluded from the accessibility tree and supporting technologies while still being displayed on the browser. For example, setting aria-hidden = " true " will exclude the specified element and its children from the accessibility tree. It is important to apply this attribute only to the specific element when used with binding elements such as the body, as applying it to the entire webpage would render it inaccessible.
Syntax:
<element aria-hidden="true/false">
Example:
Program to display aria hidden attributes
<!DOCTYPE html>
<html>
<head>
<title>aria hidden</title>
<style>
body {
text-align: center;
border: 2px solid crimson;
border-radius: 20px;
}
h1 {
color: crimson;
}
p{
color: crimson;
}
</style>
</head>
<body>
<h1>Example of the "aria-hidden" attribute</h1>
<h4>aria-hidden="flase"</h4>
<!-- aria-hidden="false" paragraph -->
<p aria-hidden="false">
Here is some accessible text
</p>
<h4>aria-hidden="true"</h4>
<!-- aria-hidden="true" paragraph -->
<p arie-hidden="true">
Here is some un accessible text
</p>
</body>
</html>
Output
Note: The aria-hidden indicates that the elements and all of its children are not visible to any user as implemented by the developer.
Difference between HTML hidden and aria-hidden:
| HTML hidden | aria-hidden |
|---|---|
| HTML hides everything from the user, and the content is not displayed on the browser until or unless accessed by JavaScript. | ARIA's aria-hidden hides content from the assisting technology, but the items are displayed on the web browser |
| By using HTML hidden, you can remove desired content from the web browser to later displayed using properties | While using ARIA hidden, we don't remove the content from the browser. |
| You can apply the CSS style of display: none in HTML hidden. | ARIA's aria-hidden, no such script shall apply. |