Пожалуйста, не используйте просто focus-within, как предлагается (*).
Он не имеет не поддерживается в Inte rnet Explorer , что является большой проблемой, поскольку этот вопрос отмечен как «доступность».
В то время как Inte rnet Explorer обычно не является проблемой, около 11% пользователей программ чтения с экрана используют IE 11, а еще 1,5% используют IE 9 и 10. .
Также имейте в виду, что около 25% пользователей программ чтения с экрана не слепые. , поэтому важно убедиться, что визуальное восприятие соответствует опыту чтения с экрана. (на случай, если вам интересно, почему это имеет значение, если карта вращается для пользователя программы чтения с экрана.)
Ниже приводится очень приблизительная идея обходного пути, который должен быть достаточно гибким, он полагается на родителя элемент, имеющий уникальный класс в его нынешнем виде, но это можно легко исправить, если у вас их много, это только пример для начала.
Приведенный ниже код должен быть полностью совместимым в IE9 (пожалуйста, ch (eck, возможно, я допустил небольшую ошибку), увеличив охват вашего браузера с 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 полифилл , у меня нет Не проверял, будет ли он работать в IE9 и 10, но я считаю разумным компромиссом поддерживать только IE11 для большинства компаний, и, похоже, он работает в IE11.
Мы по-прежнему поддерживаем IE9, где можем, поэтому я включил приведенный выше фрагмент кода (плюс он меньше JS, поэтому лучше для производительности).