Add to cart – Elements with visible text labels do not have matching accessible

Hi @aegis20,

I understand that you’re having an issue with the ‘Add to cart’ button where the visible text labels do not match the accessible names. This indeed can lead to a confusing experience for screen reader users.

This issue usually arises due to some theme or plugin conflicts. I recommend you to deactivate all your plugins (except WooCommerce) and switch to a default theme like Storefront or Twenty Twenty-One. If the issue gets resolved, you can reactivate your plugins one by one to identify which one is causing the issue.

If the problem persists, it might be due to some customizations in your WooCommerce template files. You may need to check your theme’s functions.php file or any custom templates for the ‘Add to cart’ button and ensure that the visible text labels match the accessible names.

I hope this provides some clarity on the matter. If you have any other questions or need further assistance, please don’t hesitate to ask.

I’ve just stumbled upon this as well, and it looks like it is not a theme/plugin issue, it happens in the storefront theme as well. See attached screenshot: https://prnt.sc/7NEIKGADggv4

Thank you for bringing this to our notice @zkingdesign. I went ahead with reporting it here (#41368). Feel free to subscribe on GitHub, for receiving all the updates on its progress. Cheers!

cc @aegis20

I added this code and now the error has disappeared
Please check it out and let me know if I can use it.
add_filter('woocommerce_loop_add_to_cart_link', 'custom_add_to_cart_button', 10, 2);
function custom_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;
}

Hi @aegis20

The code you’ve shared looks like adding a custom Add to cart link for simple products, and it seems to be correctly using WooCommerce’s hooks and functions.

However, if you’re not experiencing any issues or conflicts with other elements on your site, and the Add to cart functionality is working as expected, it should be fine to use this code.

Please continue to monitor your site for any unexpected behavior. If you encounter any issues or if you have any other questions, don’t hesitate to get back to us.

Hi there,

I think I have the same problem.
My site is in German and the add-to-cart button text therefore is “In den Warenkorb” but the aria-label is “Add to cart: “Product title””.
This happens on the “Related products” loop on the single product page and on the category pages.

I already contacted Generatepress support, but they could show me that the error must come from Woocommerce itself: https://github.com/woocommerce/woocommerce/blob/0cffd32875931b3ccd7f6c2c2bbf1ebb2df45f36/plugins/woocommerce/includes/class-wc-product-simple.php#L71-L77

Is there a quick fix for this problem? Will it be corrected with a future release?

Thanks for your help and info!

Kind regards,
Laurent

• This reply was modified 10 months, 3 weeks ago by biiissen.

Hello @aegis20,

This issue was already fixed in WooCommerce version 8.4.0. :?)

If you have any other questions about this, please?start your own topic, so that we can address your issue(s) separately.

Thank you!