Cookie Banner Screen reader issue

Hi @dasha999999,

I hope I understood the question correctly, do you wish to “re-focus/select” an element (such as the Accept button) in the Complianz Cookie Banner after it is re-opened by using the Manage Consent button?

Kind regards, Jarno

Hi @jarnovos, yes that’s what I meant. After I open the Complianz Banner by using the Manage Consent button in the screen reader I can’t get access to its contents with the screen reader (banner text, and access, deny, view preferences buttons)

Hi @dasha999999,

You could force the focus back to the Accept button in the Complianz banner, when it is reopened with the Manage Consent button, by applying a JavaScript snippet. The below script will do that:

<script>
         document.addEventListener('click', e => {
            if ( e.target.closest(".cmplz-manage-consent") ) {
                setTimeout(function() {
			document.querySelector('.cmplz-btn.cmplz-accept').focus();
		}, 500);
            }
        });
</script>

You could add this to your page manually, or with a plugin such as Header Footer Code Manager. Set the “Snippet type” to JavaScript when using the latter.

Kind regards, Jarno

@dasha999999 which screenreader?

regards Aert

@jarnovos, thank you very much for the function. Unfortunately, it did not make a difference in the screen reader simulator

@aahulsebos, The issue is appearing in the screen reader simulator Silktide

Hi @dasha999999,

OK, it’s different from what I initially suspected. It appears that Silktide adds a CSS filter to simulate these effects, but it adds this filter to a <div> with the ID cmplz-cookiebanner-container, which makes the banner disappear.

If this filter would be added to the <div> with class cmplz-cookiebanner, instead of the aforementioned cmplz-cookiebanner-container, that would make appear with the Silktide effects applied.

I haven’t been able to find a setting to adjust this in the Silktide tool, though. I would reach out to Silktide to check whether you might be able adjust the classes (such as by manually excluding or including a class) where their filters are being applied.

Hope it helps!

Kind regards, Jarno