Three items need hiding, each for a different reason.
What to build
Three rules.
Requirements
.noticeis gone completely and takes up no space..priceis hidden, but its space is still reserved..sr-onlyis still read by screen readers but not seen. Give itposition: absolute, awidthandheightof1px,overflow: hiddenandclip-path: inset(50%).
Constraints
Do not use opacity, and do not add hidden attributes.
Example
The table in the lesson compares the methods.
Why it works
Each method has a different effect on layout and on assistive technology, so the right choice depends on who still needs the content.
Hints
Hint 1
The notice must leave no gap, so it should be removed altogether.
Hint 2
The price keeps its place, so that the row does not jump.
Hint 3
The sr-only pattern clips the element instead of removing it.
Solution
Show one correct solution (try it yourself first)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hiding</title>
<style>
.notice { display: none; }
.price { visibility: hidden; }
.sr-only {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
}
</style>
</head>
<body>
<p class="notice">Sale ended.</p>
<p>Tea <span class="price">120</span> in stock</p>
<button><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
</body>
</html>