வலை அணுகல்தன்மை (a11y): முன்பக்க உருவாக்குநர்களுக்கான ஒரு நடைமுறை வழிகாட்டி

வலை அணுகல்தன்மை (பொதுவாக a11y என்று சுருக்கப்படுகிறது, இங்கு 11 என்பது 'a' மற்றும் 'y' க்கு இடையில் உள்ள எழுத்துக்களின் எண்ணிக்கையைக் குறிக்கிறது) என்பது மாற்றுத்திறனாளிகளால் பயன்படுத்தக்கூடிய வலைத்தளங்கள் மற்றும் வலைப் பயன்பாடுகளை வடிவமைத்து உருவாக்கும் ஒரு நடைமுறையாகும். இதில் பார்வை, செவிப்புலன், இயக்கம், அறிவாற்றல் மற்றும் பேச்சு குறைபாடுகள் உள்ள நபர்கள் அடங்குவர். அணுகக்கூடிய வலைத்தளங்களை உருவாக்குவது என்பது இணக்கத்தைப் பற்றியது மட்டுமல்ல; இது அனைவருக்கும், அவர்களின் திறன்கள் அல்லது அவர்கள் வலையை அணுகப் பயன்படுத்தும் தொழில்நுட்பங்களைப் பொருட்படுத்தாமல், அனைவரையும் உள்ளடக்கிய மற்றும் சமமான டிஜிட்டல் அனுபவங்களை உருவாக்குவதாகும். இது ஒரு பரந்த பார்வையாளர்களைச் சென்றடைவதற்கும் அவசியமானது. உதாரணமாக, நல்ல வண்ண வேறுபாடு பிரகாசமான சூரிய ஒளியில் உள்ள பயனர்களுக்குப் பயனளிக்கிறது, மேலும் தெளிவான தளவமைப்புகள் அறிவாற்றல் குறைபாடுகள் உள்ளவர்களுக்கு அல்லது வெறுமனே பல்பணி செய்பவர்களுக்கு உதவுகின்றன.

வலை அணுகல்தன்மை ஏன் முக்கியமானது?

வலை அணுகல்தன்மைக்கு முன்னுரிமை அளிக்க பல வலுவான காரணங்கள் உள்ளன:

