ഹായ്, അവിടെയുള്ള എല്ലാ മികച്ച ഡവലപ്പർമാരും! ഈ പോസ്റ്റിൽ, സെമാൻ്റിക് എച്ച്ടിഎംഎൽ ഉപയോഗിച്ച് ഒരു ലളിതമായ കോൺടാക്റ്റ് ഫോം സൃഷ്‌ടിക്കുന്നതിലൂടെയും എന്നറിയപ്പെടുന്ന ഒരു ആകർഷണീയമായ CSS വ്യാജ ക്ലാസിലൂടെയും ഞാൻ നിങ്ങളെ കൊണ്ടുപോകാൻ പോകുന്നു. :focus-within. ദി :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 ഉം ഉപയോഗിക്കുമ്പോൾ മറഞ്ഞിരിക്കുന്ന ധാരാളം രത്നങ്ങൾ ഉണ്ട്, ഇത് അവയിലൊന്നാണ്. അവഗണിക്കപ്പെട്ട പല കാര്യങ്ങളും ഡിഫോൾട്ടായി ആക്‌സസ് ചെയ്യാൻ കഴിയും, ഉദാഹരണത്തിന്, സെമാൻ്റിക് മാർക്ക്അപ്പ് ഡിഫോൾട്ടായി ആക്‌സസ് ചെയ്യാവുന്നതും എല്ലായ്‌പ്പോഴും ഡിവിഷനുകളിൽ ഉപയോഗിക്കേണ്ടതുമാണ്.

<header>
  <h1>Semantic Markup</h1>
  <nav>
    <ul>
      <li><a href="/ml/">Home</a></li>
      <li><a href="/ml/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>

ദി header, nav, main, section, aside, ഒപ്പം footer എല്ലാം സെമാൻ്റിക് ഘടകങ്ങളാണ്. ദി h1 ഒപ്പം ul അർത്ഥപരവും ആക്സസ് ചെയ്യാവുന്നതുമാണ്.

സൃഷ്ടിക്കേണ്ട ഒരു ഇഷ്‌ടാനുസൃത ഘടകം ഇല്ലെങ്കിൽ, എ div ഉപയോഗിക്കുന്നതിന് നല്ലതാണ്, ജോടിയാക്കിയത് ARIA (ആക്സസിബിൾ റിച്ച് ഇൻ്റർനെറ്റ് ആപ്ലിക്കേഷനുകൾ). പിന്നീടുള്ള പോസ്റ്റിൽ നമുക്ക് ARIA-യിലേക്ക് ആഴത്തിൽ ഇറങ്ങാം. ഇപ്പോൾ നമുക്ക് ശ്രദ്ധ കേന്ദ്രീകരിക്കാം...ഞാൻ അവിടെ എന്താണ് ചെയ്തതെന്ന് നോക്കാം...ഈ CSS സ്യൂഡോ ക്ലാസ്സിൽ.

ദി :focus-within ഏതെങ്കിലും ഡിസെൻഡൻ്റ് എലമെൻ്റിൽ ഫോക്കസ് ഉള്ളപ്പോൾ ഒരു ഘടകം തിരഞ്ഞെടുക്കാൻ pseudo ക്ലാസ് നിങ്ങളെ അനുവദിക്കുന്നു.

:focus-within പ്രവർത്തനത്തിൽ!

എച്ച്ടിഎംഎൽ

<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>

സി.എസ്.എസ്

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

മുകളിലെ ഉദാഹരണ കോഡ് ഓറഞ്ചിൻ്റെ പശ്ചാത്തല വർണ്ണം ചേർക്കുകയും കുറച്ച് പാഡിംഗ് ചേർക്കുകയും ലേബലുകളുടെ നിറം കറുപ്പിലേക്ക് മാറ്റുകയും ചെയ്യും.

അന്തിമ ഉൽപ്പന്നം താഴെ കാണുന്നത് പോലെയാണ്. തീർച്ചയായും, സ്‌റ്റൈലിംഗ് മാറ്റാനുള്ള സാധ്യതകൾ അനന്തമാണ്, എന്നാൽ ഇത് എല്ലാവർക്കുമായി വെബിനെ കൂടുതൽ ആക്‌സസ് ചെയ്യാൻ കഴിയുന്ന ഒരു നല്ല ട്രാക്കിൽ എത്തിക്കും!

