Oct 8
Accessibility issue in the single product navigation
Hello,
There is an accessibility issue in the single product navigation template (navigation.php) used by WoodMart.
PageSpeed Insights / axe reports:
“Links do not have a discernible name”
The failing element is:
<a href="https://site.com/shop/" class="wd-product-nav-btn wd-btn-back wd-tooltip">
The problematic link is the “Back to products” button inside:
<div class="wd-products-nav">
The link contains visible text inside a <span>, but on desktop the text is visually hidden by the WoodMart styling, and the accessibility checker does not detect a discernible accessible name for the link.
The current template is:
<a href="<?php echo esc_url( apply_filters( 'woodmart_single_product_back_btn_url', get_permalink( wc_get_page_id( 'shop' ) ) ) ); ?>" class="wd-product-nav-btn wd-btn-back wd-tooltip">
<span>
<?php esc_html_e( 'Back to products', 'woodmart' ); ?>
</span>
</a>
I temporarily fixed it by adding an explicit accessible name:
<a href="<?php echo esc_url( apply_filters( 'woodmart_single_product_back_btn_url', get_permalink( wc_get_page_id( 'shop' ) ) ) ); ?>" class="wd-product-nav-btn wd-btn-back wd-tooltip" aria-label="<?php esc_attr_e( 'Back to products', 'woodmart' ); ?>">
Could you please include this accessibility fix in the official WoodMart template/update?
Ideally, the link should always have a valid accessible name on both desktop and mobile, without changing its current visual appearance or functionality.
Thank you.
Pending
Hello, Thank you for the detailed report. We will add the aria-label to the "Back to products" link in the next theme update. Kind regards