Accessibility Issue: Interactive element () inside a elemen

  • Resolved cometto

    (@cometto)


    7 months ago

    Hello

    I’m running the latest version and have noticed an accessibility issue in the cookie banner, specifically in the “Manage Preferences” modal.

    When I inspect this modal, I see that you are using the <details> and <summary> HTML elements for the consent categories (like Statistics, Marketing). This is great for structure, but there is an accessibility problem.

    The Issue:

    Inside the clickable <summary> tag, you are also placing the interactive <input type="checkbox"> for that category.

    This creates a nested interactive element, which flags an accessibility error in Chrome DevTools:

    Interactive element inside of a <summary> element

    This is a problem for users who rely on keyboard navigation or screen readers. When they focus on the <summary> element, it’s unclear whether pressing Enter or Space will toggle the accordion (<details>) or toggle the checkbox (<input>).

    Suggestion:

    For better accessibility, would it be possible to move the <input type="checkbox"> element outside of the parent <summary> tag? For example, it could be placed just after the <summary> but still inside the <details> element.

    This isn’t a critical bug that breaks functionality for mouse users, but fixing it would be a great improvement for accessibility compliance.

    Thanks for your consideration!

Viewing 1 replies (of 1 total)
  • Plugin Support Antonio Candela

    (@antoiub)

    7 months ago

    Hello @cometto ,

    Thank you for reaching out.

    The structure of the consent banner follows a fixed framework, and adjustments to this specific aspect are currently planned. That said, Complianz does offer the option to build a fully custom banner from scratch, which allows you to meet any specific accessibility or technical requirements you might have: https://complianz.io/create-your-own-banner-from-scratch.

    This way, you can adjust the markup to your needs while still benefiting from the compliance features of the plugin.

    Here you can follow the GH Thread about this here: https://github.com/complianz/complianz-gdpr/issues/436.

    I hope this helps, wishing you a nice day!

Viewing 1 replies (of 1 total)

The topic ‘Accessibility Issue: Interactive element () inside a elemen’ is closed to new replies.