Hla mus rau cov ntsiab lus tseem ceeb Hla mus rau docs navigation
Check
in English

Visually zais

Siv cov pab cuam no kom pom cov ntsiab lus zais tab sis ua kom lawv nkag mus tau rau cov cuab yeej pabcuam.

Pom kev zais ib lub ntsiab lus thaum tseem tso cai rau nws nthuav tawm cov thev naus laus zis (xws li cov nyeem tshuaj ntsuam) nrog .visually-hidden. Siv .visually-hidden-focusablekom pom kev zais ib lub ntsiab lus los ntawm lub neej ntawd, tab sis kom pom nws thaum nws tsom (xws li los ntawm tus neeg siv keyboard nkaus xwb). .visually-hidden-focusablekuj tseem tuaj yeem siv rau hauv lub thawv-ua tsaug rau :focus-within, lub thawv yuav tshwm sim thaum ib qho me me ntawm lub thawv tau txais kev tsom.

Lub npe rau screen nyeem

Hla mus rau cov ntsiab lus tseem ceeb
Ib lub thawv nrog lub ntsiab tseem ceeb .
html
<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>

Ob qho tib si visually-hiddenthiab visually-hidden-focusabletseem tuaj yeem siv los ua mixins.

// Usage as a mixin

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

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