How to make interactive flipcards accessible to screen readers with ARIA?

user_15072574 0
Viewed 170

My school is using the W3Schools flip card code for interactivity on our class pages, with some added JavaScript to keep the cards flipped when clicked or tapped. However, I don't think they are accessible for screen readers. It seems like they need some ARIA code, and I am very new to ARIA. How can I make sure students using screen readers can use the flip cards?

I added some ARIA code, but I'm not sure if it's right or useful. Does it make sense that the front side controls the back side and vice versa? I'm also using JavaScript to toggle the aria-expanded between true and false when the cards are flipped.

<div class="flip-card">
<div class="flip-card-inner" tabindex="0">
<div class="flip-card-front" role="button" aria-expanded="true" id="flip-card-front_4" aria-controls="flip-card-back_4">
<p>Front of card</p>
</div>
<div class="flip-card-back" role="button" aria-expanded="false" id="flip-card-back_4" aria-controls="flip-card-front_4">
<p>Back of card</p>
</div>
</div>
</div>
wai-aria accessibility css html javascript
1 Answers

You actually don't need any ARIA, which is good because the first rule of ARIA is to not use ARIA if you can help it.

I made two small changes to the example and it worked with a keyboard and read ok with a screen reader.

I changed

.flip-card:hover .flip-card-inner {

to

.flip-card:hover .flip-card-inner, 
.flip-card:focus .flip-card-inner {

so that you'd get the flipping animation on either a mouse hover or a keyboard focus.

I then added tabindex="0" to the flip card so that you could tab to it.

<div class="flip-card" tabindex="0">

With a screen reader running, when you tab to the flip card, you hear all the text contents in the card. For NVDA, I hear:

"Avatar graphic John Doe heading level 1 Architect & Engineer We love that guy"

JAWS is similar but marginally different:

"Avatar John Doe Architect & Engineer We love that guy Graphic"

It doesn't work that great with Voiceover on iOS. You can swipe to the image and then double tap to flip it over but it just says "avatar". But if you keep swiping then you can hear the name and job title. You just don't know the card flipped when you tapped on it.

The missing usability piece is the role of the card. How does a user know the card is going to flip when it receives keyboard focus? There isn't a standard role that fits this behavior so you might have to use `aria-roledescription' to give it a decent description.

<div class="flip-card" tabindex="0" aria-roledescription="flipping card">

Also take a look at this card design pattern. I'm not sure if he talks about flipping cards but it has some good info.

user_767140
Related