ਦ੍ਰਿਸ਼ਟੀਗਤ ਤੌਰ 'ਤੇ ਲੁਕਿਆ ਹੋਇਆ

ਦੇ ਨਾਲ ਸਹਾਇਕ ਤਕਨੀਕਾਂ (ਜਿਵੇਂ ਕਿ ਸਕ੍ਰੀਨ ਰੀਡਰ) ਦੇ ਸੰਪਰਕ ਵਿੱਚ ਆਉਣ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦੇ ਹੋਏ ਇੱਕ ਤੱਤ ਨੂੰ ਦ੍ਰਿਸ਼ਟੀਗਤ ਰੂਪ ਵਿੱਚ ਲੁਕਾਓ .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;
}