CSS-இல் அணுகல்தன்மை: WCAG இணக்கத்திற்கான ஒரு நடைமுறைக் வழிகாட்டி

இன்றைய பெருகிவரும் டிஜிட்டல் உலகில், வலை அணுகல்தன்மையை உறுதி செய்வது ஒரு சிறந்த நடைமுறை மட்டுமல்ல, அது ஒரு நெறிமுறைக் கடமையாகும். அணுகக்கூடிய வலைத்தளங்கள் அனைத்து பயனர்களுக்கும், அவர்களின் திறன்களைப் பொருட்படுத்தாமல், சமமான அணுகலையும் வாய்ப்பையும் வழங்குகின்றன. இந்த வழிகாட்டி, வலை உள்ளடக்க அணுகல்தன்மை வழிகாட்டுதல்களை (WCAG) பின்பற்றி, அணுகக்கூடிய மற்றும் உள்ளடக்கிய வலை அனுபவங்களை உருவாக்க CSS-ஐ எவ்வாறு பயன்படுத்துவது என்பதில் கவனம் செலுத்துகிறது.

WCAG என்றால் என்ன, அது ஏன் முக்கியமானது?

வலை உள்ளடக்க அணுகல்தன்மை வழிகாட்டுதல்கள் (WCAG) என்பது குறைபாடுகள் உள்ளவர்களுக்கு வலை உள்ளடக்கத்தை மேலும் அணுகக்கூடியதாக மாற்றுவதற்கான சர்வதேச அளவில் அங்கீகரிக்கப்பட்ட பரிந்துரைகளின் தொகுப்பாகும். உலகளாவிய வலை கூட்டமைப்பு (W3C) உருவாக்கிய WCAG, தனிநபர்கள், நிறுவனங்கள் மற்றும் அரசாங்கங்களின் தேவைகளைப் பூர்த்தி செய்யும் வலை அணுகல்தன்மைக்கான ஒரு பகிரப்பட்ட தரத்தை வழங்குகிறது. WCAG முக்கியமானது ஏனென்றால்:

இது உள்ளடக்கத்தை ஊக்குவிக்கிறது, அனைவரும் உங்கள் வலைத்தளத்தை அணுகவும் பயன்படுத்தவும் முடியும் என்பதை உறுதி செய்கிறது.
இது குறைபாடுகள் உள்ளவர்களுக்கு மட்டுமல்ல, அனைத்து பயனர்களுக்கும் பயனர் அனுபவத்தை மேம்படுத்துகிறது.
இது உங்கள் வலைத்தளத்தின் SEO (தேடுபொறி உகப்பாக்கம்) ஐ மேம்படுத்தும்.
இது சில பிராந்தியங்களில் சட்டப்பூர்வமாக தேவைப்படலாம். எடுத்துக்காட்டாக, பல நாடுகளில் அரசாங்க வலைத்தளங்கள் மற்றும் சில தனியார் துறை நிறுவனங்களுக்கு வலை அணுகல்தன்மையைக் கட்டாயப்படுத்தும் சட்டங்கள் உள்ளன. அமெரிக்காவில் உள்ள மாற்றுத்திறனாளிகள் சட்டம் (ADA) வலைத்தளங்களுக்கும் பொருந்தும் என்று விளக்கப்பட்டுள்ளது. ஐரோப்பாவில், ஐரோப்பிய அணுகல்தன்மை சட்டம் வலைத்தளங்கள் மற்றும் மொபைல் பயன்பாடுகள் உட்பட பரந்த அளவிலான தயாரிப்புகள் மற்றும் சேவைகளுக்கான அணுகல்தன்மை தேவைகளை அமைக்கிறது. ஆஸ்திரேலியாவில் ஊனமுற்றோர் பாகுபாடு சட்டம் உள்ளது, இது வலை அணுகல்தன்மையையும் உள்ளடக்கியது.
இது சமூகப் பொறுப்பை வெளிப்படுத்துகிறது மற்றும் உங்கள் பிராண்டின் நற்பெயரை வலுப்படுத்துகிறது.

WCAG கொள்கைகள்: POUR

WCAG நான்கு முக்கிய கொள்கைகளை அடிப்படையாகக் கொண்டது, அவை பெரும்பாலும் POUR என்ற சுருக்கத்தால் நினைவுகூரப்படுகின்றன:

