Turnstile accessibility bug

Website, Application, Performance Turnstile
1

Hi there,

We use the Turnstile widget, but it contains some accessibility issues. When the widget is set to invisible I can still use my keyboard to tab inside the widget. One of our websites was audited for accessibility (WCAG 2.1AA audit) and failed on this one area.

Someone who can’t use a mouse uses the keyboard to navigate. They use the tab key to jump from one interactive element to the next. Because the widget is still visible in the DOM, it can still be accessed. However, because nothing is visible the keyboard focus is not shown. Users have to tab through 4 links to leave the widget, but without any visual aspects, this is very confusing.

The fix is incredibly easy: As long as the widget is invisible, set it to display:none; in the CSS, so that it is excluded from the DOM. Please fix this, so that we can continue to use Turnstile. When this is fixed inside the widget, others won’t have this problem as well.

3 Likes
4

This is great feedback, thank you!! cc @mdemoura @maxime.g @Benedikt-CF

5 Likes
5

Thanks for the feedback, @caitlin2! We’re releasing some changes to improve accessibility which will address this.

Since you mentioned it, and for anyone curious, we don’t use display:none in the iframe when it’s not visible due to timer throttling done by Chromium. We’re instead using ARIA for this, which doesn’t incur the performance penalty.

2 Likes
6

Thank you @mdemoura, unfortunately ARIA does not entirely fix this problem, as using aria-hidden will only hide these links for people who use assistive technologies, like a screen reader.

Someone who uses a keyboard to navigate will still enter the frame, as it is rendered in the DOM, and will encounter 4 invisible links.

I am curious to see what the changes are!