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