Flipcards (Accessibility)

Flipcards work great with keyboard controls but they stop working correctly when keyboard controls are being used in combination with the JAWS screenreader. JAWS’ focus starts jumping around - in some cases it jumps out of the flipcard component to other buttons on the page when using tab to navigate. It behaves better when ‘b’ is used to switch between flipcards but that doesn’t work consistently either.

The issue is mentioned elsewhere (see links below). One suggested resolution is to give the flipcards the role of ‘application’ rather than button, although that comes with caveats and considerations I don’t fully understand the implications of.

Anyway, thought I’d just bring it to your attention in the hope your developers might be able to figure this one out.

https://adrianroselli.com/2022/04/brief-note-on-buttons-enter-and-space.html

Hi @Ruppers , I will investigate and see if I can replicate the issue.
Cheers-Sam

1 Like

@Ruppers one thing to mention is that if you press Tab when using a screen reader it will always take you to the next interactive element (link, button, form field etc).

If you want to move to the next readable item there’s a whole series of other keyboard shortcuts that you need to use in order to control what Jaws calls the ‘virtual PC cursor’.

There’s a good video explainer of Jaws’ ‘virtual PC cursor’ functionality here (skip to 1 min for the actual demo)