Візуальна схаваны
Выкарыстоўвайце гэтыя памочнікі, каб візуальна схаваць элементы, але захаваць іх даступнымі для дапаможных тэхналогій.
Візуальна схавайце элемент, дазваляючы яму падвяргацца ўздзеянню дапаможных тэхналогій (напрыклад, праграм чытання з экрана) з дапамогай .visually-hidden
. Выкарыстоўваецца .visually-hidden-focusable
, каб візуальна схаваць элемент па змаўчанні, але каб адлюстраваць яго, калі ён знаходзіцца ў фокусе (напрыклад, карыстальнікам, які карыстаецца толькі клавіятурай). .visually-hidden-focusable
таксама можна прымяніць да кантэйнера – дзякуючы :focus-within
, кантэйнер будзе адлюстроўвацца, калі любы даччыны элемент кантэйнера атрымлівае фокус.
<h2 class="visually-hidden">Title for screen readers</h2>
<a class="visually-hidden-focusable" href="#content">Skip to main content</a>
<div class="visually-hidden-focusable">A container with a <a href="#">focusable element</a>.</div>
Абодва visually-hidden
і visually-hidden-focusable
могуць таксама выкарыстоўвацца ў якасці міксінаў.
// Usage as a mixin
.visually-hidden-title {
@include visually-hidden;
}
.skip-navigation {
@include visually-hidden-focusable;
}