ਹੇ ਤੁਸੀਂ ਸਾਰੇ ਸ਼ਾਨਦਾਰ ਡਿਵੈਲਪਰ! ਇਸ ਪੋਸਟ ਵਿੱਚ, ਮੈਂ ਤੁਹਾਨੂੰ ਸਿਮੈਂਟਿਕ HTML ਅਤੇ ਇੱਕ ਸ਼ਾਨਦਾਰ CSS ਸੂਡੋ ਕਲਾਸ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਇੱਕ ਸਧਾਰਨ ਸੰਪਰਕ ਫਾਰਮ ਬਣਾਉਣ ਲਈ ਲੈ ਜਾ ਰਿਹਾ ਹਾਂ :focus-within. The :focus-within ਕਲਾਸ ਫੋਕਸ 'ਤੇ ਵਧੀਆ ਨਿਯੰਤਰਣ ਲਈ ਅਤੇ ਤੁਹਾਡੇ ਉਪਭੋਗਤਾ ਨੂੰ ਇਹ ਦੱਸਣ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ ਕਿ ਉਹ ਅਨੁਭਵ ਵਿੱਚ ਹਨ। ਅੱਗੇ ਵਧਣ ਤੋਂ ਪਹਿਲਾਂ, ਆਓ ਅਸੀਂ ਇਸ ਗੱਲ 'ਤੇ ਜਾਣੀਏ ਕਿ ਵੈੱਬ ਪਹੁੰਚਯੋਗਤਾ ਕੀ ਹੈ।

ਫਾਰਮ ਪਹੁੰਚਯੋਗਤਾ?

ਤੁਸੀਂ ਸੰਭਾਵਤ ਤੌਰ 'ਤੇ ਹਰ ਥਾਂ "ਪਹੁੰਚਯੋਗਤਾ" ਸ਼ਬਦ ਜਾਂ ਸੰਖਿਆ, a11y ਸੁਣਿਆ ਹੋਵੇਗਾ। ਇਸਦਾ ਮਤਲੱਬ ਕੀ ਹੈ? ਇਹ ਬਹੁਤ ਸਾਰੇ ਜਵਾਬਾਂ ਦੇ ਨਾਲ ਇੱਕ ਵਧੀਆ ਸਵਾਲ ਹੈ. ਜਦੋਂ ਅਸੀਂ ਭੌਤਿਕ ਸੰਸਾਰ ਨੂੰ ਦੇਖਦੇ ਹਾਂ, ਪਹੁੰਚਯੋਗਤਾ ਦਾ ਅਰਥ ਹੈ ਤੁਹਾਡੇ ਕਾਰੋਬਾਰ ਵਿੱਚ ਤੁਹਾਡੇ ਬਾਥਰੂਮਾਂ ਵਿੱਚ ਤਿੱਖੇ ਕੰਟੇਨਰ ਰੱਖਣ, ਇਹ ਯਕੀਨੀ ਬਣਾਉਣਾ ਕਿ ਪਹੀਏ ਵਿੱਚ ਸਹਾਇਤਾ ਕਰਨ ਵਾਲੇ ਲੋਕਾਂ ਲਈ ਰੈਂਪ ਹੋਣ, ਅਤੇ ਲੋੜੀਂਦੇ ਕਿਸੇ ਵੀ ਵਿਅਕਤੀ ਲਈ ਹੱਥ ਵਿੱਚ ਵੱਡੇ ਪ੍ਰਿੰਟ ਕੀਬੋਰਡ ਵਰਗੇ ਪੈਰੀਫਿਰਲ ਹੋਣ।

