CSS翻转卡。如何通过tab激活翻转，让它可以通过键盘访问？

问题描述 投票：0回答：1

我找到了一些关于如何用CSS制作翻转卡的精彩教程。但我的问题是如何使这个键盘无障碍。换句话说，对于一个只使用键盘的残疾用户来说，希望他们能够只使用tab按钮（从而聚焦），卡片就会翻过来显示背面的内容，并允许用tab选择卡片背面的链接。

我上网搜索了一下，发现了一些建议（请看下面的jsfiddle，我试过了），但我无法获得成功。

这里有一个很棒的网站有这个功能，但我不知道他们是怎么做到的。https:/businessexpress.maryland.gov

注意，如果你在上面的页面上按住tab键，最终你的卡片就会翻转，然后你可以通过卡片上的链接进行翻转。例如，第一张翻转的卡片上有一个链接 "计划"，然后它有子链接，如 "计划-创建-商业计划 "等。

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

我在这里加入了一个jsfiddle（有一个小的输入元素，所以你可以从它开始tabbing）。https:/jsfiddle.netanrbhcmv。

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);
}
css accessibility flip
1个回答
4
投票

你可以使用 :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 -->
1
投票

请不要只使用 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 -->

(*) 使用polyfill的替代路线

我发现了一个 focus-within 填充物我还没有检查它是否能在IE9和10中工作，但我认为这是一个合理的妥协，对于大多数公司来说，只支持IE11，它似乎在IE11中工作。

我们仍然支持在可能的情况下回到IE9，因此我加入了上面的代码片段（加上它的JS较少，所以性能更好）。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.