• அறநெறி பரிசீலனைகள்: ஒவ்வொருவருக்கும் ஆன்லைனில் தகவல் மற்றும் சேவைகளை சமமாக அணுக உரிமை உண்டு. டிஜிட்டல் உலகில் இருந்து மாற்றுத்திறனாளிகளை விலக்குவது பாகுபாடானது.
• சட்டத் தேவைகள்: பல நாடுகள் மற்றும் பிராந்தியங்களில், அமெரிக்காவில் மாற்றுத்திறனாளிகள் சட்டம் (ADA), கனடாவில் ஒன்டாரியோ மாற்றுத்திறனாளிகளுக்கான அணுகல் சட்டம் (AODA), மற்றும் ஐரோப்பிய ஒன்றியத்தில் ஐரோப்பிய அணுகல் சட்டம் (EAA) போன்ற வலை அணுகல்தன்மையை கட்டாயமாக்கும் சட்டங்கள் மற்றும் விதிமுறைகள் உள்ளன. இணங்கத் தவறினால் சட்ட நடவடிக்கை எடுக்கப்படலாம். உதாரணமாக, சில அதிகார வரம்புகளில், அணுக முடியாத வலைத்தளங்கள் வழக்குகளுக்கு உட்படுத்தப்படலாம்.
• மேம்படுத்தப்பட்ட பயனர் அனுபவம்: அணுகல்தன்மை சிறந்த நடைமுறைகள் பெரும்பாலும் பொதுவான பயன்பாட்டு கொள்கைகளுடன் ஒத்துப்போகின்றன. ஒரு வலைத்தளத்தை அணுகக்கூடியதாக மாற்றுவது, குறைபாடு உள்ளதா என்பதைப் பொருட்படுத்தாமல், அனைத்து பயனர்களுக்கும் பயனர் அனுபவத்தை மேம்படுத்தும். உதாரணமாக, படிவ புலங்களுக்கு தெளிவான லேபிள்களை வழங்குவது, அறிவாற்றல் குறைபாடுகள் உள்ள பயனர்களுக்கும், ஒவ்வொரு புலத்தின் நோக்கத்தையும் விரைவாகப் புரிந்துகொள்ள விரும்பும் மெதுவான இணைய இணைப்பு உள்ள பயனர்களுக்கும் பயனளிக்கிறது.
• பரந்த பார்வையாளர்களைச் சென்றடைதல்: உலக மக்கள் தொகையில் சுமார் 15% பேர் மாற்றுத்திறனாளிகளாக உள்ளனர். உங்கள் வலைத்தளத்தை அணுகக்கூடியதாக மாற்றுவதன் மூலம், நீங்கள் அதை கணிசமாக பெரிய பார்வையாளர்களுக்குத் திறக்கிறீர்கள். இது அதிகரித்த வணிகம், ஈடுபாடு மற்றும் தாக்கமாக மொழிபெயர்க்கப்படலாம். WHO-வின் மதிப்பீட்டின்படி, 1 பில்லியனுக்கும் அதிகமான மக்கள் ஏதேனும் ஒரு வகையான ஊனத்துடன் வாழ்கின்றனர்.
• எஸ்சிஓ நன்மைகள்: கூகிள் போன்ற தேடுபொறிகள் நன்கு கட்டமைக்கப்பட்ட, சொற்பொருள் சார்ந்த மற்றும் பயனர் நட்புடன் கூடிய வலைத்தளங்களுக்கு முன்னுரிமை அளிக்கின்றன. முறையான தலைப்பு கட்டமைப்புகளைப் பயன்படுத்துதல் மற்றும் படங்களுக்கு மாற்று உரையை வழங்குதல் போன்ற பல அணுகல்தன்மை சிறந்த நடைமுறைகள், உங்கள் வலைத்தளத்தின் தேடுபொறி உகப்பாக்கத்தையும் (SEO) மேம்படுத்தும்.
• அதிகரித்த பிராண்ட் நற்பெயர்: அணுகல்தன்மைக்கான அர்ப்பணிப்பை வெளிப்படுத்துவது உங்கள் பிராண்டின் நற்பெயரை மேம்படுத்தி வாடிக்கையாளர்களுடன் நம்பிக்கையை வளர்க்கும். நுகர்வோர் பெருகிய முறையில் சமூகப் பொறுப்பு மற்றும் உள்ளடக்கிய பிராண்டுகளை விரும்புகிறார்கள்.

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

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

WCAG நான்கு கொள்கைகளைச் சுற்றி ஒழுங்கமைக்கப்பட்டுள்ளது, இது பெரும்பாலும் POUR என்று குறிப்பிடப்படுகிறது:

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

WCAG இணக்கத்தின் மூன்று நிலைகளைக் கொண்டுள்ளது: A, AA, மற்றும் AAA. நிலை A என்பது அணுகல்தன்மையின் மிகவும் அடிப்படை நிலை, அதேசமயம் நிலை AAA மிகவும் விரிவானது. பெரும்பாலான நிறுவனங்கள் நிலை AA இணக்கத்தை நோக்கமாகக் கொண்டுள்ளன, ஏனெனில் இது அணுகல்தன்மை மற்றும் நடைமுறைக்கு இடையில் ஒரு நல்ல சமநிலையை வழங்குகிறது. பல சட்டங்கள் மற்றும் விதிமுறைகளுக்கு நிலை AA இணக்கம் தேவைப்படுகிறது.

முன்பக்க உருவாக்குநர்களுக்கான நடைமுறை நுட்பங்கள்

முன்பக்க உருவாக்குநர்கள் தங்கள் வலைத்தளங்கள் மற்றும் வலைப் பயன்பாடுகளின் அணுகல்தன்மையை மேம்படுத்தப் பயன்படுத்தக்கூடிய சில நடைமுறை நுட்பங்கள் இங்கே:

1. சொற்பொருள் HTML

சொற்பொருள் HTML கூறுகளைப் பயன்படுத்துவது அணுகல்தன்மைக்கு முக்கியமானது. சொற்பொருள் HTML உங்கள் உள்ளடக்கத்திற்கு அர்த்தத்தையும் கட்டமைப்பையும் வழங்குகிறது, இது உதவி தொழில்நுட்பங்கள் புரிந்துகொள்வதற்கும் விளக்குவதற்கும் எளிதாக்குகிறது. எல்லாவற்றிற்கும் பொதுவான <div> மற்றும் <span> கூறுகளைப் பயன்படுத்துவதற்குப் பதிலாக, பின்வருவன போன்ற HTML5 சொற்பொருள் கூறுகளைப் பயன்படுத்தவும்:

