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;
}