உணரக்கூடியது (Perceivable): தகவல் மற்றும் பயனர் இடைமுகக் கூறுகள் பயனர்கள் உணரக்கூடிய வழிகளில் வழங்கப்பட வேண்டும்.
இயக்கக்கூடியது (Operable): பயனர் இடைமுகக் கூறுகள் மற்றும் வழிசெலுத்தல் இயக்கக்கூடியதாக இருக்க வேண்டும்.
புரிந்துகொள்ளக்கூடியது (Understandable): தகவல் மற்றும் பயனர் இடைமுகத்தின் செயல்பாடு புரிந்துகொள்ளக்கூடியதாக இருக்க வேண்டும்.
வலுவானது (Robust): உள்ளடக்கம் உதவி தொழில்நுட்பங்கள் உட்பட பல்வேறு பயனர் முகவர்களால் நம்பகத்தன்மையுடன் விளக்கப்படக்கூடிய அளவுக்கு வலுவாக இருக்க வேண்டும்.

அணுகல்தன்மைக்கான CSS நுட்பங்கள்

WCAG இணக்கத்தை அடைவதில் CSS ஒரு முக்கிய பங்கு வகிக்கிறது. கருத்தில் கொள்ள வேண்டிய சில முக்கிய CSS நுட்பங்கள் இங்கே:

1. செமாண்டிக் HTML மற்றும் CSS

செமாண்டிக் HTML கூறுகளை சரியாகப் பயன்படுத்துவது உங்கள் உள்ளடக்கத்திற்கு அர்த்தத்தையும் கட்டமைப்பையும் வழங்குகிறது, இது திரை வாசிப்பான்கள் மற்றும் பிற உதவி தொழில்நுட்பங்களுக்கு மேலும் அணுகக்கூடியதாக ஆக்குகிறது. CSS பின்னர் இந்த செமாண்டிக் கூறுகளின் தோற்றத்தை மேம்படுத்துகிறது.

எடுத்துக்காட்டு:

எல்லாவற்றிற்கும் பொதுவான <div> கூறுகளைப் பயன்படுத்துவதற்குப் பதிலாக, <article>, <nav>, <aside>, <header>, <footer>, <main>, <section>, மற்றும் தலைப்பு குறிச்சொற்கள் (<h1> முதல் <h6> வரை) போன்ற செமாண்டிக் கூறுகளைப் பயன்படுத்தவும்.

HTML:

<article>
  <h2>கட்டுரை தலைப்பு</h2>
  <p>கட்டுரை உள்ளடக்கம் இங்கே வரும்.</p>
</article>

CSS:

article {
  margin-bottom: 20px;
}

h2 {
  font-size: 1.5em;
  font-weight: bold;
  margin-bottom: 10px;
}

<article> மற்றும் <h2> ஐப் பயன்படுத்துவதன் மூலம், நீங்கள் உள்ளடக்கத்திற்கு செமாண்டிக் அர்த்தத்தை வழங்குகிறீர்கள், இது உதவி தொழில்நுட்பங்கள் கட்டமைப்பு மற்றும் சூழலைப் புரிந்துகொள்ள உதவுகிறது.

2. வண்ணம் மற்றும் வேறுபாடு

குறைந்த பார்வை அல்லது வண்ணக் குருடு உள்ள பயனர்களுக்கு உள்ளடக்கத்தைப் படிக்கக்கூடியதாக மாற்ற, உரை மற்றும் பின்னணி வண்ணங்களுக்கு இடையில் போதுமான வண்ண வேறுபாடு இருப்பதை உறுதிசெய்யவும். WCAG 2.1 நிலை AA, சாதாரண உரைக்கு குறைந்தபட்சம் 4.5:1 மற்றும் பெரிய உரைக்கு (18pt அல்லது 14pt தடித்த) 3:1 என்ற வேறுபாட்டு விகிதத்தைக் கோருகிறது.

வண்ண வேறுபாட்டைச் சரிபார்க்கும் கருவிகள்:

WebAIM's Color Contrast Checker: https://webaim.org/resources/contrastchecker/
Accessible Color Palette Builder: https://www.learnui.design/tools/accessible-color-palette-builder.html
Chrome DevTools: Chrome DevTools உள்ளமைக்கப்பட்ட வண்ண வேறுபாடு சரிபார்ப்பை வழங்குகிறது.

எடுத்துக்காட்டு:

/* நல்ல வேறுபாடு */
body {
  background-color: #000000; /* கருப்பு */
  color: #FFFFFF; /* வெள்ளை */
}

/* மோசமான வேறுபாடு */
body {
  background-color: #FFFFFF; /* வெள்ளை */
  color: #F0F0F0; /* வெளிர் சாம்பல் */
}