• <header>: ஒரு ஆவணம் அல்லது பகுதியின் தலைப்பைக் குறிக்கிறது.
• <nav>: வழிசெலுத்தல் இணைப்புகளின் ஒரு பகுதியைக் குறிக்கிறது.
• <main>: ஒரு ஆவணத்தின் முக்கிய உள்ளடக்கத்தைக் குறிக்கிறது.
• <article>: ஒரு ஆவணம், பக்கம், பயன்பாடு அல்லது தளத்தில் ஒரு தன்னிறைவான அமைப்பைக் குறிக்கிறது.
• <aside>: ஆவணத்தின் முக்கிய உள்ளடக்கத்துடன் தொடர்புடைய உள்ளடக்கத்தைக் குறிக்கிறது.
• <footer>: ஒரு ஆவணம் அல்லது பகுதியின் அடிக்குறிப்பைக் குறிக்கிறது.
• <section>: உள்ளடக்கத்தின் ஒரு கருப்பொருள் குழுவைக் குறிக்கிறது.

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

<header>
  <h1>My Website</h1>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

<main>
  <article>
    <h2>Article Title</h2>
    <p>Article content here...</p>
  </article>
</main>

<footer>
  <p>© 2023 My Website</p>
</footer>

சரியான தலைப்பு நிலைகளைப் (<h1> முதல் <h6> வரை) பயன்படுத்துவது ஒரு தர்க்கரீதியான ஆவணக் கட்டமைப்பை உருவாக்குவதற்கு அவசியமானது. உங்கள் உள்ளடக்கத்தை ஒழுங்கமைக்கவும், பயனர்கள் எளிதாக செல்லவும் தலைப்புகளைப் பயன்படுத்தவும். <h1> பக்கத்தின் முக்கிய தலைப்புக்கு பயன்படுத்தப்பட வேண்டும், மேலும் அடுத்தடுத்த தலைப்புகள் தகவல்களின் படிநிலையை உருவாக்கப் பயன்படுத்தப்பட வேண்டும். தலைப்பு நிலைகளைத் தவிர்ப்பதைத் (எ.கா., <h2> இலிருந்து <h4> க்குச் செல்வது) தவிர்க்கவும், ஏனெனில் இது திரை வாசிப்பான் பயனர்களைக் குழப்பக்கூடும்.

2. படங்களுக்கான மாற்று உரை

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

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

<img src="logo.png" alt="Company Logo">
<img src="decorative-pattern.png" alt="">

மாற்று உரையை எழுதும்போது, விளக்கமாகவும் சுருக்கமாகவும் இருங்கள். படம் வழங்கும் அத்தியாவசிய தகவல்களைத் தெரிவிப்பதில் கவனம் செலுத்துங்கள். "image of" அல்லது "picture of" போன்ற சொற்றொடர்களைப் பயன்படுத்துவதைத் தவிர்க்கவும், ஏனெனில் திரை வாசிப்பான்கள் பொதுவாக அது ஒரு படம் என்று அறிவிக்கும்.

விளக்கப்படங்கள் மற்றும் வரைபடங்கள் போன்ற சிக்கலான படங்களுக்கு, சுற்றியுள்ள உரையில் மேலும் விரிவான விளக்கத்தை வழங்குவதைக் கருத்தில் கொள்ளுங்கள் அல்லது <figure> மற்றும் <figcaption> கூறுகளைப் பயன்படுத்தவும்.

3. விசைப்பலகை அணுகல்தன்மை

உங்கள் வலைத்தளத்தில் உள்ள அனைத்து ஊடாடும் கூறுகளும் விசைப்பலகையைப் பயன்படுத்தி அணுகக்கூடியதாக இருக்க வேண்டும். சுட்டி அல்லது பிற சுட்டிக்காட்டும் சாதனத்தைப் பயன்படுத்த முடியாத பயனர்களுக்கு இது முக்கியமானது. பயனர்கள் Tab விசையைப் பயன்படுத்தி உங்கள் வலைத்தளத்தில் செல்ல முடியும் என்பதையும், Enter அல்லது Spacebar விசைகளைப் பயன்படுத்தி கூறுகளுடன் தொடர்பு கொள்ள முடியும் என்பதையும் உறுதிப்படுத்தவும்.

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

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

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

