ਮੁੱਖ ਸਮੱਗਰੀ ਤੇ ਜਾਓ ਡੌਕਸ ਨੈਵੀਗੇਸ਼ਨ 'ਤੇ ਜਾਓ
Check
in English

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

ਤੱਤਾਂ ਨੂੰ ਦ੍ਰਿਸ਼ਟੀਗਤ ਰੂਪ ਵਿੱਚ ਲੁਕਾਉਣ ਲਈ ਇਹਨਾਂ ਸਹਾਇਕਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ ਪਰ ਉਹਨਾਂ ਨੂੰ ਸਹਾਇਕ ਤਕਨੀਕਾਂ ਤੱਕ ਪਹੁੰਚਯੋਗ ਰੱਖੋ।

ਦੇ ਨਾਲ ਸਹਾਇਕ ਤਕਨੀਕਾਂ (ਜਿਵੇਂ ਕਿ ਸਕ੍ਰੀਨ ਰੀਡਰ) ਦੇ ਸੰਪਰਕ ਵਿੱਚ ਆਉਣ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦੇ ਹੋਏ ਇੱਕ ਤੱਤ ਨੂੰ ਦ੍ਰਿਸ਼ਟੀਗਤ ਰੂਪ ਵਿੱਚ ਲੁਕਾਓ .visually-hidden.visually-hidden-focusableਡਿਫੌਲਟ ਤੌਰ 'ਤੇ ਕਿਸੇ ਤੱਤ ਨੂੰ ਲੁਕਾਉਣ ਲਈ ਵਰਤੋ , ਪਰ ਜਦੋਂ ਇਹ ਫੋਕਸ ਹੋਵੇ ਤਾਂ ਇਸਨੂੰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨ ਲਈ (ਜਿਵੇਂ ਕਿ ਕੀਬੋਰਡ-ਸਿਰਫ਼ ਉਪਭੋਗਤਾ ਦੁਆਰਾ)। .visually-hidden-focusableਇੱਕ ਕੰਟੇਨਰ 'ਤੇ ਵੀ ਲਾਗੂ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ-ਦਾ ਧੰਨਵਾਦ :focus-within, ਕੰਟੇਨਰ ਨੂੰ ਉਦੋਂ ਪ੍ਰਦਰਸ਼ਿਤ ਕੀਤਾ ਜਾਵੇਗਾ ਜਦੋਂ ਕੰਟੇਨਰ ਦੇ ਕਿਸੇ ਵੀ ਚਾਈਲਡ ਐਲੀਮੈਂਟ ਨੂੰ ਫੋਕਸ ਪ੍ਰਾਪਤ ਹੁੰਦਾ ਹੈ।

ਸਕ੍ਰੀਨ ਰੀਡਰਾਂ ਲਈ ਸਿਰਲੇਖ

ਮੁੱਖ ਸਮੱਗਰੀ ਤੇ ਜਾਓ
ਫੋਕਸ ਕਰਨ ਯੋਗ ਤੱਤ ਵਾਲਾ ਕੰਟੇਨਰ ।
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>

ਦੋਨੋ visually-hiddenਅਤੇ visually-hidden-focusableਇਹ ਵੀ mixins ਦੇ ਤੌਰ ਤੇ ਵਰਤਿਆ ਜਾ ਸਕਦਾ ਹੈ.

// Usage as a mixin

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

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