تخطي إلى المحتوى الرئيسي انتقل إلى ملاحة المستندات
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;
}