CSS 翻转卡:如何激活翻转通过选项卡，使其可通过键盘访问?

Question

我发现了一些关于如何使用CSS制作翻转卡的很棒的tuts。不过，我的问题是如何使此键盘可访问。换句话说，对于仅使用键盘的残疾用户，希望他们能够只使用选项卡按钮(因此焦点(，并且卡片将翻转以显示背面内容并允许 Tab 键选择卡片背面的链接。

我在谷歌上搜索了一下，发现了一些建议(请参阅下面的jsfiddle，我在那里尝试了它们(，但我无法获得成功。

这是一个很棒的网站，具有此功能，但我不知道他们是如何使其工作的： https://businessexpress.maryland.gov/

请注意，如果您在上面页面上按住 tab，最终您的卡片将翻转，然后您可以按 tab 键浏览它们上的链接。例如，对于第一张翻转卡，有一个链接"/plan"，然后它有子链接，如"/plan/create-business-plan"等。

请注意，我试图在第 21 行放入一些会影响"活动"和"焦点"伪类的 CSS。但只有悬停才能翻转卡片。我希望在任何链接上跳动都会翻转卡片，就像上面的 maryland.gov 示例一样。

我在这里包含一个 jsfiddle(有一个小的输入元素，因此您可以从它开始跳转(： 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);
}

Answer 1

您可以使用:focus-within伪类：

.flip-card:focus-within .flip-card-inner

/* 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:focus-within .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);
}

<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 -->

Answer 2

请不要按照建议(*(只使用focus-within。

它在Internet Explorer中没有支持，这是一个大问题，因为这个问题被标记为"可访问性"。

虽然Internet Explorer支持通常不是问题，但大约11%的屏幕阅读器用户使用IE 11，另有1.5%使用IE 9和10。

另请注意，大约 25% 的屏幕阅读器用户不是盲人。 因此，确保视觉体验与屏幕阅读器体验相匹配也很重要(如果您想知道为什么屏幕阅读器用户的卡旋转很重要。

下面是一个非常粗略的想法，应该相当灵活，它确实依赖于具有唯一类的父项，但如果您有很多这样的类，则可以轻松修复，这只是一个示例让您入门。

下面的代码应该一直兼容到IE9(请检查我可能犯了一个小错误(，将浏览器覆盖率从89%提高到97%左右，提高了10%。

CSS- 也请检查对CSS的调整，我添加了两个单独的项目，一个是我们添加到父级以执行轮换的类的.flip-card.focus-within .flip-card-inner选择器。

另一种是@media (prefers-reduced-motion)，如果用户已将其用户设置设置为"减少动画"，则关闭旋转动画，这是另一项辅助功能改进。

我并不经常提倡JavaScript解决方案而不是CSS解决方案，但在这种情况下，我们仍然受到旧浏览器的限制。

function addListeners(parentClass){
var focusableItems = ['a[href]', 'area[href]', 'input:not([disabled])', 'select:not([disabled])', 'textarea:not([disabled])', 'button:not([disabled])', '[tabindex="0"]'];
for (i = 0, leni = focusableItems.length; i < leni; i++) {
var focusableElements = document.querySelectorAll("." + parentClass + " " + focusableItems[i]);
for (j = 0, lenj = focusableElements.length; j < lenj; j++) {
focusableElements[j].addEventListener("focus", function() {
document.querySelector("." + parentClass).classList.add("focus-within");
});
focusableElements[j].addEventListener("blur", function() {
document.querySelector("." + parentClass).classList.remove("focus-within");
});
}
}
}
addListeners("flip-card");

/* 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);
}
/* New CSS selector */
.flip-card.focus-within .flip-card-inner{
transform: rotateY(180deg);
}
@media (prefers-reduced-motion) {
.flip-card-inner {
transition: transform none;
}
}

<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 -->

(*( 带填充物的替代路线

我找到了一个focus-within的 polyfill，我还没有检查它是否适用于 IE9 和 10，但我认为大多数公司只支持 IE11 是一个合理的折衷方案，它似乎适用于 IE11。

我们仍然支持尽可能回到IE9，因此我包含上面的代码片段(加上它的JS更少，因此性能更好(。