Keyboard tab stops with visible focus

[claudiu-cristea]

Product

axe-core

Question

I have a requirement to check for that keyboard tab-stops have visible focus when active. I've used the wcag247 tag to test. However, a page violating this rule is not reported.

I've tested this page https://joinup.ec.europa.eu/collection/govtechconnect/news/register-govtech-connect-govtech4all-webinar which is supposed to report that the <button class="wt-btn" type="button" id="eTransButton" aria-controls="wtEtransModal">Translate</button> button, even is a tab-stop don't show a visible focus when is activated by keyboard.

Or I'm missing something?

[straker]

Thanks for the issue. Axe-core currently does not have any rules that test visible focus indicators. The axe extension on the otherhad does do this through the Intelligent Guided Tests workflow. Are you saying that IGT does not report an error for the button in question?

[claudiu-cristea]

@straker, thank you. We're running axe-core in a CI pipeline. I was looking in axe-core docs, but I can't find anything about IGT. Is there a plugin or extension doing this?

BTW, I found this old issue #810 which seems to be what I was searching but it has been closed w/o any action

[straker]

IGT is available with a pro account or trail from the axe DevTools Extension.

[WilcoFiers]

Determining visible focus isn't something axe-core would be able to do without false positives. To do it well, axe-core would need to focus elements in the page. Axe-core is built to do single-state testing. If it were to start focusing elements on the page, that focus event could trigger a stage change, which axe-core wouldn't be able to handle.

So yeah, axe Pro IGTs are the way to go for now.