Broken ARIA reference

[special]

Hi,in product pages when you have additional images displayed left smaller.When you try to make it bigger the all the pictures doesnt go bigger.In main page and category page all ARIA declaration are working fine.Can this be fixed?Its vital for WCAG 2 AA certification.Please check herefor more info

https://wave.webaim.org/report#/https://rewearit.gr/product/%cf%86%ce%bf%cf%8d%cf%84%ce%b5%cf%81-adidas-3/

Also i have placed in css to disable totally the realted products but even if the are not show they still exist in code.Is there any way to disable full the related products shown on bottom of product page?
I tried with this code but no luck

.product-extra {
display:none;
}

[Harry]

Hello,

1. Please adđ below code to claue-child > functions.php

add_filter( 'woocommerce_get_image_size_gallery_thumbnail', 'override_woocommerce_image_size_gallery_thumbnail' );
function override_woocommerce_image_size_gallery_thumbnail( $size ) {
    // Gallery thumbnails: proportional, max width 200px
    return array(
	'width'  => '170',
        'height' => 170,
        'crop'   => 0,
    );
}

And change 170 with your number for gallery image’s size

2. I tried the code and see it work, please check all your custom css code.

.product-extra {
display: none;
}

Or you can add below code to claue-child > functions.php

remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[special]

Problem with related products gone.Now only one the first with the wrong ARIA reference still exist.For example in the main picture on product a laber is declared

aria-describedby=”slick-slide00″ but there is nowhere in the code a “slick-slide00″ id label or input or form.
Thats why is keeps the Broken ARIA reference.

for example the error occurs on product page where it has an aria-describedby=”slick-slide00″ but no reference

div data-thumb=”https://rewearit.gr/wp-content/uploads/2022/03/DSCN1991-113×150.jpg” class=”p-item woocommerce-product-gallery__image slick-slide slick-current slick-active” data-slick-index=”0″ aria-hidden=”false” tabindex=”-1″ role=”option” aria-describedby=”slick-slide00″ style=”width: 407px; position: relative; left: 0px; top: 0px; z-index: 999; opacity: 1;”>

i hope i could you more about solving this problem.i dont know which part of woocommerce or wordpress generates the pictures and generates aria-labelledby but not creating the id labels also.

 

[special]

special wrote:

Problem with related products gone.Now only one the first with the wrong ARIA reference still exist.For example in the main picture on product a laber is declared aria-describedby=”slick-slide00″ but there is nowhere in the code a “slick-slide00″ id label or input or form. Thats why is keeps the Broken ARIA reference. for example the error occurs on product page where it has an aria-describedby=”slick-slide00″ but no reference div data-thumb=”https://rewearit.gr/wp-content/uploads/2022/03/DSCN1991-113×150.jpg” class=”p-item woocommerce-product-gallery__image slick-slide slick-current slick-active” data-slick-index=”0″ aria-hidden=”false” tabindex=”-1″ role=”option” aria-describedby=”slick-slide00″ style=”width: 407px; position: relative; left: 0px; top: 0px; z-index: 999; opacity: 1;”> i hope i could you more about solving this problem.i dont know which part of woocommerce or wordpress generates the pictures and generates aria-labelledby but not creating the id labels also.

only on product page the problem exists

[special]

Hi is there any will to fix this or we should change the theme?As time passes and there no reply for a fix from you.Could you at least answear me if you can fix this or should i look somewhere else for a theme compatible with wcag 2 AA

[Harry]

Hi,

I’m sorry for late reply. I answered your question but the error with my internet and it not submit my answer so I lost my reply.

The image of product generate in claue > core > libraries > vendors > woocommerce > templates > single-product > product-image.php

But i not found where generate “aria-describedby”

You can override code by copy file product-image.php to claue-child > woocommerce > single-product.

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[special]

Thanks Harry.Problem solved.I didnt copy it i just put a dot . infront of the name of the file and it loads from the woocommerce path instead of theme.

Now all wave check are ok

[Harry]

You’re welcome.

You can copy file from original WooCommerce to child theme to override theme and do not have to change file name in parent theme when update.

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Author]

Posts