in English
بصری پنهان شده است
از این کمکها برای پنهان کردن بصری عناصر استفاده کنید، اما آنها را در دسترس فناوریهای کمکی قرار دهید.
بصری یک عنصر را پنهان کنید و در عین حال به آن اجازه دهید در معرض فناوری های کمکی (مانند صفحه خوان ها) با .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;
}