Elements with visible text labels do not have matching accessible names.

Google Pagespped insights issue on mobile.

How to fix the issue attached via screenshot?

Visible text labels that do not match the accessible name can result in a confusing experience for screen reader users. Learn more about accessible names.
Failing Elements
ADD TO CART

Attachments:

You must be logged in to view attached files.

Hello,

Could you please check how it works with some default WordPress themes like TwentyTwenty or WooCommerce Storefront to understand is it our theme issue or not?

Regards

I’m not sure how to check this

You can switch to the default theme in Appearance -> Themes. Then you will need to perform the same test to see if it is caused by the theme or not.

Kind Regards

Hi Artem,

It is caused by WoodMart theme Add To Cart button. Area-Label & Area-Labelledby have accessibility issues. Storefront theme does not have such issues. ARIA roles enable assistive technologies to know the role of each element on the web page. If the role values are misspelled, not existing ARIA role values, or abstract roles, then the purpose of the element will not be communicated to users of assistive technologies.

Result of WoodMart theme:

aria-label=”Product Name” to your basket aria-labelledby attribute prints empty. Google shows the warning.

Product image zoom coding also shows an error: role=”presentation” I assume should be role=”image”. You may know better than all of us.

<img role=”presentation” alt=”altname” src=”/wp-content/uploads/2019/05/main.webp” class=”zoomImg”

Do you want me to open a ticket for such?

Regards,
SP

Hello,

The add to cart button is generated by WooCommerce plugin, not the theme. You can compare aria attributes in the WoodMart theme and Storefront and see that they are the same.
The product image zoom tag also comes with WooCommerce and our theme doesn’t influence it.

Kind Regards

Thank you for your response. If you please help me to find our the file name from where it is getting pulled. I would like to look into such.

I look forward to hearing from you.

Kind regards
SP

Do you think the following code will do the job without breaking anything?

add_filter(‘woocommerce_loop_add_to_cart_link’, ‘sp_add_to_cart_button’, 10, 2);
function sp_add_to_cart_button($link, $product) {
// Check if the product type is ‘simple’
if ($product->is_type(‘simple’)) {
// Retrieve the product name
$product_name = esc_html($product->get_name());
// Modify the link to add custom attributes
$link = sprintf(
‘%s’,
esc_url($product->add_to_cart_url()),
esc_attr(isset($quantity) ? $quantity : 1),
esc_attr(isset($class) ? $class : ‘button product_type_simple add_to_cart_button ajax_add_to_cart’),
$product_name,
esc_attr($product->get_id()),
esc_attr($product->get_sku()),
esc_html($product->add_to_cart_text())
);
}
return $link;
}

Hello,

Sorry, we can’t say exactly if this code will work. You need to add and test it on your website to see how it works.

Kind Regards

[Author]

Posts