გადადით მთავარ შინაარსზე დოკუმენტების ნავიგაციაზე გადასვლა
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;
}