JAWS Accessibility Testing Feedback On Rise

Hi Liz!

Thanks so much for your feedback regarding our flashcard's accessibility. I can see how it may not be obvious for users who are not familiar with the flashcards to use the down arrow key to interact and read through the card contents. Considering the nature of flashcards on the web in general is a custom widget, I thought I'd share how we designed our flashcards to be as accessible as we possibly can, and also how you can improve its accessibility as an author.

To help guide screen reader users in navigating the flashcard, we follow a natural reading order, preserving a meaningful sequence. In browse mode, the screen reader cursor would land:
1 - Flashcard's group to denote that it's entering the interaction
2 - the helper text "front of card" marks the side of the card the user is on, so they always have context on which side they are on.
3 - card content
4 - flip button

If the user doesn't flip, then the cursor would go to the next card on the list.
If the user flips, we have a mechanism to announce the back of the card contents while having a focus on the button so that users can readily flip to the front again.

To enforce more accessibility in the flash card as an author, take advantage of the visual and accessibility labels found in Settings -> Labels:

In Buttons & Messages tab, look for the Flascards category. Change the label "Click card to flip" to make the button label more meaningful to screen reader users, such as "Flip button. Press enter to activate"

In the Screen Reader Announcements tab, look for the Flashcard category. Change the label for "Flashcard grid group label" to include instructions such as "Flashcards. Use the up and down arrow key to navigate".

As for announcing the card count, we are doing this in the code by using list semantics. Voice Over in Mac does announce the card count, however, NVDA & JAWS seems to not cooperate 😅.

Hope this helps! Cheers!

Marvie