I kinda wish I could add Alt Text to actual text, meow. I feel like Content and Presentation have always been separate, but intertwined, things, and the ability to treat them as such in text would allow people to express themselves more freely without harming communication.
you can do that using ARIA! That's like, exactly what ARIA is for. ARIA is a part of html that tells browsers how to interpret/change content to be accessible for people with disabilities.
so, let's say I want to write my name where each letter is all separated into <span>s that are individually animated or styled in some way.
<span> Q </span>
<span> U </span>
<span> I </span>
<span> L </span>
<span> Y </span>
<span> N </span>
<span> N </span>
That'll be really bad for screen readers, which will see unrelated single characters and will read out each letter individually.
To fix this, we need to add two things.
- First we add the plain text to be read by the screen reader, and we use custom styles to hide the text visually.
- Then, for the section where your text is all spliced up into spans, add
aria-hidden="true"which stops everything within that element from showing up. That way, it doesn't end up reading both versions.
<span style="height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;"><span>
<span aria-hidden="true">
<span> Q </span>
<span> U </span>
<span> I </span>
<span> L </span>
<span> Y </span>
<span> N </span>
<span> N </span>
</span>
That way, text like can be made more screen-reader friendly, so only the sighted have to deal with the atrocity I've created. This can also be used if you want to stylize how you write with alternative characters,
This can also be used if you want to stylize how you write with alternative characters, <span style="height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;">like using the number three for Es.</span><span aria-hidden="true">lik3 using th3 numb3r thr33 for Es.</span>
And finally, a copy/pasteable format with placeholder text for you to replace. You can add this right into the middle of a paragraph.
<span style="height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;">TEXT FOR SCREEN READERS</span><span aria-hidden="true">CRIME ZONE</span>
Honestly it's that you can do this on cohost, because on almost any other social media site if you want to write in leet speak or Homestuck character styles or anything like that, you're just stuck having to choose between expressing yourself freely and accessibility. But because cohost gives us full a lot of the power of HTML in our posts, we can have it both ways!
Notes
Disclaimer: I'm very much an amateur and I don't have experience with screen readers, I'm just repeating what I've recently learned works, so if anybody sees something lacking I'd be happy to be corrected! The last few paragraphs of text look decent to me in the accessibility view on Firefox but since I don't use a screen reader I'm prone to overlooking things.
An earlier version of this post recommended using aria-label="text_goes_here" wrapped around the whole section to replace the text (and similarly use aria-hidden for the inner parts) but based on what I read that's might not actually work for spans and aria-label is primarily recommended for interactable elements. It would work on a heading if you're doing something funky with the CSS that splices up the characters, which is more precisely the example they showed in the HTML course where they used that strategy for accessibility. I spent way too long trying to determine if there IS a way to do it like that (use role="img" or role="text"???) but I was quickly trying to figure stuff out that's way beyond my skills so instead I used a similar strategy that the excellent markdown plus by @oatmealine uses for plain text.
