Fix Accessibility Issues

Hello, I encountered some errors on Google PageSpeed.

1. Background and foreground colours do not have a sufficient contrast ratio. (https://prnt.sc/60_4vhnJB3br)
2. Touch targets do not have sufficient size or spacing. (https://prnt.sc/qPEPjAnnPMRL)

Could you help me to fix those issues?

Hello,

Please provide us with your admin access so we can log in and check this on your end.

Thank you in advance.

Check the private content section:

Hi,

To fix this issue, try to add the following code snippet to the Global Custom CSS area in Theme Settings.

.mobile-nav .wd-nav[class*="wd-style-"]>li>a {
	--nav-color: #333
}

@media (max-width: 768px) {
.category-grid-item .category-link {
	display: none;
}
}

Kind Regards

Thanks. The Background and foreground colours do not have a sufficient contrast ratio (https://prnt.sc/60_4vhnJB3br) issue has been fixed.

However, we still need to address the issue of touch targets not having sufficient size or spacing (https://prnt.sc/qPEPjAnnPMRL).

Hi,

Try to replace the previous custom code with the following one:

.mobile-nav .wd-nav[class*="wd-style-"]>li>a {
	--nav-color: #333
}

.cat-design-center .wrapp-category:before,
.cat-design-center .hover-mask{
	pointer-events: none;
}

.category-grid-item .category-link {
	display: none;
}

We tested it on your site and confirmed that the previous issue no longer occurs on both mobile and desktop. https://monosnap.com/file/1wflnjr98pgl8J1t8MREEXk3jOTtjZ – desktop
https://monosnap.com/file/oAnweAOW11iFauGYBWWh2KDJyOmy6t – mobile

Kind Regards

Thanks a lot, it’s working perfectly.

Now I need to fix some more issues for the Desktop:

1. Avoid an excessive DOM size
2. Defer off-screen images (Theme Lazy load is ON)
3. Does not use passive listeners to improve scrolling performance

Hello,

1. Avoid an excessive DOM size – The number of DOM elements are generated in the process of content building. All page builder elements are DOM elements. If you want to reduce DOM elements you will have to reduce the content: widgets, products, menu items, and others.

You can create an HTML BLock for the mobile content where there will be fewer elements and assign it in the settings of the Home page – https://prnt.sc/tSV6cqnUg6lL (works only if you have a separate cache for mobile devices)

2. Defer off-screen images https://prnt.sc/gK_tfAlz95t0 – this issue is related to our Image element and will be fixed in the next update.

3. jQuery library comes with WordPress core and not with our theme. We can’t change or influence it in any way. But this warning is harmless and you don’t need to worry about that. It will not affect your website performance.

Kind Regards

Everything is fine, but I can’t find the mobile version option in my theme. Where is it?

Hello,

It is situated in the settings of the Home page at the bottom. Also, this option works if your cache plugin supports a separate cache for mobile devices.

Kind Regards

[Author]

Posts