Contrib.social

alt attribute for b-blur reveal preview image is empty

Open on Drupal.org →
Created on 22 September 2022, almost 2 years ago
Updated 5 August 2023, 11 months ago

Problem/Motivation

SEO tools complain that the alt attribute for the generated blur image (containing data:image/... base64 code) in reveals is empty.

Code example:

<div class="reveal-overlay" style=""><div class="reveal large reveal--video" role="dialog" aria-hidden="true" data-reveal="qavtj5-reveal"><div class="media media--blazy cookies-video-blazy-oembed media--fx media--switch media--switch--media media--player media--bundle--remote-video media--video media--ratio media--ratio--169 is-b-loaded animated blur" data-animation="blur" aria-live="polite"><img class="b-blur b-lazy b-loaded" decoding="async" src="data:image/jpg;base64,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" alt="">
<img alt="Preview image for the video &quot;Pad für Bodenausgleich Dachbahnnähte überbrücken im Terrassenbau - Weichschaum Pad Pro selbstklebend&quot;." title="Preview image for the video &quot;Pad für Bodenausgleich Dachbahnnähte überbrücken im Terrassenbau - Weichschaum Pad Pro selbstklebend&quot;." class="media__image media__element b-lazy b-loaded" decoding="async" loading="lazy" data-media-id="2877" src="/sites/default/files/2022-09/video_vorschaubild_perfekter_bodenausgleich_mit_weichschaumpad_pro_200_200_10_mm_selbstkelebend.jpg" width="585" height="329">
            <span class="media__icon media__icon--close"></span>
      <button class="media__icon media__icon--play video-player-controls__button video-player-controls__button--play" aria-label="play" data-url="/media/oembed?url=https%3A//www.youtube.com/watch%3Fv%3DNJwz4Rhe3Vo&amp;max_width=0&amp;max_height=0&amp;hash=l1vhTze3DJ8ppXjuOux_PmURZEIUhl7kShN4e9uyhMM&amp;blazy=1&amp;autoplay=1">
        <i class="ico ico-db-play-circle"></i>
      </button>
      </div><button class="close-button" data-close="" aria-label="Close modal" type="button"><span aria-hidden="true">×</span></button></div></div>

see this part:
<img class="b-blur b-lazy b-loaded" decoding="async" src="data:image/jpg;base64,/[...]" alt="">

The alt="" attribute is indeed empty. Instead the following img has an alt tag and the same image. I don't know about the details, sorry.

I guess the general functionality was introduced here: #3077839: Add image effects during loading such as blur, etc. → ?

Steps to reproduce

Proposed resolution

Use the alt text from the original image - it has an alt text.

Remaining tasks

User interface changes

API changes

Data model changes

💬 Support request
Status

Fixed

Version

2.0

Component

Documentation

Created by

🇩🇪Germany Anybody Porta Westfalica

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • Comment 11 months ago →
    🇩🇪Germany Anybody Porta Westfalica

    Thanks @gausarts I just ran into this again and totally agree with #6. On the other hand I think a SEO tool has no chance to sort out intentionally empty alt attributes (alt="") from unintentionally empty alt attributes (alt="").

    So for the tools and for the developers to indicate that the alt tag is empty correctly, adding role="presentation" additionally would totally make sense. That way we give SEO tools the chance to sort out these kind of empty alt tags and developers can see it's intentionally and not a bug.

    What do you think?

    I was trying to prepare a MR but I can't find the file, where the empty alt tag is generated. My assumption from #2 was wrong. The alt tag is filled there.

contrib.social Blog FAQ Discussions
Production build 0.69.0 2024