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:
- post by Codarobo with clarifications and resources
- post by thricedotted with an explanation how to use `aria-describedby`
original post continues below:
<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 * to elements (especially interactive elements). you can read more in The DocumentationâŚroles
role does get stripped⌠awhok thatâs all i know!!!!
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-labelattribute 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!