I have found some great tuts on how to make a flip card with CSS. My question though is how to make this keyboard accessible. In other words, for a user with a disability who only is using a keyboard, hopefully they would be able to just use the tab button (thus focus), and the card would turn over to show the back content and allow tabbing to select links on the card's back.
I Googled this and found some suggestions (please see the jsfiddle below where I tried them), but I couldn't get success.
Here is a great website that has this functionality, but I don't know how they made it work: https://businessexpress.maryland.gov/
Notice that if you hold tab down on the above page, eventually your cards will flip, and you can then tab through the links on them. For example, for the first flip card there is a link "/plan", and then it has sublinks like "/plan/create-business-plan", etc.
Please notice that I tried to put in some CSS on line 21 that would affect the "active" and "focus" pseudo classes. But only hovering makes the card flip. I wish that tabbing onto any of the links would flip the card, like in the maryland.gov example above.
I've included a jsfiddle here (there is a little input element so you can start tabbing from it): https://jsfiddle.net/anrbhcmv/
HTML:
<div id="content">
<h1>Small Business Resources</h1>
<input type="text">
<br><br>
<div class="flip-card">
<div class="flip-card-inner">
<a href="#" id="flip-card-inner">
<div class="flip-card-front">
<div>Card-front content</div>
</div>
</a>
<div class="flip-card-back">
<a href="https://www.google.com">Google</a>
<div>Text</div>
</div>
</div>
</div>
</div><!-- end #content -->
CSS:
/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
background-color: transparent;
width: 300px;
height: 200px;
// border: 1px solid #f1f1f1;
// perspective: 1000px; /* Remove this if you don't want the 3D effect */
}
/* This container is needed to position the front and back side */
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner, .flip-card:active .flip-card-inner, .flip-card:focus .flip-card-inner{
transform: rotateY(180deg);
}
/* Position the front and back side */
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden; /* Safari */
backface-visibility: hidden;
}
/* Style the front side (fallback if image is missing) */
.flip-card-front {
background-color: #008CCC;
background-color: azure;
color: white;
color: black;
}
/* Style the back side */
.flip-card-back {
background-color: #99CC66;
color: white;
transform: rotateY(180deg);
}