/* CSS */
a:focus, button:focus {
  outline: 2px solid blue;
  outline-offset: 2px;
}

4. ARIA பண்புக்கூறுகள்

ARIA (Accessible Rich Internet Applications) என்பது உதவி தொழில்நுட்பங்களுக்கு கூடுதல் சொற்பொருள் தகவல்களை வழங்க HTML கூறுகளில் சேர்க்கக்கூடிய பண்புக்கூறுகளின் தொகுப்பாகும். ARIA பண்புக்கூறுகள் டைனமிக் உள்ளடக்கம், சிக்கலான விட்ஜெட்டுகள் மற்றும் பிற ஊடாடும் கூறுகளின் அணுகல்தன்மையை மேம்படுத்தப் பயன்படுத்தப்படலாம்.

சில பொதுவான ARIA பண்புக்கூறுகள் பின்வருமாறு:

• aria-label: ஒரு உறுப்புக்கு உரை லேபிளை வழங்குகிறது.
• aria-describedby: ஒரு உறுப்பை ஒரு விளக்கத்துடன் இணைக்கிறது.
• aria-labelledby: ஒரு உறுப்பை ஒரு லேபிளுடன் இணைக்கிறது.
• aria-hidden: உதவி தொழில்நுட்பங்களிலிருந்து ஒரு உறுப்பை மறைக்கிறது.
• aria-live: ஒரு உறுப்பின் உள்ளடக்கம் மாறும் வகையில் புதுப்பிக்கப்படுவதைக் குறிக்கிறது.
• role: ஒரு உறுப்பின் பங்கை வரையறுக்கிறது (எ.கா., பொத்தான், தேர்வுப்பெட்டி, உரையாடல்).
• aria-expanded: ஒரு உறுப்பு விரிவாக்கப்பட்டுள்ளதா அல்லது சுருக்கப்பட்டுள்ளதா என்பதைக் குறிக்கிறது.
• aria-selected: ஒரு உறுப்பு தேர்ந்தெடுக்கப்பட்டுள்ளதா என்பதைக் குறிக்கிறது.

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

<button aria-label="Close dialog" onclick="closeDialog()">X</button>
<div role="dialog" aria-labelledby="dialog-title">
  <h2 id="dialog-title">My Dialog</h2>
  <p>Dialog content here...</p>
</div>

ARIA பண்புக்கூறுகளைப் பயன்படுத்தும்போது, ARIA பயன்பாட்டு விதிகளைப் பின்பற்றுவது முக்கியம்:

• விதி 1: உங்களுக்குத் தேவைப்படும் சொற்பொருள் மற்றும் நடத்தை ஏற்கனவே உள்ளமைக்கப்பட்ட ஒரு நேட்டிவ் HTML உறுப்பு அல்லது பண்புக்கூற்றை நீங்கள் பயன்படுத்த முடிந்தால், ஒரு உறுப்பை மீண்டும் உருவாக்கி அதை அணுகக்கூடியதாக மாற்ற ARIA பங்கு, நிலை அல்லது பண்பைச் சேர்ப்பதற்குப் பதிலாக, அவ்வாறு செய்யுங்கள்.
• விதி 2: நீங்கள் உண்மையிலேயே செய்ய வேண்டியிருந்தால் தவிர, நேட்டிவ் HTML சொற்பொருளை மாற்ற வேண்டாம்.
• விதி 3: அனைத்து ஊடாடும் ARIA கட்டுப்பாடுகளும் விசைப்பலகையுடன் பயன்படுத்தக்கூடியதாக இருக்க வேண்டும்.
• விதி 4: ஃபோகஸ் செய்யக்கூடிய உறுப்புகளில் role="presentation" அல்லது aria-hidden="true" ஐப் பயன்படுத்த வேண்டாம்.
• விதி 5: ARIA பங்கு உள்ள அனைத்து உறுப்புகளும் தேவையான அனைத்து பண்புக்கூறுகளையும் கொண்டிருக்க வேண்டும்.

5. வண்ண வேறுபாடு

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

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

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

