Flip card interaction, accessibility question

Aug 12, 2019

Hello,

We would like to use the flip card interaction in a Rise course, but I have a question about accessibility.

If I am using keyboard navigation, and a screen reader, I can navigate to the card and flip it just fine. The problem is that the screen reader doesn't read the text on a card unless I mouse over it. For someone who cannot see the screen, or use a mouse, the information would be lost.

Do you have any suggestions? 

Thank you.

21 Replies
Shani Wende

Hi all, we may have found a workaround for this issue during accessibility testing of our modules. 

NVDA reads the front of the card, then press Ctrl+tab to go back up, tab back to flip the card, and the screenreader will recognise the text. Multiple team members tested this on different browsers and it worked. It's fiddly and unintuitive for sure.

Ryan Simons

I ran a test multiple times using multiple tools and found that it is not fully compliant. Here's why: 

  • Inconsistent tab order between elements. Starts at div[aria-live="off"] and goes to .visually-hidden. When you tab through cards it does not recognize there is a flip side to the element.
    • Yes, it will work if you can see it and recognize it is a flip interaction. However, if you were blind there is no way to tell as it starts "off" and goes to hidden. 
    • If you had multiple objects, a screen reader just skips to the next one without reading the back as it is hidden. 
  • Also, you will have to manually adjust the text size to override the auto-sizing text in the card. 

Solution: Not sure without modifying the code to change the div. Tab order failed instance on FlipCards in Articulate Rise Course.

Leslie McKerchie

Hi Emmy,

We've made enhancements to the flashcard grid and stack blocks in the past year.

I created a sample course and tested it using NVDA in Chrome. The alt text is being read as expected. I've attached the text viewer from NVDA.

Could you look at my sample course and share what you are experiencing?

If you're still experiencing an issue with the alt text, I'd like to know:

  • How are you navigating the course? Are you using the arrow keys so that all of the content is read?
  • What screen reader and browser are you using?
James Kruck

Hi Leslie - I'm not Emmy, but we're seeing similar issues.

In timelines, and in some other instances, NVDA is not picking up on the alt text in the typical way. You can tab past an image and return, and the alt text will appear. Or you can, with the course open, close and relaunch NVDA, and the alt text will appear. Neither of these options meet accessibility requirements however.

Leslie McKerchie

No worries, James. I appreciate you chiming in to share.

I cannot replicate the issue you're reporting with a fresh launch of NVDA and the course, which is when it sounds like you're experiencing the problem.

Can you confirm which versions of NVDA and Chrome you are using? My setup includes the current versions of each:

  • NVDA Version: 2023.3 (2023.3.0.29780)
  • Chrome Version 119.0.6045.160

I used this link to test for Emmy, including the alt text in the TimelineImages.png attached above. Are you also experiencing an issue with this course when navigating using Browse Mode?