Accessibility errors

Resolved

(@carnets2routards)

Hi,

I’m trying to have an accessible website and in order to I’m using the Wave browser plug-in to check errors and alerts.

It detects errors on form labels (multiple and empty one):

<div class="cmplz-categories-wrap" style="display: none;">
  <label>
    <input type="checkbox" id="cmplz_functional" class="cmplz-consent-checkbox cmplz-svg-checkbox cmplz-square-checkbox cmplz_functional" checked="" disabled="" data-category="cmplz_functional">
    <label for="cmplz_functional" class="cc-check">
      <svg width="16px" height="16px" viewBox="0 0 18 18"><path d="M1,9 L1,3.5 C1,2 2,1 3.5,1 L14.5,1 C16,1 17,2 17,3.5 L17,14.5 C17,16 16,17 14.5,17 L3.5,17 C2,17 1,16 1,14.5 L1,9 Z"><polyline points="1 9 7 14 15 4"></svg>
    </label>
    <span class="cc-category">
      Fonctional
    </span>
  </label>
</div>

Same for other checkbox (marketing, etc.), it might not be voluntary on your part but I just wanted to bring your attention to this. 😉

Thanks for the time you’ll take to maybe look into it.

This topic was modified 5 years, 11 months ago by carnets2routards.

Viewing 7 replies - 1 through 7 (of 7 total)

Plugin Contributor Leon Wimmenhoeve
(@leonwimmenhoeve)

5 years, 11 months ago

@carnets2routards Thank you for pointing this out. We have WCAG 2.1 compatibility on our backlog, I am sure that we’ll have a look at these checkboxes as well!

Is there anything specific that we could do to help you out right now?

Regards,
Leon

Plugin Author Aert
(@aahulsebos)

5 years, 11 months ago

Hi @carnets2routards,

We’re working on a WCAG 2.1 update for this summer. Including the banner, policies, and wizard. We’ll take this into account. Thanks a lot!

regards Aert

Thread Starter carnets2routards
(@carnets2routards)

5 years, 11 months ago

Hi @leonwimmenhoeve and @aahulsebos !

Thanks for your reactivity! I’m fine with your plugin, had help already to set it right and everything is working perfectly.

Glad to know you’ll do something about accessibility. Waiting for it!

Best wishes

farisr
(@farisr)

5 years, 8 months ago

Please may I add my vote needing WCAG 2.1AA compatibility?

Unfortunately we deal with sites that absolutely require it, and this is now causing a serious problem 🙁

I don’t suppose there’s an ETA so that I can keep my clients informed?

Plugin Contributor Mathieu Paapst
(@paapst)

5 years, 8 months ago

Hi @farisr ,

Maybe this will help: https://complianz.io/improved-accessibility-for-complianz-documents-banner/

TLDR: It was already implemented 3 weeks ago 🙂
farisr
(@farisr)

5 years, 8 months ago
Thanks Mathieu … but I already have 4.7.0

The issue does not appear to be CSS related (I HAVE modified the CSS). I don’t know enough about Themes to know for sure, but the errors being found do not appear to be Theme related.

The errors I’m seeing are related to this “Elements should not have tabindex greater than zero”

And the actual code is similar to the following:
<a aria-label="Preferences" href="#" class="cc-btn cc-save cc-show-settings" tabindex="6">Preferences</a>

But there are four errors in total, one each for the Preference, Accept All, Functional, and Cookie Policy links.

These issues are found with the Axe WCAG tool and fall under WCAG Best Practices, apparently: https://dequeuniversity.com/rules/axe/3.5/tabindex?application=AxeChrome

I have scanned using WAVE and it also find these same things.

Do I have to regenerate the cookie banner or something to trigger the code changes?

Or is the positive tabindex deliberate? After all, you want these buttons to be the “first” that are accessed, overriding anything else. Yet is is not Best Practice according to WCAG 🙁

I am not an expert in this field so please don’t take anything I’ve mentioned here as any form of complaint or criticism.
- This reply was modified 5 years, 8 months ago by farisr.
Plugin Contributor Rogier Lankhorst
(@rogierlankhorst)

5 years, 8 months ago

We’re currently testing with the tabindex 0. If you want you can test it yourself using this branch:
https://github.com/Really-Simple-Plugins/complianz-gdpr/tree/tabindex-to-0

If all tests are completed successfully, it will get merged in 4.7.2