/* CSS */
body {
  color: #333; /* அடர் சாம்பல் உரை */
  background-color: #fff; /* வெள்ளை பின்னணி */
}

(இந்த எடுத்துக்காட்டில் 7:1 என்ற மாறுபட்ட விகிதம் உள்ளது, இது WCAG தேவைகளைப் பூர்த்தி செய்கிறது.)

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

6. படிவங்கள் மற்றும் லேபிள்கள்

படிவக் கூறுகளைச் சரியாக லேபிளிடுவது அணுகல்தன்மைக்கு முக்கியமானது. ஒவ்வொரு படிவ உள்ளீட்டுடனும் ஒரு உரை லேபிளை இணைக்க <label> உறுப்பைப் பயன்படுத்தவும். <label> உறுப்பின் for பண்புக்கூறு தொடர்புடைய உள்ளீட்டு உறுப்பின் id பண்புடன் பொருந்த வேண்டும்.

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

<label for="name">Name:</label>
<input type="text" id="name" name="name">

சிக்கலான படிவங்களுக்கு, தொடர்புடைய படிவக் கட்டுப்பாடுகளைக் குழுவாக்க <fieldset> மற்றும் <legend> கூறுகளைப் பயன்படுத்துவதைக் கருத்தில் கொள்ளுங்கள். இது பயனர்கள் ஒவ்வொரு கட்டுப்பாட்டுக் குழுவின் நோக்கத்தையும் புரிந்துகொள்ள உதவும்.

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

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

7. பல்லூடக அணுகல்தன்மை

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

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

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

ப்ளே, பாஸ் மற்றும் வால்யூம் கட்டுப்பாடுகள் போன்ற பல்லூடகக் கட்டுப்பாடுகள் விசைப்பலகை மூலம் அணுகக்கூடியவை என்பதை உறுதிப்படுத்தவும்.

8. டைனமிக் உள்ளடக்கம் மற்றும் புதுப்பிப்புகள்

உங்கள் வலைத்தளத்தில் உள்ளடக்கம் மாறும் வகையில் புதுப்பிக்கப்படும்போது, மாற்றங்களைப் பற்றி பயனர்களுக்குத் தெரிவிப்பது முக்கியம். திரை வாசிப்பான்களைப் பயன்படுத்தும் பயனர்களுக்கு இது குறிப்பாக முக்கியமானது, ஏனெனில் அவர்கள் உள்ளடக்கம் மாறியிருப்பதை அறிந்திருக்க மாட்டார்கள்.

திரை வாசிப்பான்களுக்கு டைனமிக் புதுப்பிப்புகளை அறிவிக்க ARIA லைவ் பகுதிகளைப் பயன்படுத்தவும். ARIA லைவ் பகுதிகள், புதுப்பிப்புகளைப் பெறுவதற்காக நியமிக்கப்பட்ட பக்கத்தின் பகுதிகளாகும். ஒரு லைவ் பகுதியின் உள்ளடக்கம் மாறும்போது, திரை வாசிப்பான் மாற்றங்களை பயனருக்கு அறிவிக்கும். ஒரு லைவ் பகுதியை வரையறுக்க aria-live பண்புக்கூற்றைப் பயன்படுத்தவும். திரை வாசிப்பான் மாற்றங்களை எவ்வாறு அறிவிக்கிறது என்பதைச் சரிசெய்ய aria-atomic மற்றும் aria-relevant பண்புக்கூறுகளைப் பயன்படுத்தலாம்.

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

<div aria-live="polite">
  <p id="status-message">Loading...</p>
</div>

<script>
  // தரவு ஏற்றப்படும்போது நிலை செய்தியைப் புதுப்பிக்கவும்
  function updateStatus(message) {
    document.getElementById("status-message").textContent = message;
  }
</script>

இந்த எடுத்துக்காட்டில், aria-live="polite" பண்புக்கூறு, திரை வாசிப்பான் <div> உறுப்பின் உள்ளடக்கத்தில் ஏற்படும் மாற்றங்களை அறிவிக்க வேண்டும், ஆனால் பயனரின் தற்போதைய பணியில் குறுக்கிடக்கூடாது என்பதைக் குறிக்கிறது. updateStatus() செயல்பாடு <p> உறுப்பின் உள்ளடக்கத்தைப் புதுப்பிக்கிறது, இது திரை வாசிப்பான் புதிய நிலைச் செய்தியை அறிவிக்கத் தூண்டும்.

