Main content ah kal rawh Docs navigation ah kal rawh
in English

Hmuh theiha thup

Heng helper te hi hmang la, elements te chu hmuh theiha thup la mahse assistive technology te hman theih turin hmang ang che.

Element pakhat chu hmuh theihin thup la, chutih rualin assistive technology (screen reader ang chi)-a inhmang thei turin phalsak la, .visually-hidden. .visually-hidden-focusableElement pakhat chu default-a hmuh theiha thup nan hmang la , mahse a focus laiin (eg keyboard-only user-in) a lantir theih nan hmang ang che. .visually-hidden-focusablecontainer-ah pawh hman theih a ni–thanks to :focus-within, container-a child element eng pawhin focus a dawn hunah container chu a lang ang.

Main content ah kal rawh
A container pakhatah chuan focusable element a awm a . 
<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>

Both visually-hiddenleh visually-hidden-focusablemixin atan pawh hman theih a ni.

// Usage as a mixin

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

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