ਪਹੁੰਚਯੋਗਤਾ ਦਾ ਸਿਲਸਿਲਾ ਇੱਥੇ ਨਹੀਂ ਰੁਕਦਾ, ਸਾਡੇ ਕੋਲ ਡਿਜੀਟਲ ਪਹੁੰਚਯੋਗਤਾ ਹੈ ਜਿਸ ਬਾਰੇ ਸਾਨੂੰ ਨਾ ਸਿਰਫ਼ ਬਾਹਰੀ ਉਪਭੋਗਤਾਵਾਂ ਲਈ, ਸਗੋਂ ਅੰਦਰੂਨੀ ਸਹਿਯੋਗੀਆਂ ਲਈ ਵੀ ਜਾਣੂ ਹੋਣ ਦੀ ਲੋੜ ਹੈ। ਰੰਗ ਦੇ ਉਲਟ ਇੱਕ ਘੱਟ ਲਟਕਣ ਵਾਲਾ ਫਲ ਹੈ ਕਿ ਸਾਨੂੰ ਮੁਕੁਲ ਵਿੱਚ ਨਿਪ ਕਰਨ ਦੇ ਯੋਗ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ. ਸਾਡੇ ਕੰਮ ਦੇ ਸਥਾਨਾਂ 'ਤੇ, ਇਹ ਯਕੀਨੀ ਬਣਾਉਣਾ ਕਿ ਜੇਕਰ ਕਿਸੇ ਕਰਮਚਾਰੀ ਨੂੰ ਸਕਰੀਨ ਰੀਡਰ ਵਰਗੀ ਸਹਾਇਕ ਤਕਨੀਕ ਦੀ ਲੋੜ ਹੈ, ਤਾਂ ਸਾਡੇ ਕੋਲ ਉਹ ਸਥਾਪਿਤ ਅਤੇ ਉਪਲਬਧ ਹੈ। ਬਹੁਤ ਸਾਰੀਆਂ ਗੱਲਾਂ ਹਨ ਜਿਨ੍ਹਾਂ ਨੂੰ ਧਿਆਨ ਵਿੱਚ ਰੱਖਣ ਦੀ ਲੋੜ ਹੈ। ਇਹ ਲੇਖ ਰੱਖ ਕੇ ਵੈੱਬ ਪਹੁੰਚਯੋਗਤਾ 'ਤੇ ਧਿਆਨ ਕੇਂਦਰਿਤ ਕਰੇਗਾ WCAG (ਵੈੱਬ ਸਮੱਗਰੀ ਪਹੁੰਚਯੋਗਤਾ ਦਿਸ਼ਾ-ਨਿਰਦੇਸ਼) ਮਨ ਵਿਚ.

ਇਹ ਸੂਡੋ ਕਲਾਸ ਅਸਲ ਵਿੱਚ ਬਹੁਤ ਵਧੀਆ ਹੈ ਜਦੋਂ ਤੁਸੀਂ ਇਸ ਗੱਲ 'ਤੇ ਜ਼ੋਰ ਦੇਣਾ ਚਾਹੁੰਦੇ ਹੋ ਕਿ ਉਪਭੋਗਤਾ ਅਸਲ ਵਿੱਚ ਤੱਤ ਨਾਲ ਗੱਲਬਾਤ ਕਰ ਰਿਹਾ ਹੈ. ਉਦਾਹਰਨ ਲਈ, ਤੁਸੀਂ ਪੂਰੇ ਫਾਰਮ ਦਾ ਪਿਛੋਕੜ ਰੰਗ ਬਦਲ ਸਕਦੇ ਹੋ। ਜਾਂ, ਜੇਕਰ ਫੋਕਸ ਨੂੰ ਇੱਕ ਇਨਪੁਟ ਵਿੱਚ ਮੂਵ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਤੁਸੀਂ ਲੇਬਲ ਨੂੰ ਬੋਲਡ ਅਤੇ ਇੱਕ ਇੰਪੁੱਟ ਤੱਤ ਦਾ ਵੱਡਾ ਬਣਾ ਸਕਦੇ ਹੋ ਜਦੋਂ ਫੋਕਸ ਉਸ ਇਨਪੁਟ ਵਿੱਚ ਮੂਵ ਕੀਤਾ ਜਾਂਦਾ ਹੈ। ਕੋਡ ਦੇ ਸਨਿੱਪਟ ਅਤੇ ਉਦਾਹਰਨਾਂ ਵਿੱਚ ਹੇਠਾਂ ਕੀ ਹੋ ਰਿਹਾ ਹੈ ਉਹ ਹੈ ਜੋ ਫਾਰਮ ਨੂੰ ਪਹੁੰਚਯੋਗ ਬਣਾ ਰਿਹਾ ਹੈ। :focus-within ਸਿਰਫ਼ ਇੱਕ ਤਰੀਕਾ ਹੈ ਕਿ ਅਸੀਂ ਆਪਣੇ ਫਾਇਦੇ ਲਈ CSS ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹਾਂ।

