Home › Forums › WoodMart support forum › Elements with visible text labels do not have matching accessible names.
Elements with visible text labels do not have matching accessible names.
- This topic has 8 replies, 4 voices, and was last updated 1 year ago by Artem Temos.
-
AuthorPosts
-
October 2, 2023 at 6:39 pm #500943
Mr MobilityParticipantGoogle 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.October 3, 2023 at 4:54 pm #501228
Artem TemosKeymasterHello,
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
November 4, 2023 at 1:54 pm #509868
Mr MobilityParticipantI’m not sure how to check this
November 6, 2023 at 10:48 am #510112
Artem TemosKeymasterYou 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
November 29, 2023 at 7:13 pm #516957
spnutrateaParticipantHi 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,
SPNovember 30, 2023 at 10:17 am #517080
Artem TemosKeymasterHello,
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
November 30, 2023 at 1:27 pm #517198
spnutrateaParticipantThank 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
SPNovember 30, 2023 at 1:33 pm #517201
spnutrateaParticipantDo 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;
}November 30, 2023 at 1:55 pm #517216
Artem TemosKeymasterHello,
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
-
AuthorPosts
- You must be logged in to create new topics. Login / Register