Staff replied SP Page Builder

Accessibility of websites with addon Image Carousel

Asked by Klaus Liedtke 1 year ago Last activity 1 year ago

Hi,
i got some error messages by checking sites for accessibility:

In the addon "image carousel" is no field for the "image title".
In the title and subtitle section is no selection for an background color. Have a problem with the contrast of title an subtitle an the image.

Any idea what i can do?

Regards

12 replies

Toufiq Senior Staff

1 year ago

Hi there,

Thanks for contacting us. Sorry, right now this feature/functionality is not available. If you need then i can add custom css code for you.

-Thanks

Klaus Liedtke Asked this

1 year ago

Hi Toufiq,

That would be very helpfull.
Background color for title and subtitle.
Image title

thanks

Paul Frankowski Senior Staff

1 year ago · edited

For Background color for title and subtitle - use Custom CSS, example:

 .sppb-carousel-extended-heading {background: #eee }
 .sppb-carousel-extended-subheading {background: #eee;}

Remember that extra padding:5px; may be needed to improve visual appearance.

About Image - it has Alt field already that needed for Accessibility WCAG (!) Field Title is not so needed, only ALT, but we can consider that in the future updates.

Klaus Liedtke Asked this

1 year ago

Website: https://www.polymersynthese.com/home/faqs/sauerstoff-durchlaessigkeit

Toufiq Senior Staff

1 year ago

Add this css code inside the custom.css box or custom.css file.

.itemid-321 .sppb-carousel-extended-heading {
    background: #8122b1;
    padding: 10px 2px;
}

.itemid-321 .sppb-carousel-extended-subheading {
    background: #365aca;
    padding: 10px 5px;
}

.itemid-321 .sppb-carousel-extended-description {
    background: #2290b1;
    padding: 5px 0px;
}

Klaus Liedtke Asked this

1 year ago

Put it in the customm css box, but nothong changed.

Toufiq Senior Staff

1 year ago

https://prnt.sc/H1k4pExS7b79

New CSS code

.sppb-carousel-extended-heading {
    background: #8122b1;
    padding: 10px 2px;
}
.sppb-carousel-extended-subheading {
    background: #365aca;
    padding: 10px 5px;
}
.sppb-carousel-extended-description {
    background: #2290b1;
    padding: 5px 0px;
}

Paul Frankowski Senior Staff

1 year ago

Clear Joomla Cache, becuase you're using AimySpeedOptimization ;]
Add it in Page Settings > Page CSS > Custom CSS

and it will work.

Klaus Liedtke Asked this

1 year ago

Hi Paul,

Content background works only in backend.
Cache is cleared
But title background no changes.

Paul Frankowski Senior Staff

1 year ago

Class name is totally OK.

Where you put mentioned Custom CSS? Mine or shared by Toufiq ??

Klaus Liedtke Asked this

1 year ago

Here is a creenshot of my settings: https://ibb.co/1fCvXSLG
Does it matter that this is a page module?

Paul Frankowski Senior Staff

1 year ago · edited

Thanks. You made mistake in CSS field, please delete first line

<p aria-hidden.... > - this is NOT CSS (!) but HTML code (!) - not needed here!

yes, it could stop browser from reading CSS on the front-end.

Klaus Liedtke Asked this

1 year ago

Now it works perfect in backend, but not in frontend.
Cache is cleared.