The word 'Technology', layered on top of itself many times such that each layer is a different color of the rainbow.
What's the big deal? Click "read more" to find out!
A screen reader, on encountering this post, will say the following (tested with iOS screen reader):
"The word 'Technology', layered on top of itself many times such that each layer is a different color of the rainbow."
I accomplished this by using a <p> tag with font-size of 0px to hide it, with that description as the contents.
Meanwhile, all the rainbow <p> tags for the visual version of the post have aria-hidden="true" set on them, which tells screen readers not to read them. If I didn't have that, the screen reader would read the word "Technology" over and over again, senselessly. (I probably could have done this slightly differently by putting them all in a div, and making that container div be aria-hidden. But I didn't, oh well.)
"A paragraph tag with font size of 0px? Sounds like a dirty hack!" You're right my friend, but here's the problem. There's this lovely attribute called aria-description. It lets you write a description for an element! I should be able to write a description for the enclosing div with this! Why can't I? Two reasons
- Cohost filters it out
- Much more importantly, its not actually standardized yet. As MDN says:
Note: aria-description is still in W3C Editor's Draft for ARIA 1.3. For the time being, continue to use aria-describedby, which has been supported since ARIA 1.1.
And aria-describedby requires that you reference another HTML element on the page by its ID. So I'd have to put that descriptive <p> tag in and hide it anyway.
Kinda bullshit if you ask me! Anyways, here's the full HTML for the post above the fold:
<div style="height: 3em; font-size: 32px">
<p style="position: absolute; font-size: 0px;">The word 'Technology', layered on top of itself many times such that each layer is a different color of the rainbow.</p>
<p style="position: absolute; left: 6px; top: 0px; color: #F22; z-index: 5" aria-hidden="true">Technology</p>
<p style="position: absolute; left: 8px; top: 2px; color: #880; z-index: 4" aria-hidden="true">Technology</p>
<p style="position: absolute; left: 10px; top: 4px; color: #080; z-index: 3" aria-hidden="true">Technology</p>
<p style="position: absolute; left: 12px; top: 6px; color: #00F; z-index: 2" aria-hidden="true">Technology</p>
<p style="position: absolute; left: 14px; top: 8px; color: #604; z-index: 1" aria-hidden="true">Technology</p>
</div>
