thricedotted

li (that's me)

@thricedotted

it's me!


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)

Update

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 -->
</div>

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>
</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

oh interesting!! totally didn't expect that aria-* attributes weren't stripped! it does look like role attributes are stripped though (which makes sense to me -- most of the roles would be overly permissive for user content).

MDN does include this note on aria-label:

The aria-label attribute is intended for interactive elements only. When placed on non-interactive elements ... it may not be read or may confuse your users as a non-interactive element that acts like an interactive one.

more research brought up this deep-dive blog post exploring what screenreaders do with aria-label, aria-labelled-by, and aria-describedby. my own conclusion after skimming it is that aria-describedby has the best support on "static content" -- which, in spite of our interactable CSS crimes, is every HTML element we can use in user content aside from <summary> (which has an implicit role of button).

what this means to me is that if you're using <summary> for weird stuff, like a picture that changes when you click on it, aria-label might be helpful here. but for other crimes, aria-describedby may be a better fit.

check under the fold for how to use aria-describedby!


how to use aria-describedby

<div aria-describedby="user-content-crime">
    <!-- the scene of the CSS crime -->
</div>

<p id="crime">A description of the crime that has occurred 😈</p>

so another surprise to me is that cohost doesn't strip the id attribute! however, it does semi-sanitize it by prepending "user-content-" to it (uh oh a whole new potential class of Crimes has opened up). in practice this means we can:

  • put the description in an element with id="something"
  • set aria-describedby="user-content-something" on the element it's describing

if you want to hide the description visually, you can add these styles to the element containing the description:

  clip: rect(0 0 0 0); 
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap; 
  width: 1px;

depending on the CSS crime, it may or may not make sense to wrap the rest of it in <div aria-hidden="true">.

finally, i'll add that like @blep, i also don't rely on accessibility tools to browse the web -- i want to Do My Best but none of this is authoritative. i would really love to discover how this works in practice and iterate on these methods with the people they affect the most!

anyway thanks for reading and i'd like to go back and make some of my existing posts more accessible now!