Vizual ravishda yashirin
Elementlarni vizual ravishda yashirish uchun ushbu yordamchilardan foydalaning, lekin ularni yordamchi texnologiyalar uchun ochiq holda saqlang.
Elementni vizual ravishda yashirish va unga yordamchi texnologiyalar (masalan, ekranni o'qish dasturlari) bilan ta'sir qilishiga ruxsat berish .visually-hidden
. Sukut bo'yicha elementni vizual ravishda yashirish uchun foydalaning .visually-hidden-focusable
, lekin uni diqqat markazida bo'lganda ko'rsatish uchun (masalan, faqat klaviatura foydalanuvchisi tomonidan). .visually-hidden-focusable
konteynerga ham qo'llanilishi mumkin - tufayli :focus-within
konteynerning har qanday yordamchi elementi fokusni olganida konteyner ko'rsatiladi.
Ekranni o'qiydiganlar uchun sarlavha
Asosiy tarkibga o'tish<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>
Ikkalasi ham visually-hidden
, visually-hidden-focusable
aralash sifatida ham ishlatilishi mumkin.
// Usage as a mixin
.visually-hidden-title {
@include visually-hidden;
}
.skip-navigation {
@include visually-hidden-focusable;
}