qpixel icon indicating copy to clipboard operation
qpixel copied to clipboard

QPixel warns me that images in a post lack alternative captions, yet no images exist.

Open RokeJulianLockhart opened this issue 4 months ago • 5 comments

meta:294873

What The Problem Is

When I attempt to update meta.codidact.com/posts/294861/edit with:

Recently, I posted electrical.codidact.com/comments/thread/11173#comment-27698, which cites two images from Wikipedia, and another from elsewhere.

Although citing versioned MediaWiki URIs from Wikipedia isn't problematic, because they'll never become 404s, I've been forced to cite szapphone.com/wp-content/uploads/2023/11/usb-c-pinout-diagram.webp, because I am unable to paste images into comments, which may well become so.

A workaround may exist: to post an image to an external hoster, ^1 then embed that image with a CommonMark hyperlink (![]()). However, I've yet to ascertain whether that operates either, and ^2 it, regardless, wouldn't be convenient, nor significantly more stable.

...I see:

<div class="notice is-warning"><ul><li>It looks like you're posting an image with no alt text. Alt text is important for accessibility. Consider adding alt text to the images in your post - <a href="/help/alt-text">read this help article</a> for details and help writing alt text.</li></ul></div>

A Screenshot

However, that markup contains no embedded images:

Recently, I posted [`electrical.codidact.com/comments/thread/11173#comment-27698`](https://electrical.codidact.com/comments/thread/11173#comment-27698), which cites two images from Wikipedia, and another from elsewhere.

Although citing versioned MediaWiki URIs from Wikipedia isn't problematic, because they'll never become 404s, I've been forced to cite [`szapphone.com/wp-content/uploads/2023/11/usb-c-pinout-diagram.webp`](https://www.szapphone.com/wp-content/uploads/2023/11/usb-c-pinout-diagram.webp), because I am unable to paste images into comments, which may well become so.

<del>A workaround may exist: to post an image to an external hoster, [^1] then embed that image with a CommonMark hyperlink (`![]()`). However, I've yet to ascertain whether that operates either, and</del> [^2] it, regardless, wouldn't be convenient, nor *significantly* more stable.

[^2]: [`comments/thread/11190#comment-27707`](https://meta.codidact.com/comments/thread/11190#comment-27707)

[^1]: [`github.com/pixelfed/pixelfed/issues/6211#issue-3553892727`](https://github.com/pixelfed/pixelfed/issues/6211#issue-3553892727:~:text=I%20post%20almost%20solely%20unlisted%20images%2C%20to%20replace%20Imgur)

How To Reproduce It

I don't know, beyond pasting that specific markup. I've yet to reduce it to a minimal reproducible example.

Expected Behaviour

The banner should not appear when no images exist.

My Environment

Version b7103551 (2025-10-17 15:42:56Z)

RokeJulianLockhart avatar Oct 29 '25 16:10 RokeJulianLockhart

Thanks for the report, and do feel free to ignore the warning until we can fix it. (You can still post; it's just annoying to get a misdirected warning.)

cellio avatar Oct 29 '25 16:10 cellio

@cellio, what's sad is that I shan't know whether I've actually forgotten to provide alternative text, or whether it's sending me on a goose chase, so I might erroneously ignore it.

RokeJulianLockhart avatar Oct 29 '25 16:10 RokeJulianLockhart

Note to other readers (and potential handlers): for the notice to show up, you have to attempt to submit the post - the check for image alt text is only run once upon submission if the post hasn't been validated yet. The culprit is our regular expression matching on ![]()). (see https://regex101.com/r/ubcVn4/1).

Oaphi avatar Oct 29 '25 17:10 Oaphi

I made a few test answers under the Meta question, and then combined their results into a single answer. It appears that ![]() alone doesn't trigger the warning due to the parentheses being empty, but putting something inside the parentheses does. So ![]()) triggers the warning.

Seems like we need to exclude code (code blocks and inline code) before applying the regex. There's unlikely to be a reliable way of doing that exclusion with regex (that would mean effectively implementing a Markdown parser in regex). Is there a way to do this using the output of the Markdown parser (since that's available client side for the preview)?

Hopefully there's a straightforward way that I'm missing. At present all I can think of is counting the matches in the raw Markdown and then subtracting the number of matches in the rendered post, and only giving the warning if the result is greater than zero.

trichoplax avatar Oct 30 '25 19:10 trichoplax

@cellio, what's sad is that I shan't know whether I've actually forgotten to provide alternative text, or whether it's sending me on a goose chase, so I might erroneously ignore it.

Even once this bug is fixed, it would still be easy to accidentally overlook a missing alt text if there are multiple images in the post. Adding alt text for the first one and missing the rest will result in the post saving successfully since the warning is only given the first time save is pressed.

Ideally we'd have a list of places that are missing alt text so the user knows how many to fix and where to find each one, but that seems like a much bigger task.

trichoplax avatar Oct 30 '25 19:10 trichoplax