Accessibility issue in the generated Cookie policy

Hi @is0ph,

Which scan is this, so I can see if I have a quick fix;

For: – Critical: There are 4 issues with elements in the page that have the same id (#cmplz-functional-optin, #cmplz-preferences-optin, #cmplz-statistics-optin and #cmplz-marketing-optin)

Does this mean for each ID shown e.g. #cmplz-functional-optin there are 4 issues, or there are 4 issues for these 4 ID’s #cmplz-functional-optin, #cmplz-preferences-optin, #cmplz-statistics-optin and #cmplz-marketing-optin

regards Aert

Hi @aahulsebos,

Thanks for your quick reply!

I use AxeDevTools to perform automated accessibility tests.

The 4 issues are: 1 issue with each of the 4 ids.

For example 1 issue means there are 2 elements with the #cmplz-functional-optin id. One seems to be located offscreen, the other inside the Manage your consent settings section.

Hi @is0ph,

Let’s visit them one by one;

The missing labels:

They are present:

<span class="cmplz-banner-checkbox">
<input type="checkbox"									   id="cmplz-preferences-optin"								   data-category="cmplz_preferences"									   class="cmplz-consent-checkbox cmplz-preferences"									   size="40"									   value="1"/>
<label class="cmplz-label" for="cmplz-preferences-optin" tabindex="0"><span>Preferences</span></label>

I believe added in a pull request on Github and verified by another accessibility check. I will need to find out where the problem lies.

Nested checkbox in summary:

This is true, but suggests it’s not visible which is not true. I will see if this is an issue and can be ignored as the scan doesn’t know how it’s implemented.

Double ID’s

If I look at the page source and search for ‘cmplz-functional-optin’ I only find the checkbox ID. There are no duplicates, other than the banner and cookie policy share the same HTML for the manage consent area. Do you get this message on another oage as well?

regards Aert

Hi @aahulsebos,

I don’t get any of these 3 types of warnings on other pages in my site.

The missing labels:

They are present but inside the label is a <span> with display:none. This makes them empty as far as accessibility goes. A <span class="screen-reader-text"> would solve this.

Nested checkbox in summary:

The problem is not that the controls are not visible but one interactive control (the checkbox) is nested inside another (the summary), which means it is not announced by screen readers.

Interactive controls must not have focusable descendants : Focusable elements with an interactive control ancestor (any element that accepts user input such as button or anchor elements) are not announced by screen readers and create an empty tab stop. That is, you could tab to the element but the screen reader will not announce its name, role, or state.

Double ID’s:

If I inspect for example #cmplz-functional-optin
One is situated inside the <div id="cmplz-cookiebanner-container"> and the other inside <div id="cmplz-manage-consent-container">.
I’ve saved the page HTML source and there are indeed two elements with the same id. One on line 148 and the other on line 1065.
As the labels have a for property pointing to these IDs it’s not clear what the labels are labelling.

Best regards,
is0ph

Hi @is0p,

For Double ID’s:

I see, there’s a dynamic approach here. It starts as id=”cmplz-functional-{consent_type}”, based on settings it will set to optin or optout.

In this case, the banner categories are also inserted in the cookie policy itself, duplicating the id’s. Excluding the banner on the page would help, I’ll have a look.

These are all related to the cookie banner, so I’m testing a couple of things here, you’re welcome to do the same. https://github.com/Really-Simple-Plugins/complianz-integrations/tree/master/Cookie%20Banner%20HTML

regards Aert

Hi @is0ph,

As a quick update regarding this, these WCAG improvements are being worked on as we speak. Upon completion they will be included in our testing routines, and shipped in an upcoming release of the plugin when confirmed to work correctly.

Kind regards,
Jarno

Hi @aahulsebos and @jarnovos,

Thank you very much for your feedback and update!

Best regards,
is0ph

Hi @is0ph,

Could you try installing the plugin branch/version attached on the GitHub link below, to verify if that resolves the issue(s) that you described? Click the green “Code” button to download the plugin as a .zip file.

https://github.com/Really-Simple-Plugins/complianz-gdpr/tree/wcag-no-banner-html-on-cookie-policy

This includes the below changes:

– No banner HTML on Cookie Policy page (prevent double ID’s)
– Adjustments to show_banner script
– Hidden labels on Consent per Service checkboxes

We’re curious to hear about your findings, let us know.

Kind regards,
Jarno

Hi @jarnovos

I’ve tried the plugin and it solves the double ID issue.

I still get the 2 other issues (no labels and nested interactive content).

Best regards,
is0ph

Hi @is0ph,

We’re working on these accessibility improvements, as we received another pull request containing accessibility fixes, we intend to include all of these together in an upcoming Complianz release.

Kind regards,
Jarno

No issues on Wave here; https://poxenomorph-kobo.instawp.xyz/cookie-policy-eu/