Skip to main content Skip to docs navigation
مشاهدة على الـ GitHub

المخفي بصرياً (Visually hidden)

استخدم هذه المساعدات لإخفاء العناصر بصرياً مع إبقائها متاحة للتقنيات المساعدة.

قم بإخفاء العنصر بصرياً مع السماح ببقائه متاحاً للتقنيات المساعدة (مثل قارئات الشاشة) باستخدام .visually-hidden. استخدم .visually-hidden-focusable لإخفاء العنصر بصرياً بشكل افتراضي، ولكن إظهاره عندما يتم التركيز عليه (على سبيل المثال، بواسطة مستخدم يعتمد على لوحة المفاتيح فقط). يمكن أيضاً تطبيق .visually-hidden-focusable على حاوية – وبفضل :focus-within، سيتم عرض الحاوية عندما يتلقى أي عنصر فرعي داخل الحاوية التركيز.

Skip to main content
A container with a focusable element.
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 كـ مزجات/دمج (mixins).

// Usage as a mixin

.visually-hidden-title {
  @include visually-hidden;
}

.skip-navigation {
  @include visually-hidden-focusable;
}