លាក់ដោយមើលឃើញ

លាក់ធាតុដោយមើលឃើញ ខណៈពេលដែលនៅតែអនុញ្ញាតឱ្យវាបង្ហាញជាមួយបច្ចេកវិទ្យាជំនួយ (ដូចជាកម្មវិធីអានអេក្រង់) ជាមួយ .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ក៏អាចប្រើជា mixins ផងដែរ។

// Usage as a mixin

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

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