Accessibility issue

Hi Milos, @milostadic

We have a client who has had their website scanned for accessibility issues and the attached error has been flagged with us. We can apply temporary fix but could you please let me know is this something you can sort on your side?

Thank you for bringing this to our attention. From your screenshot, I see the two issues are:

1. Elements must meet minimum color contrast ratio thresholds, and
2. Interactive controls must not be nested

Correct? For number 1, this display issue depends mainly on the theme you’re using and can be fixed through theme options or with CSS. For number 2, though, I’d like to check with our developers to learn more, but before doing that, I’d like to bring them more info:

• Can you tell us which tool you used to scan the site for accessibility issues?
• Can this be applied even to a fresh install of WooCommerce / WordPress with a default theme?

Thanks!
-OP

Hello @omarfpg ,

Appreciate the quick response. I was referring to the second point: Interactive controls must not be nested

I have also shared the code where you can see the bug. On my screen shoot I used the axe extension tool (for Edge).

Many thanks,
Milos

This happens on multiple websites.

We are not overriding the tabs PHP template.

The issue exists here: https://github.com/woocommerce/woocommerce/blob/41cf2b285e8ee690b1ea804b6a774345d7144225/plugins/woocommerce/templates/single-product/tabs/tabs.php#L36

Hi Milos, @milostadic (hi @krypsin too!)

Thank you for the additional details, and for bringing this to our attention. I’ve just tested on a clean install of WordPress, WooCommerce and Storefront using the same tool as you did and I can confirm the issue:

With this in mind, I’ve reported this to our developers to look into it. You can follow the report here: https://github.com/woocommerce/woocommerce/issues/51333.

Thanks!
-OP