☰

Greasy Fork is available in English.

Twitter.com: image alt presence revealer

Gives slight visual clue on elements that (don't) lack accessible descriptions.

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

@-moz-document domain("twitter.com") {
/*
https://greasyfork.org/en/scripts/428284/versions/new
*/
/* 
§ 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]),
img[alt="Image"],
img[alt=""],
img[alt="Embedded video"]
{
 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"]
 ),
[aria-label
 ][data-testid*="preview"i
 ]:not([aria-label=""]
 ):not([aria-label="Image"]
 ):not([aria-label="Embedded video"]
 ) [aria-label],
img[alt
 ]:not([alt=""]
 ):not([alt="Image"]
 ):not([alt="Embedded video"]
 ):not([src*=".twimg.com/emoji/v"])
{
 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;
}

}