Support » Plugin: GDPR Cookie Compliance (CCPA ready) » Tab key navigation not working

  • Resolved Jussi Linkola

    (@callion)


    It seems that there is a problem with accessibility: I cannot access the cookie infobar and accept button with tab key. To my understanding this should be the first active element on page when navigating with keyboard.

    The example page is in Finnish.

    The page I need help with: [log in to see the link]

Viewing 13 replies - 1 through 13 (of 13 total)
  • rhubub

    (@rhubub)

    I’m having this problem too and need to ensure our sites meet legally required standards for accessibility. At the moment they don’t because of this otherwise excellent plugin. Can anyone advise please? Or will a future update make keyboard navigation possible? Thanks.

    Plugin Author Moove Agency

    (@mooveagency)

    Hi there,

    Thanks for using our plugins.

    The layout is keyboard accessible, using the “Tab” key on your keyboard, you can change the tabs (privacy overview, strictly necessary, etc), using your spacebar you can disable / enable the cookie on the focused tab. And with “Enter” your preferences will be saved.

    If this feature is missing from your site, please ensure you’re using the latest version of the plugin.

    Hope this helps.

    Hi, thanks for your reply. The problem is the stage before this. It’s not possible to tab into the GDPR cookie bar on every page on the site to select “settings” or “accept”. If I click “settings” with a mouse, then you’re right, I can tab through the links. There’s just no apparent way to select and click settings get that far with only the keyboard.

    If I try, I just tab through the links on the page, it gets to the bottom and instead of tabbing into the cookie bar, it goes back to the top of the page.

    Can you advise about this part of the process please?

    many thanks!

    Hello,

    I am experiencing this issue is well.

    The settings screen is tab accessible which is awesome… but you can’t get to the banner itself using tab.

    So, if I remove all site cookies and refresh my homepage, the banner shows up on the bottom of my screen.

    I can’t tab to a [settings]settings[/settings] link at all and it seems that I can tab to the Accept button but there is nothing that tells me I am on it and then hitting space or enter will accept. Someone using a screen reader can not reach any links in the banner other than the buttons.. so they can not reach a settings pop up… and, there is no visual change to know that one of the buttons are in focus.

    Basically, the banner itself is not compliant and a keyboard user can not reach a settings page from it.

    Does this make sense?

    Thanks!
    Josh

    • This reply was modified 3 months, 2 weeks ago by morcth.

    @mooveagency – following up here.

    Thanks!

    Plugin Author Moove Agency

    (@mooveagency)

    Hi @morcth,

    Thanks for your patience on this.

    We have improved the accessibility, please update your plugin to the latest version (4.4.6).

    Hope this helps.

    Hi,

    It looks like the accept button is now selectable via keyboard only, as the first link on the page, but users still can’t tab to the settings link to then make any changes. In order to meet our legally required accessibility standards, it needs to be fully navigable / accessible via keyboard only. Is it possible to tab to the settings link too?

    Thanks for your help.

    Plugin Author Moove Agency

    (@mooveagency)

    Hi @rhubub,

    Thanks for your comments.

    The cookie banner is keyboard accessible, you can see here: https://www.mooveagency.com/

    You can use the “tab” key to navigate in tabs, and the “space bar” to change the checkbox value. “enter” save the settings.

    Hope this makes sense.

    Hi @mooveagency

    I just tried on your website and also could not do what we are asking. Yes, the settings popup is tab accessible and before the settings popup shows, we can tab to the accept button… but we can not tab to the settings link in the banner.. so we can never get the settings popup to show with just keyboard.

    Does this make sense?

    “This website uses cookies to provide you with the best browsing experience. Find out more or adjust your settings.”

    I can’t get to the “settings” link… it doesn’t seem to be tab accessible. This basically causes the banner to not be ADA compliant.

    Thanks!

    Plugin Author Moove Agency

    (@mooveagency)

    Hi @morcth

    The Cookie banner is keyboard accessible too. The “settings” link is not an anchor, it’s a “<span>” with the link style.

    You didn’t provide any link to your site, so we can’t test it on your website (if there is an old plugin version, JS errors, etc).

    If you have issues, we would suggest enabling the settings button, and then it will be easy to use using tab functionality.

    Hope this helps.
    Thanks

    Correct on the settings link not being an anchor and span links are not keyboard accessible without a tab-index value I believe.

    I have not updated the plugin on my site but will try to do so today. I did see that the settings link was not accessible on your site though.

    Thanks!

    I do see that enabling the floating settings button creates a tab accessible way to reach the pop up.. as would creating a link on any page to enable the popup.

    You did hit the nail on the head in your last response though… “The “settings” link is not an anchor, it’s a “<span>” with the link style.”

    Is it possible to make the banner “settings” link an anchor instead of span so that it can be reached with tab? Is there a reason that it has to be a span tag?

    Thanks so much.

    Josh

    Plugin Author Moove Agency

    (@mooveagency)

    Hi @morcth,

    You can enable the settings button in the plugin settings and remove the span setting item. The span has no href attribute, and it triggers only the settings screen that’s why its a “span” and not an “a”.

    You can replace the [settings]settings[/settings] to settings (normal string, not clickable) and enable the individual settings button in GDPR Cookie Compliance -> Banner Settings -> Settings button (toggle).

    Hope this makes sense.

Viewing 13 replies - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.