ഉപയോഗിക്കുന്നതിനുള്ള മറ്റൊരു ഉപയോഗ കേസ് :focus-within ലേബലുകൾ ബോൾഡ്, മറ്റൊരു വർണ്ണം അല്ലെങ്കിൽ കാഴ്ച കുറവുള്ള ഉപയോക്താക്കൾക്കായി വലുതാക്കുക. അതിനുള്ള ഉദാഹരണ കോഡ് ചുവടെയുള്ളതുപോലെ കാണപ്പെടും.

എച്ച്ടിഎംഎൽ

<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>

സി.എസ്.എസ്

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

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

:focus-within അതനുസരിച്ച് ബോർഡിലുടനീളം മികച്ച ബ്രൗസർ പിന്തുണയും ഉണ്ട് എനിക്ക് ഉപയോഗിക്കാമോ?.

തീരുമാനം

സോഫ്‌റ്റ്‌വെയർ ഷിപ്പിംഗ് ചെയ്യുമ്പോൾ അതിശയകരവും ആക്‌സസ് ചെയ്യാവുന്നതുമായ ഉപയോക്തൃ അനുഭവം സൃഷ്‌ടിക്കുന്നത് എല്ലായ്പ്പോഴും ഒരു മുൻഗണന ആയിരിക്കണം, ബാഹ്യമായി മാത്രമല്ല, ആന്തരികമായും. ഡെവലപ്പർമാർ എന്ന നിലയിൽ, മുതിർന്ന നേതൃത്വം വരെയുള്ള എല്ലാ വഴികളും മറ്റുള്ളവർ അഭിമുഖീകരിക്കുന്ന വെല്ലുവിളികളെക്കുറിച്ചും വെബ് പ്ലാറ്റ്‌ഫോമിനെ മികച്ച സ്ഥലമാക്കി മാറ്റുന്നതിന് ഞങ്ങൾക്ക് എങ്ങനെ അംബാസഡർമാരാകാമെന്നും അറിയേണ്ടതുണ്ട്.

ഇൻക്ലൂസീവ് സ്‌പെയ്‌സുകൾ സൃഷ്‌ടിക്കാൻ സെമാൻ്റിക് മാർക്ക്അപ്പ്, സിഎസ്എസ് എന്നിവ പോലുള്ള സാങ്കേതികവിദ്യ ഉപയോഗിക്കുന്നത് വെബിനെ മികച്ച സ്ഥലമാക്കുന്നതിൽ നിർണായകമായ ഭാഗമാണ്, നമുക്ക് മുന്നോട്ട് പോകാനും ജീവിതത്തെ മാറ്റാനും തുടരാം.

CSS-ട്രിക്കുകളിൽ മറ്റൊരു മികച്ച ഉറവിടം ഇവിടെ പരിശോധിക്കുക ഉപയോഗിക്കുന്നത് :focus-inthin.

• SEO പവർ ചെയ്ത ഉള്ളടക്കവും PR വിതരണവും. ഇന്ന് ആംപ്ലിഫൈഡ് നേടുക.
• PlatoData.Network ലംബ ജനറേറ്റീവ് Ai. സ്വയം ശാക്തീകരിക്കുക. ഇവിടെ പ്രവേശിക്കുക.
• PlatoAiStream. Web3 ഇന്റലിജൻസ്. വിജ്ഞാനം വർധിപ്പിച്ചു. ഇവിടെ പ്രവേശിക്കുക.
• പ്ലേറ്റോഇഎസ്ജി. കാർബൺ, ക്ലീൻ ടെക്, ഊർജ്ജം, പരിസ്ഥിതി, സോളാർ, മാലിന്യ സംസ്കരണം. ഇവിടെ പ്രവേശിക്കുക.
• പ്ലേറ്റോ ഹെൽത്ത്. ബയോടെക് ആൻഡ് ക്ലിനിക്കൽ ട്രയൽസ് ഇന്റലിജൻസ്. ഇവിടെ പ്രവേശിക്കുക.
• അവലംബം: https://css-tricks.com/accessible-forms-with-pseudo-classes/