رفتن به محتوای اصلی به پیمایش اسناد بروید
Check
in English

بصری پنهان است

از این کمک‌ها برای پنهان کردن بصری عناصر استفاده کنید، اما آنها را در دسترس فناوری‌های کمکی قرار دهید.

بصری یک عنصر را پنهان کنید و در عین حال به آن اجازه دهید در معرض فناوری های کمکی (مانند صفحه خوان ها) با .visually-hidden. برای .visually-hidden-focusableپنهان کردن بصری یک عنصر به طور پیش‌فرض استفاده کنید، اما برای نمایش آن زمانی که فوکوس شده است (مثلاً توسط یک کاربر فقط صفحه کلید). .visually-hidden-focusableهمچنین می‌تواند روی یک ظرف اعمال شود – به لطف :focus-withinکانتینر، زمانی که هر عنصر فرزند ظرف فوکوس دریافت می‌کند، ظرف نمایش داده می‌شود.

عنوان برای صفحه خوان ها

رفتن به محتوای اصلی
ظرفی با عنصر قابل فوکوس
html
<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;
}