it seems cohost doesn’t strip ARIA properties like
aria-label!! i think it would be nice if posts with css crimes had a little bit of aria properties so they’re not completely inaccessible to e.g. screen readers. (i mean, if you already spent an hour making a post, i think adding some labels shouldn’t be too much to ask lol)
elements within will still be selectable, though. if the css crime is functionally equivalent to an image, then it’s probably okay to also add
aria-hidden to anything inside. this makes accessibility tools pretend that those elements don’t exist.
<div aria-label="a css crime"> <div aria-hidden="true">this is invisible to accessibility tools</div> </div>
otherwise, consider adding
and appropriate * to elements (especially interactive elements). you can read more in The Documentation…
ok that’s all i know!!!!
FYI this post is mostly accurate but the aria-label example won't work as-is.
Aria-label is a non-visual alternative to
< label > tags, for interactive form controls and buttons primarily, things that the browser will give tab-focus to by default (which does not include most divs/spans). Adding a role, when appropriate, to your div may help, and if your div contains what is effectively an image, the img role will make aria-label useful. Just adding it to a normal div will not do anything.
If you have actual
img tags, they should use the
alt attribute instead. (Though at the moment I don't believe you can add alt text to images uploaded directly through the Cohost UI, so you might want to add descriptions to the normal text in your post for those.)
aria-hidden is somewhat more useful here in some cases - many CSS crime posts don't contain anything that a screen-reader could meaningfully interact with anyway, so the best solution might be to spare screen readers from trying to parse your garbled mess of a post. I'm actually gonna go add that to my CSS art posts right now!
Be warned however that it applies to everything inside the element that has that property set.
One last thing - if you have to hide your entire post, but that post -also- contains useful, important textual information, add a plaintext version of that text in your post that is not hidden. You can even use CSS to visually hide this if needed, while leaving it accessible to a screen reader (NOT via display: none!) Accessible hiding
(sorry for editing this a million times, I keep re-reading it and trying to make it clearer/more accurate as I find more info)