Next.js: empty alt tag when using Image Component

Question

I am using the following code to show an image:

import Image from 'next/image'
// ...
<Image src={ausrufezeichen} alt="Ausrufezeichen"/>

The following HTML Code is being rendered:

<div style="display:inline-block;max-width:100%;overflow:hidden;position:relative;box-sizing:border-box;margin:0">
    <div style="box-sizing:border-box;display:block;max-width:100%">
        <img style="max-width:100%;display:block;margin:0;border:none;padding:0" alt="" aria-hidden="true" role="presentation" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjciIGhlaWdodD0iMjAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIvPg=="/>
    </div>
    <noscript>
        <img alt="Ausrufezeichen" srcSet="/_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Fimg%2Fpfeile_punkte%2Ficon_ausrufezeichen.d442fe0f12568980c7889dc07a018b24.png&amp;w=96&amp;q=75 1x, /_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Fimg%2Fpfeile_punkte%2Ficon_ausrufezeichen.d442fe0f12568980c7889dc07a018b24.png&amp;w=256&amp;q=75 2x" src="/_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Fimg%2Fpfeile_punkte%2Ficon_ausrufezeichen.d442fe0f12568980c7889dc07a018b24.png&amp;w=256&amp;q=75" decoding="async" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/>
    </noscript>
    <img alt="Ausrufezeichen" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/>
</div>

When I just checked my SEO status with 'SEO Minion', I noticed that I am shown a lot of images without alt-tag. Why is this first img displayed without alt tag? Can I add one there somehow?

Proprietress

Your alt="Ausrufezeichen" is there, What are you talking about? – Spiracle

@RyanLe It is present on two <img>, but the first has an empty alt tag. – Proprietress

Answer 1

There are a few things that you need to understand in your generated code:

<div style="display:inline-block;max-width:100%;overflow:hidden;position:relative;box-sizing:border-box;margin:0">
    <div style="box-sizing:border-box;display:block;max-width:100%">
        <img style="max-width:100%;display:block;margin:0;border:none;padding:0" alt="" aria-hidden="true" role="presentation" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjciIGhlaWdodD0iMjAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIvPg=="/>
    </div>
    <noscript>
        <img alt="Ausrufezeichen" srcSet="/_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Fimg%2Fpfeile_punkte%2Ficon_ausrufezeichen.d442fe0f12568980c7889dc07a018b24.png&amp;w=96&amp;q=75 1x, /_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Fimg%2Fpfeile_punkte%2Ficon_ausrufezeichen.d442fe0f12568980c7889dc07a018b24.png&amp;w=256&amp;q=75 2x" src="/_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Fimg%2Fpfeile_punkte%2Ficon_ausrufezeichen.d442fe0f12568980c7889dc07a018b24.png&amp;w=256&amp;q=75" decoding="async" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/>
    </noscript>
    <img alt="Ausrufezeichen" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/>
</div>

• First Image: It is a placeholder present there to prevent CLS. It will decode to a SVG image with width and height same as your image. Once your image is loaded, it will be removed from DOM.

• Second Image: This one is your image but it is visible only if a user/browser has disabled JavaScript execution for your site or doesn't supports it. Also, it has a perfectly fine alt tag.

• Third Image: This is going to be your rendered image in a browser that has JS enabled. It is currently a 1x1 GIF, but scripts will change its source to load it (when user is about to view it, i.e. image is near the visible page).

---

Why you don't need to add (and shouldn't add) an alt attribute other than "" to placeholders:

• The image source is inline and is nearly guaranteed to load properly.

• Screen readers (or any other assistive technology) won't read it because it has alt="", aria-hidden="true" and role="presentation".

• A non-empty value of alt attribute for these types of images would add audible clutter to screen reader output, and could distract users if the topic is different from that in adjacent text.

References:

1. https://www.w3.org/WAI/tutorials/images/decorative/

In these cases, a null (empty) alt text should be provided (alt="") so that they can be ignored by assistive technologies, such as screen readers. Text values for these types of images would add audible clutter to screen reader output or could distract users if the topic is different from that in adjacent text.

Screen readers also allow the use of WAI-ARIA to hide elements by using role="presentation". However, currently, this feature is not as widely supported as using a null alt attribute.

2. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-hidden_attribute

Adding aria-hidden="true" to an element removes that element and all of its children from the accessibility tree. This can improve the experience for assistive technology users by hiding:

• purely decorative content, such as icons or images
• duplicated content, such as repeated text
• offscreen or collapsed content, such as menus

---

• "Why is this first img displayed without alt attribute?"

  It has alt="", and the placeholder thing I have covered above.

• "Can I add one there somehow?"

  You can do pretty-much anything by writing your own script(s). Here you need to search for such elements, and add alt texts correspondingly.

  But Next.js doesn't provides anything like that for perfectly valid reasons. Also, it won't appear on your page source. Your SEO profiler is probably checking the page source only, as once an image is rendered, the placeholder is removed from the DOM. My advice here is stop checking your web app on such things (ones that are not compatible with React).

  Every big search engine Google (at least) knows how to let your page render before crawling. Moreover, an image with empty alt attribute is not same as one without an alt attribute.

  For accessibility related stuff, try checking your page on web.dev/measure, PageSpeed Insights, or on your local machine using Lighthouse or Firefox Dev Tools' Accessibility Inspector.

Shoemaker

What about SEO? I am worried about this blank alt="" since Bing URL inspection tool says that I have SEO issues regarding my image "alt" tag. I have filled all of them but as you mentioned we still have the blank image that have this empty alt. Are you sure it doesn't affect search engine optimization? 'Cause bing says that is an "issue" – Nexus

@Charlyberthet It also says that it is of low severity. Moreover, if a search engine is not able to process the images it is highly likely that they will not be able to interpret your dynamic content properly. And reading different articles online, I believe that Bing doesn't completely support React and Angular apps yet. Also as I wrote w3c says empty alt attribute is the way to show decorative images. I still don't get why Bing is complaining about that. Feel free to contact their support regarding that, citing proper references. – Shoemaker

Answer 2

Why is this first img displayed without alt tag? Can I add one there somehow?

The first image is a transparent placeholder with the same size of the original image, it allows to lazy load the image without content reflow.
Usually it is displayed only for few ms, and probably there is no need to include an alt tag for something that is not a real image.

From the docs seems that is not possible to change the alt tag to the placeholder.

Decoration