முதல் எடுத்துக்காட்டு நல்ல வேறுபாட்டை வழங்குகிறது, அதே நேரத்தில் இரண்டாவது எடுத்துக்காட்டு மோசமான வேறுபாட்டைக் கொண்டுள்ளது மற்றும் பல பயனர்களுக்குப் படிக்க கடினமாக இருக்கும்.

வண்ணத்திற்கு அப்பால்: தகவல்களைத் தெரிவிக்க வண்ணத்தை மட்டுமே நம்ப வேண்டாம். தகவல்கள் அனைவருக்கும் அணுகக்கூடியதாக இருப்பதை உறுதிசெய்ய, வண்ணத்துடன் கூடுதலாக உரை லேபிள்கள், ஐகான்கள் அல்லது பிற காட்சி குறிப்புகளைப் பயன்படுத்தவும். எடுத்துக்காட்டாக, தேவையான படிவ புலங்களை சிவப்பு நிறத்தில் முன்னிலைப்படுத்துவதற்குப் பதிலாக, சிவப்பு பார்டர் மற்றும் "(தேவை)" போன்ற உரை லேபிளின் கலவையைப் பயன்படுத்தவும்.

3. ஃபோகஸ் குறிகாட்டிகள்

பயனர்கள் விசைப்பலகையைப் பயன்படுத்தி (எ.கா., Tab விசையைப் பயன்படுத்தி) உங்கள் வலைத்தளத்தில் செல்லும்போது, எந்த உறுப்பு தற்போது ஃபோகஸில் உள்ளது என்பதை அவர்கள் அறிந்துகொள்ள தெளிவான காட்சி ஃபோகஸ் குறிகாட்டிகளை வழங்குவது முக்கியம். இயல்புநிலை உலாவி ஃபோகஸ் குறிகாட்டி சில சமயங்களில் போதுமானதாகவோ அல்லது கண்ணுக்கு தெரியாததாகவோ இருக்கலாம். ஃபோகஸ் குறிகாட்டியை மேலும் முக்கியத்துவம் வாய்ந்ததாக மாற்ற CSS-ஐப் பயன்படுத்தவும்.

