Відображення маркера фокуса
дивитись опис критерію у WCAG 2.1
Приклади взаємодії маркерів фокуса з фоном
Використовуйте клавішу Tab для перевірки.
Сірий контейнер з блакитною рамкою фокуса
Тут стандартний фокус виглядає контрастним.
Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Curabitur id placerat dolor, in vestibulum massa. Nullam bibendum, lacus efficitur pulvinar feugiat, lectus nisi sagittis elit, vitae sodales tellus sem nec magna. Aenean vehicula justo
ac purus elementum, vel elementum metus sodales. Nullam ultricies, nisi quis rutrum semper, sem libero mollis est, vitae tincidunt ante nulla vestibulum tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae condimentum velit. Aenean id purus vitae dolor
rutrum rhoncus. Integer egestas dolor iaculis sapien tempus venenatis. Pellentesque est leo, scelerisque quis orci quis, volutpat mollis nunc. Mauris felis augue, malesuada quis orci at, rhoncus convallis arcu. Donec efficitur risus libero, sed imperdiet ante mollis sed. Fusce sit amet porttitor nisi. Ut
turpis lacus, aliquam ut finibus quis.
Блакитний контейнер з блакитною рамкою фокуса
Тут стандартний фокус НЕ виглядає контрастним.
Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Curabitur id placerat dolor, in vestibulum massa. Nullam bibendum, lacus efficitur pulvinar feugiat, lectus nisi sagittis elit, vitae sodales tellus sem nec magna. Aenean vehicula justo
ac purus elementum, vel elementum metus sodales. Nullam ultricies, nisi quis rutrum semper, sem libero mollis est, vitae tincidunt ante nulla vestibulum tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae condimentum velit. Aenean id purus vitae dolor
rutrum rhoncus. Integer egestas dolor iaculis sapien tempus venenatis. Pellentesque est leo, scelerisque quis orci quis, volutpat mollis nunc. Mauris felis augue, malesuada quis orci at, rhoncus convallis arcu. Donec efficitur risus libero, sed imperdiet ante mollis sed. Fusce sit amet porttitor nisi. Ut
turpis lacus, aliquam ut finibus quis.
Блакитний контейнер з жовтою рамкою фокуса
Тут фокус виглядає контрастним за рахунок локального перевизначення кольору.
Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Curabitur id placerat dolor, in vestibulum massa. Nullam bibendum, lacus efficitur pulvinar feugiat, lectus nisi sagittis elit, vitae sodales tellus sem nec magna. Aenean vehicula justo
ac purus elementum, vel elementum metus sodales. Nullam ultricies, nisi quis rutrum semper, sem libero mollis est, vitae tincidunt ante nulla vestibulum tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae condimentum velit. Aenean id purus vitae dolor
rutrum rhoncus. Integer egestas dolor iaculis sapien tempus venenatis. Pellentesque est leo, scelerisque quis orci quis, volutpat mollis nunc. Mauris felis augue, malesuada quis orci at, rhoncus convallis arcu. Donec efficitur risus libero, sed imperdiet ante mollis sed. Fusce sit amet porttitor nisi. Ut
turpis lacus, aliquam ut finibus quis.
Деякі приклади оформлення маркерів фокуса
Використовуйте клавішу Tab для перевірки.
Маркер у вигляді рамки, яка оточує текст
.focus_frame a:focus {
outline: 2px solid #4444FF;
outline-offset: 2px;
}
Маркер у вигляді кольорового фону текста
.focus_rect a:focus {
background-color: yellow;
outline: none;
}
Маркер у вигляді кольорового фону текста, який трохи виходить за його межі
.focus_rect_wide a:focus {
background-color: yellow;
outline: 4px solid yellow;
outline-offset: 0px;
}
Маркер у вигляді тіні
.focus_shadow a:focus {
box-shadow: 0 0 5px 8px rgba(0, 90, 255, 0.5);
outline: none;
}
Додаткові приклади