ਫੋਕਸ ਕਿਵੇਂ ਕਰੀਏ

ਫੋਕਸ, ਪਹੁੰਚਯੋਗਤਾ ਅਤੇ ਵੈੱਬ ਅਨੁਭਵ ਦੇ ਸਬੰਧ ਵਿੱਚ, ਵਿਜ਼ੂਅਲ ਸੂਚਕ ਹੈ ਕਿ ਪੰਨੇ 'ਤੇ, UI ਵਿੱਚ, ਜਾਂ ਕਿਸੇ ਹਿੱਸੇ ਦੇ ਅੰਦਰ ਕਿਸੇ ਚੀਜ਼ ਨਾਲ ਇੰਟਰੈਕਟ ਕੀਤਾ ਜਾ ਰਿਹਾ ਹੈ। CSS ਦੱਸ ਸਕਦਾ ਹੈ ਕਿ ਇੱਕ ਇੰਟਰਐਕਟਿਵ ਤੱਤ ਕਦੋਂ ਫੋਕਸ ਹੁੰਦਾ ਹੈ।

ਹਮੇਸ਼ਾ ਇਹ ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਫੋਕਸ ਸੂਚਕ ਜਾਂ ਫੋਕਸ ਕਰਨ ਯੋਗ ਤੱਤਾਂ ਦੇ ਆਲੇ-ਦੁਆਲੇ ਦੀ ਰਿੰਗ ਅਨੁਭਵ ਦੁਆਰਾ ਸਹੀ ਰੰਗ ਦੇ ਵਿਪਰੀਤ ਨੂੰ ਬਣਾਈ ਰੱਖਦੀ ਹੈ।

ਫੋਕਸ ਇਸ ਤਰ੍ਹਾਂ ਲਿਖਿਆ ਗਿਆ ਹੈ ਅਤੇ ਜੇਕਰ ਤੁਸੀਂ ਇਸਨੂੰ ਸਟਾਈਲ ਕਰਨਾ ਚੁਣਦੇ ਹੋ ਤਾਂ ਤੁਹਾਡੀ ਬ੍ਰਾਂਡਿੰਗ ਨਾਲ ਮੇਲ ਕਰਨ ਲਈ ਸਟਾਈਲ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ।

