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!