A Gay Robot

Some kinda possum-dragon thing that makes stuff on the computer! Very gay and trans and all that.

I’m Codarobo on VRChat/Telegram, and coda_robo on Twitter

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)


my post is mildly incorrect!! (i only briefly tested it with VoiceOver and thought it was good enough to go… sorry) aria-label is primarily meant for interactive elements and may not work for static content. consider using aria-describedby for that instead.

Also see:

original post continues below:

don’t heed this
it’s very easy!! you can just add a short description to the container element:
<div aria-label="A short description of what this CSS crime is.">
  <!-- css crimes -->

and then accessibility tools will show or read this to the user when they select this element.

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>

otherwise, consider adding aria-labels and appropriate roles* to elements (especially interactive elements). you can read more in The Documentation

*turns out role does get stripped… awh

ok that’s all i know!!!!

i should note that i myself dont use accessibility tools very often; i just read accessibility guidelines and hope im doing ok when writing websites. you should probably not consider anything i say to be authoritative

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.

Check out this SO page talking about its uses and limitations

What happens with aria-labelledby, aria-label and aria-describedby on static HTML elements?

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.)

Alt text basics

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)