9. அணுகல்தன்மைக்கான சோதனை

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

• தானியங்கு அணுகல்தன்மை சரிபார்ப்பான்கள்: பொதுவான அணுகல்தன்மைப் பிழைகளுக்கு உங்கள் வலைத்தளத்தை ஸ்கேன் செய்ய தானியங்கு அணுகல்தன்மை சரிபார்ப்பான்களைப் பயன்படுத்தவும். WAVE, A Checker, மற்றும் Google Lighthouse ஆகியவை சில பிரபலமான கருவிகளாகும். இந்த கருவிகள் விடுபட்ட மாற்று உரை, குறைந்த வண்ண வேறுபாடு மற்றும் முறையற்ற தலைப்பு கட்டமைப்புகள் போன்ற சிக்கல்களை அடையாளம் காண முடியும். இருப்பினும், தானியங்கு கருவிகள் அணுகல்தன்மை சிக்கல்களில் ஒரு பகுதியை மட்டுமே கண்டறிய முடியும்.
• கையேடு சோதனை: விசைப்பலகை மற்றும் திரை வாசிப்பானைப் பயன்படுத்தி உங்கள் வலைத்தளத்தை கைமுறையாக சோதிக்கவும். இது தானியங்கு கருவிகளால் கண்டறிய முடியாத ஃபோகஸ் வரிசைச் சிக்கல்கள் மற்றும் தெளிவற்ற வழிசெலுத்தல் போன்ற சிக்கல்களை அடையாளம் காண உதவும். NVDA (இலவச மற்றும் திறந்த மூல), JAWS (வணிகரீதியான), மற்றும் VoiceOver (macOS மற்றும் iOS இல் உள்ளமைக்கப்பட்டது) ஆகியவை சில பிரபலமான திரை வாசிப்பான்களாகும்.
• பயனர் சோதனை: உங்கள் சோதனைச் செயல்பாட்டில் மாற்றுத்திறனாளிகளை ஈடுபடுத்துங்கள். உங்கள் வலைத்தளம் அனைவருக்கும் அணுகக்கூடியதாக இருப்பதை உறுதிசெய்ய, பல்வேறு வகையான குறைபாடுகள் உள்ள பயனர்களிடமிருந்து கருத்துக்களைப் பெறுங்கள். பயனர் சோதனை உங்கள் வலைத்தளத்தின் நிஜ உலக அணுகல்தன்மை குறித்த மதிப்புமிக்க நுண்ணறிவுகளை வழங்க முடியும்.

உலாவிக்கு அப்பாற்பட்ட அணுகல்தன்மை

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

• மொபைல் பயன்பாடுகள்: iOS மற்றும் Android க்கான மொபைல் பயன்பாடுகளை உருவாக்கும்போது இதேபோன்ற அணுகல்தன்மை கொள்கைகளைப் பயன்படுத்துங்கள். இயக்க முறைமைகளால் வழங்கப்படும் நேட்டிவ் அணுகல்தன்மை அம்சங்களைப் பயன்படுத்தவும்.
• டெஸ்க்டாப் பயன்பாடுகள்: டெஸ்க்டாப் பயன்பாடுகள் விசைப்பலகை மூலம் செல்லக்கூடியவை, போதுமான வேறுபாட்டை வழங்குபவை மற்றும் திரை வாசிப்பான்களுடன் இணக்கமானவை என்பதை உறுதிப்படுத்தவும்.
• ஆவணங்கள் (PDF, Word, போன்றவை): முறையான தலைப்பு கட்டமைப்புகள், படங்களுக்கு மாற்று உரை மற்றும் போதுமான வேறுபாட்டை உறுதி செய்வதன் மூலம் அணுகக்கூடிய ஆவணங்களை உருவாக்கவும்.
• மின்னஞ்சல்கள்: சொற்பொருள் HTML ஐப் பயன்படுத்துதல், படங்களுக்கு மாற்று உரையை வழங்குதல் மற்றும் தெளிவான மற்றும் சுருக்கமான மொழியைப் பயன்படுத்துவதன் மூலம் அணுகக்கூடிய மின்னஞ்சல்களை வடிவமைக்கவும்.

முடிவுரை

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

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