Forum Discussion
Flip card interaction, accessibility question
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
Hi Karen!
Rise 360 doesn't have full screen reader support just yet, but we're working on it! If you use a screen reader on a Rise 360 course now, you may find that it doesn't perform well.
We'll let you know when screen reader support is ready!
Thanks Alyssa!
I look forward to the day.
Hello Allyssa. Is there any update on this topic now?
Thanks!
Hi Frank! We've updated our roadmap to include Rise 360 features including Flashcards that we’re continuing to develop to better support WCAG. You can follow along with any updates to the Roadmap on that link.
It is a bit shocking that the premier elearning authoring tool still doesn't have screen reader support for so many activities.
Has any progress been made with making this Flip Card activity accessible for screen reader users?
Hi, Nikki! I tested a flashcard interaction with JAWS screen reader on Chrome browser, and the flashcards text is being narrated by the screen reader.
Can you share the screen reader and browser versions you are using?
That is disappointing. I was very excited for a minute there.
Following
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.
Screen reader is reading out content on the Flash cards both on the front and as the card gets flipped. I have tested the Flash cards on Mac using Voice overs as well as on PC using Jaws screen reader.
I appreciate the discussion on this topic and keeping this issue on the radar. Unfortunately, I cannot get NVDA to read the back side of a flip card, even with Shani's work-around (chrome browser). I will look forward to the formal fix.
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.
- 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.
