After spending more time on this question, I hope to clarify my thoughts better this time around.
I am currently designing a responsive layout for my upcoming landing page. The main header in the body changes based on the browser size and device.
<h1><span class="main__header--changer">COMING SOON</span></h1>
... along with the CSS
@media (max-width: 75em) {
h1:before {
content: "HOLD ONTO YOUR HATS";
}
.main__header--changer {
display: none;
}
}
@media (max-width: 64em) {
h1:before {
content: "NOT LONG TO GO";
}
.main__header--charger {
display: none;
}
}
... and so forth, with different variations of "coming soon" having fewer letters as the screen size decreases, down to just 'nigh'.
The method I'm using to achieve this means that screen readers will not read the heading due to the display:none property. Is there an alternative way to hide the heading visually but still have it read by screen readers?
Thank you