Forum Discussion
JAWS Accessibility Testing Feedback On Rise
Similar observation here with NVDA and Flashcards. The front of the card isn't read on focus -- I need to arrow-key into the card. The back of the card is read on flip; and on a return flip to the front, the front text is read.
Also, is there a way to change the "Click to Flip" wording to "Select to Flip"? That would be more in line with UX and accessibility best practices.
It would also be nice to have a way to enable the screen reader to announce something like "Card 1 of 3" so screen reader users can stay oriented within the interaction. I do specify before the Flashcard interaction how many cards there are so SR users know what to expect, but as far as I can tell, there's no way for them to know within the interaction where they are in the card count.
- MarvieYap-Mulde2 years agoFormer Staff
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 buttonIf 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
- AustonStamm2 years agoCommunity Member
Hi Marvie,
Thank you for sharing the information. I have found flashcards to work well using VoiceOver.
I'm glad you're working on adding the card count to NVDA & JAWS. I also think changing the default labels from click to select would be beneficial. Click mainly refers mouse users while select includes people who only use the keyboard or use screen reading software.
I really appreciate your help.
Auston