:focus {
  * / INSERT STYLES HERE /*
}

ਤੁਸੀਂ ਜੋ ਵੀ ਕਰਦੇ ਹੋ, ਕਦੇ ਵੀ ਆਪਣੀ ਰੂਪਰੇਖਾ ਨੂੰ ਨਿਰਧਾਰਤ ਨਹੀਂ ਕਰੋ 0 or none. ਅਜਿਹਾ ਕਰਨ ਨਾਲ ਪੂਰੇ ਅਨੁਭਵ ਵਿੱਚ ਹਰ ਕਿਸੇ ਲਈ ਇੱਕ ਦਿੱਖ ਫੋਕਸ ਸੂਚਕ ਹਟਾ ਦਿੱਤਾ ਜਾਵੇਗਾ। ਜੇਕਰ ਤੁਹਾਨੂੰ ਫੋਕਸ ਹਟਾਉਣ ਦੀ ਲੋੜ ਹੈ, ਤਾਂ ਤੁਸੀਂ ਕਰ ਸਕਦੇ ਹੋ, ਪਰ ਬਾਅਦ ਵਿੱਚ ਇਸਨੂੰ ਵਾਪਸ ਜੋੜਨਾ ਯਕੀਨੀ ਬਣਾਓ। ਜਦੋਂ ਤੁਸੀਂ ਆਪਣੇ CSS ਤੋਂ ਫੋਕਸ ਹਟਾਉਂਦੇ ਹੋ ਜਾਂ ਇਸ 'ਤੇ ਰੂਪਰੇਖਾ ਸੈੱਟ ਕਰਦੇ ਹੋ 0 or none, ਇਹ ਤੁਹਾਡੇ ਸਾਰੇ ਉਪਭੋਗਤਾਵਾਂ ਲਈ ਫੋਕਸ ਰਿੰਗ ਨੂੰ ਹਟਾਉਂਦਾ ਹੈ। CSS ਰੀਸੈਟ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਸਮੇਂ ਇਹ ਬਹੁਤ ਦੇਖਿਆ ਜਾਂਦਾ ਹੈ. ਇੱਕ CSS ਰੀਸੈੱਟ ਸਟਾਈਲ ਨੂੰ ਇੱਕ ਖਾਲੀ ਕੈਨਵਸ ਵਿੱਚ ਰੀਸੈਟ ਕਰੇਗਾ। ਇਸ ਤਰ੍ਹਾਂ ਤੁਸੀਂ ਖਾਲੀ ਕੈਨਵਸ ਨੂੰ ਆਪਣੀ ਇੱਛਾ ਅਨੁਸਾਰ ਸਟਾਈਲ ਕਰਨ ਦੇ ਇੰਚਾਰਜ ਹੋ। ਜੇਕਰ ਤੁਸੀਂ CSS ਰੀਸੈਟ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਚੈੱਕ ਆਊਟ ਕਰੋ ਜੋਸ਼ ਕੋਮੇਓ ਦਾ ਰੀਸੈਟ.

*ਉਹ ਨਾ ਕਰੋ ਜੋ ਹੇਠਾਂ ਹੈ!

:focus {
  outline: 0;
}

:focus {
  outline: none;
}

ਅੰਦਰ ਦੇਖੋ!

CSS ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਫੋਕਸ ਕਰਨ ਦੇ ਸਭ ਤੋਂ ਵਧੀਆ ਤਰੀਕਿਆਂ ਵਿੱਚੋਂ ਇੱਕ ਇਹ ਹੈ ਕਿ ਇਹ ਲੇਖ ਇਸ ਬਾਰੇ ਹੈ। ਜੇਕਰ ਤੁਸੀਂ ਇਸ ਦੀ ਜਾਂਚ ਨਹੀਂ ਕੀਤੀ ਹੈ :focus-within ਸੂਡੋ ਕਲਾਸ, ਯਕੀਨੀ ਤੌਰ 'ਤੇ ਇਸ ਨੂੰ ਇੱਕ ਨਜ਼ਰ ਦਿਓ! ਜਦੋਂ ਸਿਮੈਂਟਿਕ ਮਾਰਕਅੱਪ ਅਤੇ CSS ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੀ ਗੱਲ ਆਉਂਦੀ ਹੈ ਤਾਂ ਇੱਥੇ ਬਹੁਤ ਸਾਰੇ ਲੁਕੇ ਹੋਏ ਰਤਨ ਹੁੰਦੇ ਹਨ, ਅਤੇ ਇਹ ਉਹਨਾਂ ਵਿੱਚੋਂ ਇੱਕ ਹੈ. ਬਹੁਤ ਸਾਰੀਆਂ ਚੀਜ਼ਾਂ ਜੋ ਨਜ਼ਰਅੰਦਾਜ਼ ਕੀਤੀਆਂ ਜਾਂਦੀਆਂ ਹਨ ਡਿਫੌਲਟ ਰੂਪ ਵਿੱਚ ਪਹੁੰਚਯੋਗ ਹੁੰਦੀਆਂ ਹਨ, ਉਦਾਹਰਨ ਲਈ, ਸਿਮੈਂਟਿਕ ਮਾਰਕਅੱਪ ਡਿਫੌਲਟ ਤੌਰ 'ਤੇ ਪਹੁੰਚਯੋਗ ਹੁੰਦਾ ਹੈ ਅਤੇ ਹਰ ਸਮੇਂ div's ਉੱਤੇ ਵਰਤਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ।

<header>
  <h1>Semantic Markup</h1>
  <nav>
    <ul>
      <li><a href="/pa/">Home</a></li>
      <li><a href="/pa/about">About</a></li>
    </ul>
  </nav>
</header>

<section><!-- Code goes here --></section>

<section><!-- Code goes here --></section>

<aside><!-- Code goes here --></aside>

<footer><!-- Code goes here --></footer>

The header, nav, main, section, asideਹੈ, ਅਤੇ footer ਸਾਰੇ ਅਰਥ ਤੱਤ ਹਨ। ਦ h1 ਅਤੇ ul ਅਰਥਵਾਦੀ ਅਤੇ ਪਹੁੰਚਯੋਗ ਵੀ ਹਨ।

ਜਦੋਂ ਤੱਕ ਕੋਈ ਕਸਟਮ ਕੰਪੋਨੈਂਟ ਨਹੀਂ ਹੈ ਜਿਸ ਨੂੰ ਬਣਾਉਣ ਦੀ ਲੋੜ ਹੈ, ਤਾਂ ਏ div ਵਰਤਣ ਲਈ ਵਧੀਆ ਹੈ, ਨਾਲ ਪੇਅਰ ਕੀਤਾ ਗਿਆ ਹੈ ARIA (ਪਹੁੰਚਯੋਗ ਅਮੀਰ ਇੰਟਰਨੈੱਟ ਐਪਲੀਕੇਸ਼ਨ). ਅਸੀਂ ਬਾਅਦ ਦੀ ਪੋਸਟ ਵਿੱਚ ARIA ਵਿੱਚ ਡੂੰਘੀ ਗੋਤਾਖੋਰੀ ਕਰ ਸਕਦੇ ਹਾਂ। ਹੁਣ ਲਈ ਆਓ ਫੋਕਸ ਕਰੀਏ...ਦੇਖੋ ਕਿ ਮੈਂ ਉੱਥੇ ਕੀ ਕੀਤਾ...ਇਸ CSS ਸੂਡੋ ਕਲਾਸ 'ਤੇ।

The :focus-within ਸੂਡੋ ਕਲਾਸ ਤੁਹਾਨੂੰ ਇੱਕ ਤੱਤ ਦੀ ਚੋਣ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ ਜਦੋਂ ਇਸ ਵਿੱਚ ਸ਼ਾਮਲ ਕਿਸੇ ਵੀ ਉਤਰਾਧਿਕਾਰੀ ਤੱਤ ਵਿੱਚ ਫੋਕਸ ਹੁੰਦਾ ਹੈ।

:focus-within ਐਕਸ਼ਨ ਵਿੱਚ!

HTML

<form>
  <div>
    <label for="firstName">First Name</label><input id="firstName" type="text">
  </div>
  <div>
    <label for="lastName">Last Name</label><input id="lastName" type="text">
  </div>
  <div>
    <label for="phone">Phone Number</label><input id="phone" type="text">
  </div>
  <div>
    <label for="message">Message</label><textarea id="message"></textarea>
  </div>
</form>

CSS

form:focus-within {
  background: #ff7300;
  color: black;
  padding: 10px;
}

ਉਪਰੋਕਤ ਉਦਾਹਰਨ ਕੋਡ ਸੰਤਰੀ ਰੰਗ ਦਾ ਬੈਕਗ੍ਰਾਉਂਡ ਰੰਗ ਜੋੜੇਗਾ, ਕੁਝ ਪੈਡਿੰਗ ਜੋੜ ਦੇਵੇਗਾ, ਅਤੇ ਲੇਬਲ ਦੇ ਰੰਗ ਨੂੰ ਕਾਲੇ ਵਿੱਚ ਬਦਲ ਦੇਵੇਗਾ।

ਅੰਤਮ ਉਤਪਾਦ ਹੇਠਾਂ ਕੁਝ ਦਿਖਦਾ ਹੈ. ਬੇਸ਼ੱਕ ਸਟਾਈਲਿੰਗ ਨੂੰ ਬਦਲਣ ਦੀਆਂ ਸੰਭਾਵਨਾਵਾਂ ਬੇਅੰਤ ਹਨ, ਪਰ ਇਹ ਤੁਹਾਨੂੰ ਵੈੱਬ ਨੂੰ ਹਰ ਕਿਸੇ ਲਈ ਵਧੇਰੇ ਪਹੁੰਚਯੋਗ ਬਣਾਉਣ ਲਈ ਇੱਕ ਚੰਗੇ ਮਾਰਗ 'ਤੇ ਲੈ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ!

ਵਰਤਣ ਲਈ ਇਕ ਹੋਰ ਵਰਤੋਂ ਦਾ ਕੇਸ :focus-within ਘੱਟ ਨਜ਼ਰ ਵਾਲੇ ਉਪਭੋਗਤਾਵਾਂ ਲਈ ਲੇਬਲਾਂ ਨੂੰ ਬੋਲਡ, ਇੱਕ ਵੱਖਰਾ ਰੰਗ, ਜਾਂ ਉਹਨਾਂ ਨੂੰ ਵੱਡਾ ਕਰਨਾ ਹੋਵੇਗਾ। ਇਸਦੇ ਲਈ ਉਦਾਹਰਨ ਕੋਡ ਹੇਠਾਂ ਕੁਝ ਦਿਖਾਈ ਦੇਵੇਗਾ।

HTML

<form>
  <h1>:focus-within part 2!</h1>
  <label for="firstName">First Name: <input name="firstName" type="text" /></label>
  <label for="lastName">Last Name: <input name="lastName" type="text" /></label>
  <label for="phone">Phone number: <input type="tel" id="phone" /></label>
  <label for="message">Message: <textarea name="message" id="message"/></textarea></label>
</form>

CSS

label {
  display: block;
  margin-right: 10px;
  padding-bottom: 15px;
}

label:focus-within {
  font-weight: bold;
  color: red;
  font-size: 1.6em;
}

:focus-within ਦੇ ਅਨੁਸਾਰ ਬੋਰਡ ਭਰ ਵਿੱਚ ਬਹੁਤ ਵਧੀਆ ਬਰਾਊਜ਼ਰ ਸਪੋਰਟ ਵੀ ਹੈ ਕੀ ਮੈਂ ਵਰਤ ਸਕਦਾ ਹਾਂ?.

ਸਿੱਟਾ

ਅਦਭੁਤ, ਪਹੁੰਚਯੋਗ ਉਪਭੋਗਤਾ ਅਨੁਭਵ ਬਣਾਉਣਾ ਹਮੇਸ਼ਾਂ ਇੱਕ ਪ੍ਰਮੁੱਖ ਤਰਜੀਹ ਹੋਣੀ ਚਾਹੀਦੀ ਹੈ ਜਦੋਂ ਸੌਫਟਵੇਅਰ ਸ਼ਿਪਿੰਗ ਕਰਦੇ ਹੋ, ਨਾ ਸਿਰਫ ਬਾਹਰੀ ਤੌਰ 'ਤੇ ਬਲਕਿ ਅੰਦਰੂਨੀ ਤੌਰ 'ਤੇ ਵੀ। ਸਾਨੂੰ ਡਿਵੈਲਪਰ ਹੋਣ ਦੇ ਨਾਤੇ, ਸੀਨੀਅਰ ਲੀਡਰਸ਼ਿਪ ਤੱਕ ਸਾਰੇ ਤਰੀਕੇ ਨਾਲ ਦੂਜਿਆਂ ਨੂੰ ਦਰਪੇਸ਼ ਚੁਣੌਤੀਆਂ ਬਾਰੇ ਜਾਣੂ ਹੋਣ ਦੀ ਲੋੜ ਹੈ ਅਤੇ ਇਸ ਨੂੰ ਇੱਕ ਬਿਹਤਰ ਸਥਾਨ ਬਣਾਉਣ ਲਈ ਅਸੀਂ ਵੈੱਬ ਪਲੇਟਫਾਰਮ ਦੇ ਰਾਜਦੂਤ ਕਿਵੇਂ ਬਣ ਸਕਦੇ ਹਾਂ।

ਸੰਮਲਿਤ ਥਾਂਵਾਂ ਬਣਾਉਣ ਲਈ ਸਿਮੈਂਟਿਕ ਮਾਰਕਅੱਪ ਅਤੇ CSS ਵਰਗੀ ਤਕਨਾਲੋਜੀ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਵੈੱਬ ਨੂੰ ਇੱਕ ਬਿਹਤਰ ਸਥਾਨ ਬਣਾਉਣ ਵਿੱਚ ਇੱਕ ਮਹੱਤਵਪੂਰਨ ਹਿੱਸਾ ਹੈ, ਆਓ ਅੱਗੇ ਵਧਦੇ ਰਹੀਏ ਅਤੇ ਜੀਵਨ ਬਦਲਦੇ ਰਹੀਏ।

CSS-Tricks on 'ਤੇ ਇੱਥੇ ਇੱਕ ਹੋਰ ਵਧੀਆ ਸਰੋਤ ਦੇਖੋ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ:focus-within.

• ਐਸਈਓ ਦੁਆਰਾ ਸੰਚਾਲਿਤ ਸਮੱਗਰੀ ਅਤੇ PR ਵੰਡ. ਅੱਜ ਹੀ ਵਧਾਓ।
• PlatoData.Network ਵਰਟੀਕਲ ਜਨਰੇਟਿਵ ਏ.ਆਈ. ਆਪਣੇ ਆਪ ਨੂੰ ਸਮਰੱਥ ਬਣਾਓ। ਇੱਥੇ ਪਹੁੰਚ ਕਰੋ।
• ਪਲੈਟੋਏਆਈਸਟ੍ਰੀਮ। Web3 ਇੰਟੈਲੀਜੈਂਸ। ਗਿਆਨ ਵਧਾਇਆ। ਇੱਥੇ ਪਹੁੰਚ ਕਰੋ।
• ਪਲੇਟੋਈਐਸਜੀ. ਕਾਰਬਨ, ਕਲੀਨਟੈਕ, ਊਰਜਾ, ਵਾਤਾਵਰਨ, ਸੂਰਜੀ, ਕੂੜਾ ਕਰਕਟ ਪ੍ਰਬੰਧਨ. ਇੱਥੇ ਪਹੁੰਚ ਕਰੋ।
• ਪਲੈਟੋ ਹੈਲਥ। ਬਾਇਓਟੈਕ ਅਤੇ ਕਲੀਨਿਕਲ ਟਰਾਇਲ ਇੰਟੈਲੀਜੈਂਸ। ਇੱਥੇ ਪਹੁੰਚ ਕਰੋ।
• ਸਰੋਤ: https://css-tricks.com/accessible-forms-with-pseudo-classes/