بە شێوەیەکی بینراو شاراوە

بە شێوەیەکی بینراو توخمێک بشارەوە لە کاتێکدا هێشتا ڕێگەی پێدەدە کە بەر تەکنەلۆژیا یارمەتیدەرەکان (وەک خوێنەری شاشە) بکەوێت لەگەڵ .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;
}