Twitter.com: image alt presence revealer by myfonj

/* ==UserStyle==
@name           Twitter.com: image alt presence revealer
@namespace      myfonj
@version        1.0.4
@description    Gives slight visual clue on elements that (don't) lack accessible descriptions.
@author         myfonj
@license        CC0
==/UserStyle== */

@-moz-document domain("twitter.com"), domain("x.com") {
/*
https://greasyfork.org/en/scripts/428284/versions/new
1.0.4 (2024-05-17) x.com "Terror from the deep"

*/
/* 
§ mark alt-less images
twitter has nasty habit of using [aria-label] without value
luckilly, from CSS POW it is same as using [aria-label=""]
exceptions:
- avatars (see end of stylesheet)
*/
[aria-label=""]:not([role]),
[aria-label="Image"],
[aria-label="Embedded video"],
img:not([alt]):not(:hover),
img[alt="Image"]:not(:hover),
img[alt=""]:not(:hover),
img[alt="Embedded video"]:not(:hover)
{
 outline: 0.3em inset rgba(255,0,0,0.3) !important;
 outline-offset: -.5em;
}
/*
 § mark imges with alternative texts
 exceptions:
 - emoji
*/
[aria-label
 ][data-testid*="photo"i
 ]:not([aria-label=""]
 ):not([aria-label="Image"]
 ):not([aria-label="Embedded video"]
 ):not(:hover),
[aria-label
 ][data-testid*="preview"i
 ]:not([aria-label=""]
 ):not([aria-label="Image"]
 ):not([aria-label="Embedded video"]
 ):not(:hover) [aria-label],
img[alt
 ]:not([alt=""]
 ):not([alt="Image"]
 ):not([alt="Embedded video"]
 ):not([src*=".twimg.com/emoji/v"]
 ):not(:hover)
{
 outline: 0.3em inset rgba(0,255,0,0.3) !important;
 outline-offset: -.5em;
}
/*
 § exception for avatars
 _all_ avatars have void aria-labels and alts
 (images with alts are invisible anyway, so )
*/
[style="padding-bottom: 100%;"
 ] + div > div[aria-label=""]
{
 outline: none !important;
}
}