எடுத்துக்காட்டு:a:focus, button:focus, input:focus, textarea:focus, select:focus { outline: 2px solid #007bff; /* ஒரு நீல நிற வெளிக்கோடு */ outline-offset: 2px; /* உறுப்புக்கும் வெளிக்கோட்டிற்கும் இடையே ஒரு இடைவெளியை உருவாக்குகிறது */ }

இந்த CSS குறியீடு கூறுகள் ஃபோகஸைப் பெறும்போது அவற்றுக்கு ஒரு நீல நிற வெளிக்கோட்டைச் சேர்க்கிறது. outline-offset பண்பு உறுப்புக்கும் வெளிக்கோட்டிற்கும் இடையே ஒரு சிறிய இடைவெளியைச் சேர்த்து, தெரிவுநிலையை மேம்படுத்துகிறது. பொருத்தமான மாற்றீட்டை வழங்காமல் ஃபோகஸ் குறிகாட்டியை முழுவதுமாக அகற்றுவதைத் தவிர்க்கவும், ஏனெனில் இது விசைப்பலகை பயனர்களுக்கு உங்கள் வலைத்தளத்தைப் பயன்படுத்த முடியாததாக மாற்றும்.

4. விசைப்பலகை வழிசெலுத்தல்

அனைத்து ஊடாடும் கூறுகளும் (இணைப்புகள், பொத்தான்கள், படிவ புலங்கள் போன்றவை) விசைப்பலகையைப் பயன்படுத்தி செல்லக்கூடியவை என்பதை உறுதிப்படுத்தவும். சுட்டியைப் பயன்படுத்த முடியாத பயனர்களுக்கு இது அவசியம். ஒரு தர்க்கரீதியான வழிசெலுத்தல் ஓட்டத்தை உறுதிசெய்ய HTML மூலக் குறியீட்டில் உள்ள கூறுகளின் வரிசை பக்கத்தில் உள்ள காட்சி வரிசையுடன் பொருந்த வேண்டும். ஒரு தர்க்கரீதியான விசைப்பலகை வழிசெலுத்தல் வரிசையை பராமரிக்கும் போது கூறுகளை பார்வைக்கு மறுசீரமைக்க CSS-ஐப் பயன்படுத்தவும்.

எடுத்துக்காட்டு:

CSS-ஐப் பயன்படுத்தி திரையின் வலது பக்கத்தில் ஒரு வழிசெலுத்தல் மெனுவைக் காட்ட விரும்பும் ஒரு சூழ்நிலையைக் கவனியுங்கள். இருப்பினும், அணுகல்தன்மைக்காக, திரை வாசிப்பான் பயனர்கள் முக்கிய உள்ளடக்கத்திற்கு முன் அதை எதிர்கொள்ளும் வகையில், வழிசெலுத்தல் மெனு HTML மூலக் குறியீட்டில் முதலில் தோன்ற வேண்டும் என்று நீங்கள் விரும்புகிறீர்கள்.

HTML:

<nav>
  <ul>
    <li><a href="#">முகப்பு</a></li>
    <li><a href="#">பற்றி</a></li>
    <li><a href="#">சேவைகள்</a></li>
    <li><a href="#">தொடர்புக்கு</a></li>
  </ul>
</nav>
<main>
  <h1>முக்கிய உள்ளடக்கம்</h1>
  <p>இது பக்கத்தின் முக்கிய உள்ளடக்கம்.</p>
</main>

CSS:

body {
  display: flex;
}

nav {
  order: 1; /* வழிசெலுத்தலை வலது பக்கம் நகர்த்துகிறது */
  width: 200px;
  padding: 20px;
}

main {
  order: 0; /* முக்கிய உள்ளடக்கத்தை இடது பக்கம் வைத்திருக்கிறது */
  flex: 1;
  padding: 20px;
}

CSS-இல் order பண்பைப் பயன்படுத்துவதன் மூலம், வழிசெலுத்தல் மெனுவை அதன் அசல் நிலையை HTML மூலக் குறியீட்டில் பராமரிக்கும் போது திரையின் வலது பக்கத்திற்கு பார்வைக்கு மறுசீரமைக்கலாம். இது விசைப்பலகை பயனர்கள் முதலில் வழிசெலுத்தல் மெனுவை எதிர்கொள்வதை உறுதி செய்கிறது, இது அணுகல்தன்மையை மேம்படுத்துகிறது.

5. உள்ளடக்கத்தை பொறுப்புடன் மறைத்தல்

சில நேரங்களில் நீங்கள் காட்சி காட்சியிலிருந்து உள்ளடக்கத்தை மறைக்க வேண்டும், ஆனால் அதை திரை வாசிப்பான்களுக்கு அணுகக்கூடியதாக வைத்திருக்க வேண்டும். எடுத்துக்காட்டாக, ஒரு ஐகானால் மட்டுமே பார்வைக்கு குறிப்பிடப்படும் ஒரு இணைப்பு அல்லது பொத்தானுக்கு கூடுதல் சூழலை வழங்க விரும்பலாம். display: none அல்லது visibility: hidden ஐப் பயன்படுத்துவதைத் தவிர்க்கவும், ஏனெனில் இந்த பண்புகள் காட்சி பயனர்கள் மற்றும் திரை வாசிப்பான்கள் இரண்டிலிருந்தும் உள்ளடக்கத்தை மறைக்கும். அதற்கு பதிலாக, உதவி தொழில்நுட்பங்களுக்கு அணுகக்கூடியதாக வைத்திருக்கும் போது உள்ளடக்கத்தை பார்வைக்கு மறைக்கும் ஒரு நுட்பத்தைப் பயன்படுத்தவும்.

எடுத்துக்காட்டு:

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

இந்த CSS வகுப்பு உறுப்பை திரை வாசிப்பான்களுக்கு அணுகக்கூடியதாக வைத்திருக்கும் போது அதை பார்வைக்கு மறைக்கிறது. திரை வாசிப்பான்களால் படிக்கப்பட வேண்டும் ஆனால் பார்வைக்கு காட்டப்படக்கூடாது என்று நீங்கள் விரும்பும் உரைக்கு இந்த வகுப்பைப் பயன்படுத்தவும்.

HTML எடுத்துக்காட்டு:

<a href="#">திருத்து <span class="sr-only">உருப்படி</span></a>

இந்த எடுத்துக்காட்டில், "உருப்படி" என்ற உரை பார்வைக்கு மறைக்கப்பட்டுள்ளது ஆனால் திரை வாசிப்பான்களால் படிக்கப்படும், இது "திருத்து" இணைப்புக்கு சூழலை வழங்குகிறது.

ARIA பண்புக்கூறுகள் (Accessible Rich Internet Applications): டைனமிக் உள்ளடக்கம் மற்றும் சிக்கலான UI கூறுகளின் அணுகல்தன்மையை மேம்படுத்த ARIA பண்புக்கூறுகளை বিচక్షణையுடன் பயன்படுத்தவும். ARIA பண்புக்கூறுகள் உதவி தொழில்நுட்பங்களுக்கு கூடுதல் செமாண்டிக் தகவல்களை வழங்குகின்றன. இருப்பினும், செமாண்டிக் HTML மூலம் தீர்க்கக்கூடிய அணுகல்தன்மை சிக்கல்களை சரிசெய்ய ARIA பண்புக்கூறுகளைப் பயன்படுத்துவதைத் தவிர்க்கவும். எடுத்துக்காட்டாக, தனிப்பயன் விட்ஜெட்களை வரையறுக்கவும், உள்ளடக்கம் மாறும் போது திரை வாசிப்பான்களுக்கு நிலை புதுப்பிப்புகளை வழங்கவும் ARIA பாத்திரங்கள் மற்றும் பண்புக்கூறுகளைப் பயன்படுத்தவும்.

6. பதிலளிக்கக்கூடிய வடிவமைப்பு மற்றும் அணுகல்தன்மை

உங்கள் வலைத்தளம் பதிலளிக்கக்கூடியது மற்றும் வெவ்வேறு திரை அளவுகள் மற்றும் சாதனங்களுக்கு ஏற்றது என்பதை உறுதிப்படுத்தவும். மொபைல் சாதனங்கள் அல்லது டேப்லெட்டுகளில் உதவி தொழில்நுட்பங்களைப் பயன்படுத்தக்கூடிய குறைபாடுகள் உள்ள பயனர்களுக்கு இது முக்கியம். திரை அளவு மற்றும் நோக்குநிலையின் அடிப்படையில் உங்கள் உள்ளடக்கத்தின் தளவமைப்பு மற்றும் விளக்கக்காட்சியை சரிசெய்ய CSS மீடியா வினவல்களைப் பயன்படுத்தவும்.

எடுத்துக்காட்டு:

@media (max-width: 768px) {
  nav ul {
    flex-direction: column; /* சிறிய திரைகளில் வழிசெலுத்தல் உருப்படிகளை செங்குத்தாக அடுக்குகிறது */
  }
}

இந்த CSS குறியீடு ஒரு மீடியா வினவலைப் பயன்படுத்தி சிறிய திரைகளில் வழிசெலுத்தல் உருப்படிகளின் திசையை செங்குத்தாக மாற்றுகிறது, இது மொபைல் சாதனங்களில் வழிசெலுத்தலை எளிதாக்குகிறது.

7. அனிமேஷன்கள் மற்றும் இயக்கம்

அதிகப்படியான அல்லது மோசமாக செயல்படுத்தப்பட்ட அனிமேஷன்கள் சில பயனர்களுக்கு வலிப்பு அல்லது இயக்க நோயை ஏற்படுத்தக்கூடும். குறைக்கப்பட்ட இயக்கத்தை விரும்பும் பயனர்களுக்கான அனிமேஷன்களைக் குறைக்க அல்லது முடக்க CSS-ஐப் பயன்படுத்தவும். prefers-reduced-motion மீடியா வினவல், கணினி பயன்படுத்தும் அனிமேஷன் அல்லது இயக்கத்தின் அளவைக் குறைக்க பயனர் கோரியுள்ளாரா என்பதைக் கண்டறிய உங்களை அனுமதிக்கிறது.

எடுத்துக்காட்டு:

@media (prefers-reduced-motion: reduce) {
  .animated-element {
    animation: none !important;
    transition: none !important;
  }
}

இந்த CSS குறியீடு தங்கள் இயக்க முறைமையில் "குறைக்கப்பட்ட இயக்கம்" அமைப்பை இயக்கியுள்ள பயனர்களுக்கான அனிமேஷன்கள் மற்றும் மாற்றங்களை முடக்குகிறது. உங்கள் வலைத்தளத்தில் அனிமேஷன்களை கைமுறையாக முடக்க பயனர்களை அனுமதிக்கும் ஒரு கட்டுப்பாட்டை வழங்குவதைக் கருத்தில் கொள்ளுங்கள்.

8. உதவி தொழில்நுட்பங்களுடன் சோதனை செய்தல்

உங்கள் வலைத்தளம் அணுகக்கூடியது என்பதை உறுதி செய்வதற்கான மிகச் சிறந்த வழி, திரை வாசிப்பான்கள், திரை உருப்பெருக்கிகள் மற்றும் பேச்சு அங்கீகார மென்பொருள் போன்ற உதவி தொழில்நுட்பங்களுடன் அதைச் சோதிப்பதாகும். உங்கள் வலைத்தளத்தின் அணுகல்தன்மை பற்றிய விரிவான புரிதலைப் பெற பல்வேறு உதவி தொழில்நுட்பங்களைப் பயன்படுத்தவும்.

பிரபலமான திரை வாசிப்பான்கள்:

NVDA (NonVisual Desktop Access): விண்டோஸிற்கான ஒரு இலவச மற்றும் திறந்த மூல திரை வாசிப்பான்.
JAWS (Job Access With Speech): விண்டோஸிற்கான ஒரு பிரபலமான வணிக திரை வாசிப்பான்.
VoiceOver: macOS மற்றும் iOS-க்கான உள்ளமைக்கப்பட்ட திரை வாசிப்பான்.

கூடுதல் சோதனை குறிப்புகள்:

விசைப்பலகை வழிசெலுத்தல்: அனைத்து ஊடாடும் கூறுகளும் விசைப்பலகையைப் பயன்படுத்தி அடையக்கூடியவை என்பதையும், ஃபோகஸ் வரிசை தர்க்கரீதியானது என்பதையும் சோதிக்கவும்.
படிவ அணுகல்தன்மை: படிவ புலங்கள் சரியாக லேபிளிடப்பட்டுள்ளன என்பதையும், பிழைச் செய்திகள் தெளிவாகவும் எளிதில் புரிந்துகொள்ளக்கூடியதாகவும் இருப்பதை உறுதி செய்யவும்.
பட மாற்று உரை: அனைத்து படங்களுக்கும் படத்தின் உள்ளடக்கம் மற்றும் செயல்பாட்டை துல்லியமாக தெரிவிக்கும் விளக்கமான மாற்று உரை உள்ளதா என்பதை சரிபார்க்கவும்.
டைனமிக் உள்ளடக்கம்: டைனமிக் உள்ளடக்க புதுப்பிப்புகள் திரை வாசிப்பான்களுக்கு சரியாக அறிவிக்கப்படுகின்றனவா என்பதைச் சோதிக்கவும்.

அணுகல்தன்மைக்கான மேம்பட்ட CSS நுட்பங்கள்

1. தீம் அமைப்பதற்கான தனிப்பயன் பண்புகள் (CSS மாறிகள்)

அதிக மாறுபாடு விருப்பங்களுடன் அணுகக்கூடிய தீம்களை உருவாக்க CSS தனிப்பயன் பண்புகளை (மாறிகள்) பயன்படுத்தவும். இது பயனர்கள் தங்கள் தனிப்பட்ட தேவைகளைப் பூர்த்தி செய்ய உங்கள் வலைத்தளத்தின் தோற்றத்தைத் தனிப்பயனாக்க அனுமதிக்கிறது.

எடுத்துக்காட்டு:

:root {
  --text-color: #333;
  --background-color: #fff;
  --link-color: #007bff;
}

body {
  color: var(--text-color);
  background-color: var(--background-color);
}

a {
  color: var(--link-color);
}

/* அதிக மாறுபாடு தீம் */
.high-contrast {
  --text-color: #fff;
  --background-color: #000;
  --link-color: #ff0;
}

இந்த எடுத்துக்காட்டு உரை நிறம், பின்னணி நிறம் மற்றும் இணைப்பு நிறத்திற்கான CSS தனிப்பயன் பண்புகளை வரையறுக்கிறது. .high-contrast வகுப்பு இந்த மாறிகளை மீறி ஒரு அதிக மாறுபாடு தீம் உருவாக்குகிறது. பின்னர் நீங்கள் தீம்களுக்கு இடையில் மாற <body> உறுப்பில் .high-contrast வகுப்பை மாற்ற JavaScript-ஐப் பயன்படுத்தலாம்.

2. அணுகக்கூடிய தளவமைப்புகளுக்கு CSS Grid மற்றும் Flexbox

CSS Grid மற்றும் Flexbox ஆகியவை அணுகக்கூடிய மற்றும் பதிலளிக்கக்கூடிய தளவமைப்புகளை உருவாக்கப் பயன்படும் சக்திவாய்ந்த தளவமைப்பு கருவிகளாகும். இருப்பினும், கூறுகளின் காட்சி வரிசை DOM வரிசையுடன் பொருந்துவதை உறுதிசெய்ய அவற்றை கவனமாகப் பயன்படுத்துவது முக்கியம்.

எடுத்துக்காட்டு:

Flexbox அல்லது Grid-ஐப் பயன்படுத்தும்போது, டேப் வரிசை தர்க்கரீதியாக இருப்பதை உறுதிசெய்யவும். order பண்பு கவனமாகப் பயன்படுத்தப்படாவிட்டால் டேப் வரிசையை சீர்குலைக்கும்.

3. `clip-path` மற்றும் அணுகல்தன்மை

`clip-path` பண்பு பார்வைக்கு சுவாரஸ்யமான வடிவங்கள் மற்றும் விளைவுகளை உருவாக்கப் பயன்படுத்தப்படலாம். இருப்பினும், `clip-path` ஐப் பயன்படுத்தும்போது எச்சரிக்கையாக இருங்கள், ஏனெனில் அது சில நேரங்களில் உள்ளடக்கத்தை மறைக்கலாம் அல்லது அதனுடன் தொடர்புகொள்வதை கடினமாக்கலாம். கிளிப் செய்யப்பட்ட உள்ளடக்கம் அணுகக்கூடியதாக இருப்பதையும், கிளிப்பிங் விசைப்பலகை வழிசெலுத்தல் அல்லது திரை வாசிப்பான் அணுகலில் தலையிடாது என்பதையும் உறுதிப்படுத்தவும்.

4. `content` பண்பு மற்றும் அணுகல்தன்மை

CSS-இல் உள்ள `content` பண்பு ஒரு உறுப்புக்கு முன்னரோ அல்லது பின்னரோ உருவாக்கப்பட்ட உள்ளடக்கத்தைச் செருகப் பயன்படுத்தப்படலாம். இருப்பினும், உருவாக்கப்பட்ட உள்ளடக்கம் எப்போதும் திரை வாசிப்பான்களுக்கு அணுகக்கூடியதாக இருக்காது. `content` பண்பை বিচక్షణையுடன் பயன்படுத்தவும் மற்றும் உதவி தொழில்நுட்பங்களுக்கு கூடுதல் செமாண்டிக் தகவல்களை வழங்க ARIA பண்புக்கூறுகளைப் பயன்படுத்துவதைக் கருத்தில் கொள்ளவும்.

நிஜ-உலக எடுத்துக்காட்டுகள் மற்றும் வழக்கு ஆய்வுகள்

இந்தக் கொள்கைகள் பல்வேறு பிராந்தியங்களிலும் சூழல்களிலும் எவ்வாறு பயன்படுத்தப்படுகின்றன என்பதை விளக்க சில நிஜ-உலக எடுத்துக்காட்டுகளை ஆராய்வோம்.

அரசாங்க வலைத்தளங்கள்: ஐக்கிய இராச்சியம், கனடா மற்றும் ஆஸ்திரேலியா உட்பட பல நாடுகளில், அரசாங்க வலைத்தளங்களுக்கு கடுமையான அணுகல்தன்மை வழிகாட்டுதல்கள் உள்ளன. இந்த வலைத்தளங்கள் பெரும்பாலும் WCAG இணக்கத்தின் முன்மாதிரி மாதிரிகளாக செயல்படுகின்றன, செமாண்டிக் HTML, வண்ண வேறுபாடு மற்றும் விசைப்பலகை வழிசெலுத்தல் ஆகியவற்றில் சிறந்த நடைமுறைகளைக் காட்டுகின்றன.
இ-காமர்ஸ் தளங்கள்: அமேசான் மற்றும் அலிபாபா போன்ற உலகளாவிய இ-காமர்ஸ் ஜாம்பவான்கள் ஒரு பரந்த பார்வையாளர்களை அடைய அணுகல்தன்மையில் பெரிதும் முதலீடு செய்கின்றன. அவர்கள் பெரும்பாலும் படங்களுக்கான மாற்று உரை, தயாரிப்பு உலாவலுக்கான விசைப்பலகை வழிசெலுத்தல் மற்றும் மேம்பட்ட வாசிப்புத்திறனுக்காக சரிசெய்யக்கூடிய எழுத்துரு அளவுகள் போன்ற அம்சங்களைச் செயல்படுத்துகின்றன.
கல்வி நிறுவனங்கள்: உலகெங்கிலும் உள்ள பல்கலைக்கழகங்கள் மற்றும் கல்லூரிகள் அணுகக்கூடிய ஆன்லைன் கற்றல் சூழல்களை உருவாக்குவதில் அதிக கவனம் செலுத்துகின்றன. அவர்கள் பெரும்பாலும் வீடியோக்களுக்கான டிரான்ஸ்கிரிப்டுகள், ஆடியோ உள்ளடக்கத்திற்கான தலைப்புகள் மற்றும் குறைபாடுகள் உள்ள மாணவர்களுக்கு இடமளிக்க பாடப் பொருட்களின் அணுகக்கூடிய பதிப்புகளை வழங்குகிறார்கள்.

தவிர்க்க வேண்டிய பொதுவான அணுகல்தன்மை தவறுகள்

போதுமான வண்ண வேறுபாடு இல்லை: குறைந்த பார்வை உள்ள பயனர்களுக்குப் படிக்க கடினமாக இருக்கும் வண்ணக் கலவைகளைப் பயன்படுத்துதல்.
படங்களுக்கு மாற்று உரை இல்லாதது: படங்களுக்கு விளக்கமான மாற்று உரையை வழங்கத் தவறுவது, அவற்றை திரை வாசிப்பான் பயனர்களுக்கு அணுக முடியாததாக ஆக்குகிறது.
மோசமான விசைப்பலகை வழிசெலுத்தல்: விசைப்பலகையைப் பயன்படுத்தி வழிசெலுத்த கடினமாக அல்லது சாத்தியமற்றதாக இருக்கும் வலைத்தளங்களை உருவாக்குதல்.
தளவமைப்பிற்கு அட்டவணைகளைப் பயன்படுத்துதல்: செமாண்டிக் HTML கூறுகளுக்குப் பதிலாக தளவமைப்பு நோக்கங்களுக்காக HTML அட்டவணைகளைப் பயன்படுத்துதல்.
ஃபோகஸ் குறிகாட்டிகளைப் புறக்கணித்தல்: காட்சி ஃபோகஸ் குறிகாட்டியை அகற்றுவது அல்லது மறைப்பது, விசைப்பலகை பயனர்களுக்கு எந்த உறுப்பு ஃபோகஸில் உள்ளது என்பதை அறிவதை கடினமாக்குகிறது.
தகவல்களைத் தெரிவிக்க வண்ணத்தை மட்டுமே நம்பியிருத்தல்: தகவல்களைத் தெரிவிக்கும் ஒரே வழியாக வண்ணத்தைப் பயன்படுத்துவது, அதை வண்ணக் குருடு உள்ள பயனர்களுக்கு அணுக முடியாததாக ஆக்குகிறது.
உதவி தொழில்நுட்பங்களுடன் சோதிக்காதது: அணுகல்தன்மை சிக்கல்களைக் கண்டறிந்து சரிசெய்ய, திரை வாசிப்பான்கள் போன்ற உதவி தொழில்நுட்பங்களுடன் உங்கள் வலைத்தளத்தைச் சோதிக்கத் தவறுவது.

முடிவுரை: ஒரு சிறந்த வலைக்காக அணுகல்தன்மையை ஏற்றுக்கொள்வது

அணுகல்தன்மை ஒரு தொழில்நுட்பத் தேவை மட்டுமல்ல; இது அனைவருக்கும் உள்ளடக்கிய மற்றும் அணுகக்கூடிய ஒரு வலையை உருவாக்குவதற்கான ஒரு அடிப்படைக் அம்சமாகும். இந்த CSS நுட்பங்களைச் செயல்படுத்துவதன் மூலமும் WCAG வழிகாட்டுதல்களைப் பின்பற்றுவதன் மூலமும், நீங்கள் பார்வைக்கு ஈர்க்கக்கூடிய வலைத்தளங்களை மட்டுமல்ல, அனைத்து பயனர்களுக்கும், அவர்களின் திறன்களைப் பொருட்படுத்தாமல், பயன்படுத்தக்கூடிய மற்றும் சுவாரஸ்யமாக இருக்கும் வலைத்தளங்களை உருவாக்கலாம். உங்கள் வலை மேம்பாட்டு செயல்முறையின் ஒரு ஒருங்கிணைந்த பகுதியாக அணுகல்தன்மையை ஏற்றுக்கொள்ளுங்கள், மேலும் நீங்கள் ஒரு உள்ளடக்கிய மற்றும் சமத்துவமான டிஜிட்டல் உலகிற்கு பங்களிப்பீர்கள்.

ஆதாரங்கள் மற்றும் மேலதிக வாசிப்பு

வலை உள்ளடக்க அணுகல்தன்மை வழிகாட்டுதல்கள் (WCAG): https://www.w3.org/WAI/standards-guidelines/wcag/
வலை அணுகல்தன்மை முயற்சி (WAI): https://www.w3.org/WAI/
WebAIM: https://webaim.org/
Deque University: https://dequeuniversity.com/