Flip Cards
Demo
Front Content
<div class="flip-card" role="button" aria-pressed="false" tabindex="0" aria-describedby="flip-desc">
<div class="flip-card-inner">
<div class="flip-card-front" id="front" aria-hidden="false">
<div aria-describedby="flip-desc">Front Content</div>
</div>
<div class="flip-card-back" aria-hidden="true" id="back">
<div class="sub-container">
<p>Back with Small Content</p>
<a href="#" tabindex="-1" id="linkRemove">
Homepage</a>
</div>
</div>
</div>
</div>
<!-- This is the instruction to let SR users know that it is a flip card. -->
<span class="sr-only" id="flip-desc">This is a flip card. Activated by pressing enter or spacebar, or alt +
enter/ alt + space bar.</span>
.flip-card {
perspective: 1000px;
width: 250px;
height: 350px;
position: relative;
transform-style: preserve-3d;
transition: transform 0.6s;
cursor: pointer;
color: cornsilk;
}
.flip-card[aria-pressed="true"] .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-inner {
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: transform 0.6s;
}
.flip-card-front,
.flip-card-back {
width: 100%;
height: 100%;
position: absolute;
backface-visibility: hidden;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
font-weight: bold;
}
.flip-card-front {
background-color: #005E86;
color: #CCE1E7;
}
.sub-container {
width: 70%;
}
.flip-card-back {
background-color: #085024;
transform: rotateY(180deg);
}
.sr-only {
position: absolute;
left: -10000px;
width: 1px;
height: 1px;
top: auto;
overflow: hidden;
}
a {
color: #CEE4D7;
}
document.addEventListener('DOMContentLoaded', function () {
var flipCards = document.querySelectorAll('.flip-card');
flipCards.forEach(function (card) {
card.addEventListener('click', function () {
toggleFlip(card);
toggleSrHidden(card);
});
card.addEventListener('keydown', function (event) {
if ((event.code === 'Enter' || event.code === 'Space') && !event.repeat) {
event.preventDefault();
toggleFlip(card);
toggleSrHidden(card);
}
});
});
//function that toggles the expanded state
function toggleFlip(card) {
var isPressed = card.getAttribute('aria-pressed') === 'true';
card.setAttribute('aria-pressed', String(!isPressed));
}
//function that toggles the aria-hidden state and removes the tabindex on the link.
function toggleSrHidden(card) {
let isSRHidden = card.getAttribute('aria-pressed') === 'true';
front.setAttribute('aria-hidden', String(isSRHidden));
back.setAttribute('aria-hidden', String(!isSRHidden));
if(linkRemove.getAttribute("tabindex") == 0) {
linkRemove.setAttribute("tabindex", String("-1"))
} else {
linkRemove.setAttribute('tabindex',String('0'))
}
}
});
Why use a flip card?
Flip cards have gained popularity in web development due to their interactive and engaging nature in presenting content. These components enable users to interact with information by flipping or toggling between front and back faces, often used to display concise details, feature sets, or snippets of information. Flip cards offer a visually appealing way to present content in a compact space, allowing users to quickly access additional information without overwhelming the interface. They provide an intuitive mechanism for showcasing various details or options, making them ideal for presenting product features, revealing additional content, or creating interactive learning experiences.
What are some accessibility concerns?
- Visually Hidden Text and Screen Readers:
- Concern: Visually hidden text intended for off-screen presentation (e.g., for screen reader users) may still be read aloud, causing redundant or confusing information.
- Mitigation: Ensure that visually hidden text intended solely for visual display remains hidden from screen readers by using proper ARIA attributes or CSS techniques like aria-hidden=”true” or display: none. This prevents screen readers from reading redundant content.
- Visually Hidden Controls Receiving Focus:
- Concern: Controls that are visually hidden but still present in the document flow can receive focus when navigating with a keyboard, causing confusion and interrupting the natural flow of navigation.
- Mitigation: Use proper ARIA roles, such as role=”presentation” or role=”none”, and ensure that visually hidden controls are removed from the keyboard tab order (tabindex=”-1″) to prevent them from receiving focus during keyboard navigation. This ensures a smoother and more predictable navigation experience for users.
- Keyboard Accessibility and Focus Management:
- Concern: Ensuring that flip card interactions, such as flipping from front to back, can be operated using a keyboard alone and that focus is appropriately managed during these interactions.
- Mitigation: Implement keyboard accessibility by allowing users to trigger flip card interactions using keyboard controls (e.g., Enter or Spacebar). Manage focus effectively, ensuring that users are directed to the flipped card’s content after triggering the flip action.
- Screen Reader Compatibility and Content Announcement:
- Concern: Screen readers may not convey changes in content or state when a flip card flips, leading to a lack of awareness about the content update.
- Mitigation: Use appropriate ARIA attributes or live region announcements to inform screen readers about changes in content or state when flip card interactions occur, ensuring that users relying on screen readers are informed about the updated content.
- Visual and Textual Equivalence:
- Concern: The content on the flip side of the card may not have equivalent alternative text or descriptions, hindering comprehension for users who cannot see the visual content.
- Mitigation: Provide descriptive alternative text or labels for the content displayed on both the front and back faces of the flip card, ensuring that users with visual impairments or those who cannot see the visual content can access equivalent information.
Tested using
Chrome
with NVDA
Firefox
with NVDA
- Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.
- All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes, except where the underlying function requires input that depends on the path of the user's movement and not just the endpoints.
- If a Web page can be navigated sequentially and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability.
- For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies.