NO BUG: Alt text missing on image block breakpoints

[mrapino]

I just did a test because my images didn’t have the alt text showing on the front-end and I found out that if you use the breakpoints for a featured image so you can have a fallback, the alt text does not get displayed on the breakpoint version of the image.

[Matej]

Hey @mrapino,

what do you mean by:

@mrapino

if you use the breakpoints for a featured image so you can have a fallback

Because if you use breakpoints, you need to create multiple “image” elements anyway. So, I suppose you used “Sources”, right?
In this case, you should see the alt text of the original image, not the one that you defined in “sources”.

Is this the case for you?

Best regards,
Matej

[mrapino]

HI Matej,

You misunderstood me. Let me use some visuals.

As you can see, I am using the built-in functionality where you can display {featured_image} for any breakpoint, will the fallback image being the original image of the image block. That is what I meant by “breakpoint”.

I actually discovered that it is worse than just not displaying… I dug a little deeper and it seems that it is displaying the alt text of the fallback image even when the featured image is the image being displayed on the front-end.

[mrapino]

Also, it looks like this has been an issue for at least a year so far:

Alt Text for breakpoint source image not showing

When I set a different image for my mobile breakpoint, and DO NOT set custom ALT text in Bricks, on the frontend, in the mobile breakpoint, it is showing the ALT text for the desktop breakpoint image instead of the mobile image alt text.

[mrapino]

And here is another instance of the same issue:

Img Alt text is not pulled from image source

Browser: Chrome 110 OS: macOS / Windows / Linux / etc. URL: Link to a page that illustrates this issue Video: Short screen recording that illustrates this issue (free tool: jam.dev) I found that the image alt text is not pulled from the actual image that is displayed. How I found this: Alt text have been missing from my images. The images this occurred were images where I set a fallback image that would display if the post did not have a featured image. This fallback image was missing the…

[Matej]

Hi @mrapino,

in the <picture> element, the alt attribute is specified on the <img> tag, which serves as a fallback for browsers that do not support the <picture> element or when none of the <source> elements match the current conditions/breakpoints.

However, the alt attribute on the <img> tag does not change based on which <source> is being displayed. The alt text remains the same regardless of which image is shown.

If you need different alt text for different images, you would need to use JavaScript, for example, to dynamically change the alt attribute based on some conditions or add multiple Image elements, and show/hide them on different breakpoints.

You can check all <source> attributes here: <source>: The Media or Image Source element - HTML: HyperText Markup Language | MDN, and you will see that alt attribute is not available.

It’s not Bricks limitation, it’s how <picture> element with <source> works. That’s why I will mark this topic as no-bug, and will also update the other two.

Best regards,
Matej

[mrapino]

Don’t you think this is a poor application of this functionality? Why would you allow for a different image to be used without pulling its alt text with it? You are stating how it currently works, but it shouldn’t be coded that way. What use is having alt text on an image that is no longer that image?

[mrapino]

If you are going to give us the ability to choose a featured image, and have a fallback, the very least you can do it ensure that the correct alt text is used.

This is absolutely a limitation of Bricks.

[mrapino]

From an accessibility perspective, Brick is programmed incorrectly, causing a big accessibility issue, as well.

[mrapino]

Fixed this myself WITHOUT JAVASCRIPT.

SOLUTION (since none was offered, I will help others with this issue):

@ajercan and @moritzre

You need to use TWO image blocks instead of one.

On the first, choose your fallback image and then use CONDITIONS:

Then you have a second image block with the dynamic {featured_image} chosen. In conditions you put:

If you do this, your images will have the CORRECT alt text, and you will also have a more accessible website, since having alt text for a different image than the one shown is absolutely not correct OR accessible.

[Matej]

Hey @mrapino,

thanks for your answers and a possible workaround. Now, since you tagged me in three answers, let me answer you

@mrapino

Don’t you think this is a poor application of this functionality? Why would you allow for a different image to be used without pulling its alt text with it?

No, I think it’s the correct/standard implementation. Like I said earlier, you can check here (<source>: The Media or Image Source element - HTML: HyperText Markup Language | MDN), to see which attributes are available for <sources> element. You will see that different alt attribute is not.

@mrapino

If you are going to give us the ability to choose a featured image, and have a fallback, the very least you can do it ensure that the correct alt text is used.

This is absolutely a limitation of Bricks.

If we call it a limitation, then it’s a limitation of the HTML standard. These guys are defining what sources should support and what not.

@mrapino

From an accessibility perspective, Brick is programmed incorrectly, causing a big accessibility issue, as well.

Like I said above, the only way for Bricks to provide this, would be to create a custom solution, with JS. Then, you could have a toggle somewhere, if you want this to work so, or not.

Best reagrds,
Matej