Aline K.

Thank you for your quick answer, it’s good to know.

Happy holidays to you ??

Hi @aahulsebos ,

Yes the <label> is there in the HTML, but the <span> inside it has display:none in the CSS, which makes the label inaccessible (screen readers will ignore elements with display:none).

Here is a screenshot of the CSS in the browser dev tools:

This happens with the toggle and the regular checkbox. The .screen-reader-text class on the <span> already hides the text –?while still keeping it accessible for screen readers.

I hope my explanation is clearer. Thank you !

Hi @kimvdijk and @aahulsebos,

The 4 other issues in my initial message are not resolved (and the theme is not responsible for those ones, I checked twice ??). In particular, points 3 and 6 are detected by automated accessibility testing tools and create non-compliance with WCAG:

In the “Cookie settings” window, the checkboxes #cmplz-statistics-optin and #cmplz-marketing-optin have no accessible name. They do have an explicit <label>, but the <span> inside has display:none which hides it also for screen readers.

=> https://dequeuniversity.com/rules/axe/4.6/label

Interactive controls must not be nested, so <input type="checkbox"> should not be located inside <summary>. That create issues for screen reader users who might not be able to access the checkbox.

=> https://dequeuniversity.com/rules/axe/4.6/nested-interactive

About point 2:

Focus should be trapped inside the modal window, so that users don’t tab outside of it while it is still visible. That means that after the last interactive element of the window (the ‘settings’ button or the document links), the focus should go back to the close button

When the cookie banner behaves as a modal dialog, it would be nice if it followed the WAI pattern: “TAB: If focus is on the last tabbable element inside the dialog, moves focus to the first tabbable element inside the dialog.”

=> https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/

Thank you in advance ??

Hi @aahulsebos,

My bad, it seems that my theme is responsible for that one –?really sorry about that, I should have checked better. It looks fine with WP base themes. Same for point 5 about the :focus on the <summary> elements.

Hi @aahulsebos ,

Thank you for your quick answer ! Yes, that’s exactly what I’m talking about. A <button> element would have a default :focus outline defined by the browser, but this one is made with a <div> so we need to manually add the :focus / :focus-visible state styles.

Perfect, thank you so much for solving the problem !

Hi, thank you for your answer !

I downgraded to PHP 8.1 and yes the problem still occurs (even with PHP 8.0). I just tried the YITH Gift Cards plugin on a test website, with different settings and other plugins installed, and the exact same warnings are displayed when I appply a coupon (the coupon is still applied though).

I noticed that the warnings are also visible on the admin coupon page, before the name of each coupon:

Best regards.