Alt-Text From JS Slideshow Occurs Not In Sourcecode - Question | JoomShaper
🎃 Halloween Sale is Live! Get 35% OFF on all plans. Sale ends soon! Get Offer

Alt-Text From JS Slideshow Occurs Not In Sourcecode

J

Jürgen J. Fischer

SP Page Builder 3 months ago

Hi

We need to create an accessible website. To do this, we need to add alt text to all images. We've added alt text to each image in the JS slideshow, but it doesn't appear in the website's source code. How can we solve this problem?

0
12 Answers
Ziaul Kabir
Ziaul Kabir
Accepted Answer
Support Agent 3 months ago #196963

Hello Jürgen,

Thanks for reaching out to us.

Could you please share your website url with me?

Thanks

0
J
Jürgen J. Fischer
Accepted Answer
3 months ago #196964
0
Ziaul Kabir
Ziaul Kabir
Accepted Answer
Support Agent 3 months ago #196965

This slideshow uses background images for it's each slide, which do not require alt tags.

Thanks

0
J
Jürgen J. Fischer
Accepted Answer
3 months ago #196966

That's not correct. A new law (Accessibility Act) has been in effect in Germany. It clearly states: all images on a website must be provided with ALT text!

In addition, the JS Slideshow offers the option of entering ALT text, so it shouldn't be a problem to display it in the source code.

The law has been in effect since June 28, 2025. It would be great if you could quickly find a solution for all affected website operators.

0
Ziaul Kabir
Ziaul Kabir
Accepted Answer
Support Agent 3 months ago #196969

This slideshow uses background images applied through CSS. Since no <img> tag is used, there is no way to add an alt attribute. I think, The alt text requirement in accessibility guidelines generally applies to <img> elements, not background images set via CSS.

Thank you for your understanding.

0
J
Jürgen J. Fischer
Accepted Answer
3 months ago #196970

According to the German Accessibility Enhancement Act (BFSG), background images that convey information must be provided with descriptive alt text. The alt text should make the content or function of the image accessible to people with disabilities, especially the visually impaired, by being read aloud by screen readers.

This regulation applies to all images on a website, regardless of whether they are background images or not.

Why do I have the option to enter alt text if it isn't displayed?

If this isn't possible, background images will no longer be usable in Germany or Europe in the future, and many SP Pagebuilder add-ons will no longer make sense.

There's a solution for everything...

0
Ziaul Kabir
Ziaul Kabir
Accepted Answer
Support Agent 3 months ago #196988

Thanks for bringing this to our attention. I’ve forwarded it to our development team, and hopefully it will be implemented in the near future.

Thank you for your understanding.

0
J
Jürgen J. Fischer
Accepted Answer
3 months ago #196993

Thank you for your support, hope your development team can do this a.s.a.p.

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 3 months ago #196995

Jürgen, can you show me website (German) or any other where there is used ALT for background image?

I am asking becuase in HTML & CSS - background do not have ALT, they never had.


Is what Google says in that topic:

No, you cannot directly add alt text to a CSS background image.

Why?

  • alt text is an HTML attribute: The alt attribute is specifically designed for <img> tags (and <area> tags within an <map>) in HTML. Its purpose is to provide a text alternative for images that are part of the content of the page.

  • CSS background images are decorative: Images applied via CSS background-image are generally considered decorative or presentational. They are not part of the semantic content structure of the document. Screen readers and other assistive technologies typically ignore them because they aren't meant to convey crucial information.

The only real solution would be to use "Visually hidden text" method:

I mean visually hidden text that screen readers will pick up but regular users won't see unless they interact with it. HTML code (basic example how it may look like)

 <div style="background-image: url('/background-image.jpg');"> 
 <span class="visually-hidden">Description of the important background image content.</span> 
  </div> 

About your sentence "According to the German Accessibility Enhancement Act (BFSG), background images that convey information must be provided with descriptive alt text" - is not entirely accurate, if I may call it that.

WCAG and Informative Images: WCAG principle 1.1 "Perceivable" states that "Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language." There is no word about ALT. If I am wrong, please share orginal text. Yes, I live in EU, so I have probably a very similar law as you have.

Yes, I agree that improvement in that area should be done. So we are both the same side.

0
J
Jürgen J. Fischer
Accepted Answer
3 months ago #197000

Hi Paul Thanks for your research. The new law uses WCAG 2.1 as a reference. The following also applies here:

Provide text alternatives for all non-text content so that it can be converted into other forms required by the user, e.g., large print, Braille, speech output, icons, or simpler language.

Images are non-text content!

There are now many tools available for testing websites for compliance, but not all of them are good. But they all refer to the alt text for images.

There's another issue: links and buttons must have a description (Aria label). This works very well with SPP buttons! Unfortunately, this isn't possible with links in the text (editor).

https://www.w3.org/TR/WCAG21/#text-alternatives https://www.bmas.de/DE/Service/Gesetze-und-Gesetzesvorhaben/barrierefreiheitsstaerkungsgesetz.html

I'd like to take this opportunity to express my sincere appreciation and gratitude. I've been working with SP Pagebuilder since the first version and have been live throughout the entire development process up to the current version. You're doing a great job. I don't know of a better tool for creating high-quality websites. Thank you very much.

0
Josef Rosner
Josef Rosner
Accepted Answer
3 months ago #197114

I can only agree. I've been working with these tools for a long time and am currently setting up an online shop. Keep up the good work, and thank you.

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 3 months ago #197115

About good news:

  1. We will add "hidden" text for BG in SPPB update, but in v5.7.1, not 5.7.0 that will be today.
  2. This week should be Helix Ultimate update that improved also Accessibility (keyboard navigation for MegaMenu and other small changes aria-label etc. in menu) more info soon.
0