CSS user style to add a red border around media (images, audio, video and animated 'gifv') that lacks a description. Based on code by Paul: https://linernotes.club/@balrogboogie

Mastodon-indicate_undescribed_media_with_borders-subtler.user.css

/* indicate media without a description
initial code by Paul (https://linernotes.club/@balrogboogie), expanded upon by FiXato (https://contact.fixato.org)
related discussions: https://dragonscave.space/@Mayana/106443499687608116.
Feel free to reuse it; it's public domain (https://linernotes.club/@balrogboogie/106681622019395866) */
.media-gallery__item-thumbnail img:not([alt]),
.audio-player__canvas:not([title]),
.video-player video:not([title]), 
.media-gallery__gifv video:not([title])
 {
    border: 1px dashed rgba(255, 0, 0, 0.5);
    box-sizing: border-box;
}

Mastodon-indicate_undescribed_media_with_borders.user.css

/* indicate media without a description
initial code by Paul (https://linernotes.club/@balrogboogie), expanded upon by FiXato (https://contact.fixato.org)
related discussion: https://dragonscave.space/@Mayana/106443499687608116.
Feel free to reuse it; it's public domain (https://linernotes.club/@balrogboogie/106681622019395866) */
.media-gallery__item-thumbnail img:not([alt]),
.audio-player__canvas:not([title]),
.video-player video:not([title]), 
.media-gallery__gifv video:not([title])
 {
    border: 2px solid red;
    box-sizing: border-box;
}

I have modified it for use with pleroma front end c:

/* indicate media without a description
initial code by Paul (https://linernotes.club/@balrogboogie), expanded upon by FiXato (https://contact.fixato.org)
rewrite for pleroma by beefox (https://myfriendsare.gay/foxes)
related discussions: https://dragonscave.space/@Mayana/106443499687608116.
Feel free to reuse it; it's public domain (https://linernotes.club/@balrogboogie/106681622019395866) */ 
.image img:not([alt]):not(.nsfw), .image img[alt=""]:not(.nsfw),
.video video:not([alt]):not(.nsfw), .video video[alt=""]:not(.nsfw),
.audio audio:not([alt]):not(.nsfw), .audio audio[alt=""]:not(.nsfw),
.image-attachment[title=""] img.nsfw, .image-attachment:not([title]) img.nsfw 
{
    border: 1px dashed rgba(255, 0, 0, 0.5);
    box-sizing: border-box;
}

/* indicate media without a description
initial code by Paul (https://linernotes.club/@balrogboogie), expanded upon by FiXato (https://contact.fixato.org)
rewrite for pleroma by beefox (https://myfriendsare.gay/foxes)
related discussions: https://dragonscave.space/@Mayana/106443499687608116.
Feel free to reuse it; it's public domain (https://linernotes.club/@balrogboogie/106681622019395866) */ 
.image img:not([alt]):not(.nsfw), .image img[alt=""]:not(.nsfw),
.video video:not([alt]):not(.nsfw), .video video[alt=""]:not(.nsfw),
.audio audio:not([alt]):not(.nsfw), .audio audio[alt=""]:not(.nsfw),
.image-attachment[title=""] img.nsfw, .image-attachment:not([title]) img.nsfw 
{
    border: 2px solid #ff5555;
    box-sizing: border-box;
}

Nice! Thanks. :)

this actually needs updating for the latest pleroma-fe but the fe that ships with pleroma atm works fine with this

To catch cases where the alt or title attribute is present but is empty, I include:

.media-gallery__item-thumbnail img[alt|=""],
.audio-player__canvas[title|=""], 
.video-player video[title|=""], 
.media-gallery__gifv video[title|=""]

in the CSS shown above.

I.e. my full custom CSS block looks like this:

/* indicate media without a description
initial code by Paul (https://linernotes.club/@balrogboogie), expanded upon by FiXato (https://contact.fixato.org)
related discussions: https://dragonscave.space/@Mayana/106443499687608116.
Feel free to reuse it; it's public domain (https://linernotes.club/@balrogboogie/106681622019395866) */
.media-gallery__item-thumbnail img:not([alt]), 
.media-gallery__item-thumbnail img[alt|=""], 
.audio-player__canvas:not([title]), 
.audio-player__canvas[title|=""], 
.video-player video:not([title]), 
.video-player video[title|=""], 
.media-gallery__gifv video:not([title]), 
.media-gallery__gifv video[title|=""] 
 {
    border: 2px dashed rgba(255, 204, 0, 1);
    box-sizing: border-box;
}

I might also include something like .media-gallery__item-thumbnail img[alt^=" "] to also catch people entering one or more spaces as the image description.

Edit: removed stray comma, thanks @lukaprincic

It's a bit of a nitpick as Mastodon writes to both title and aria-label, but I think it's better to check for arial-label on the videos.

In case it helps anyone, this's what I'm using. I put a green border round things that have descriptions, red border round things that don't:

.media-gallery img[alt],
.media-gallery video[aria-label] {
	border:1px solid lightgreen;
	box-sizing:border-box;
}

.media-gallery img:not([alt]),
.media-gallery video:not([aria-label]) {
	border:1px solid red;
	box-sizing:border-box;
}

hi all,
I'm currently using this in the custom css on my instance:

.media-gallery__item-thumbnail img:not([alt]), 
.media-gallery__item-thumbnail img[alt|=""], 
.media-gallery__item-thumbnail img[alt^=" "],
.media-gallery__preview img:not([alt]),
.media-gallery__preview img[alt|=""],
.media-gallery__preview img[alt^=" "],
.audio-player__canvas:not([title]), 
.audio-player__canvas[title|=""], 
.audio-player__canvas[title^=" "], 
.video-player video:not([title]), 
.video-player video[title|=""], 
.video-player video[title^=" "],
.media-gallery__gifv video:not([title]), 
.media-gallery__gifv video[title|=""],
.media-gallery__gifv video[title^=" "] 
{
    border: 8px dashed red;
    box-sizing: border-box;
}

just to note @quokka79 's code above will not work correctly because there is a comma before the { and it seems this makes it invalid css (by mastodon?, not sure)