இணைய அணுகல்: ஸ்கிரீன் ரீடர் பயனர்களுக்காக உங்கள் வலைத்தளத்தை மேம்படுத்துதல்

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

இந்த விரிவான வழிகாட்டி, ஸ்கிரீன் ரீடர் பயனர்களுக்காக உங்கள் வலைத்தளத்தை மேம்படுத்துவதற்கான பிரத்யேக நுணுக்கங்கள், சிறந்த நடைமுறைகள் மற்றும் நிஜ-உலக எடுத்துக்காட்டுகளை உள்ளடக்கியுள்ளது.

ஸ்கிரீன் ரீடர் என்றால் என்ன?

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

JAWS (Job Access With Speech): விண்டோஸிற்கான பரவலாகப் பயன்படுத்தப்படும் ஸ்கிரீன் ரீடர்.
NVDA (NonVisual Desktop Access): விண்டோஸிற்கான ஒரு இலவச மற்றும் திறந்த மூல ஸ்கிரீன் ரீடர்.
VoiceOver: மேக்ஓஎஸ் மற்றும் ஐஓஎஸ்-க்கான ஆப்பிளின் உள்ளமைக்கப்பட்ட ஸ்கிரீன் ரீடர்.
ChromeVox: கூகிள் குரோம் மற்றும் குரோம் ஓஎஸ்-க்கான ஸ்கிரீன் ரீடர் நீட்டிப்பு.
Orca: லினக்ஸிற்கான ஒரு இலவச மற்றும் திறந்த மூல ஸ்கிரீன் ரீடர்.

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

ஸ்கிரீன் ரீடர் மேம்படுத்தல் ஏன் முக்கியம்?

உங்கள் வலைத்தளத்தை ஸ்கிரீன் ரீடர்களுக்காக மேம்படுத்துவது பல நன்மைகளை வழங்குகிறது:

உள்ளடக்கியல்: பார்வை குறைபாடுள்ள பயனர்கள் உங்கள் வலைத்தளத்தை திறம்பட அணுகவும் பயன்படுத்தவும் முடிகிறது என்பதை உறுதி செய்கிறது.
சட்ட இணக்கம்: பல நாடுகளில் இணைய அணுகலைக் கோரும் சட்டங்கள் மற்றும் விதிமுறைகள் உள்ளன (எ.கா., அமெரிக்காவில் மாற்றுத்திறனாளிகளுக்கான அமெரிக்கர்கள் சட்டம் (ADA), கனடாவில் ஒன்ராறியர்களுக்கான அணுகல் சட்டம் (AODA), மற்றும் ஐரோப்பாவில் EN 301 549).
மேம்பட்ட பயனர் அனுபவம்: அணுகக்கூடிய வடிவமைப்பு பெரும்பாலும் மாற்றுத்திறனாளிகள் என்பதைப் பொருட்படுத்தாமல் அனைத்து பயனர்களுக்கும் ஒரு சிறந்த பயனர் அனுபவத்திற்கு வழிவகுக்கிறது.
பரந்த பார்வையாளர் வட்டம்: உங்கள் வலைத்தளத்தை அணுகக்கூடியதாக மாற்றுவதன் மூலம், அதை ஒரு பெரிய சாத்தியமான பார்வையாளர்களுக்குத் திறக்கிறீர்கள்.
எஸ்சிஓ நன்மைகள்: தேடுபொறிகள் அணுகக்கூடிய வலைத்தளங்களுக்கு சாதகமாக உள்ளன, இது உங்கள் தேடுபொறி தரவரிசையை மேம்படுத்தும்.

ஸ்கிரீன் ரீடர் மேம்படுத்தலின் முக்கியக் கோட்பாடுகள்

ஸ்கிரீன் ரீடர்-நட்பு வலைத்தளங்களை உருவாக்குவதற்கு பின்வரும் கோட்பாடுகள் அவசியமானவை:

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

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

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

தளத்தின் தலைப்புப் பகுதிக்கு <header> ஐப் பயன்படுத்தவும்.
வழிசெலுத்தல் மெனுக்களுக்கு <nav> ஐப் பயன்படுத்தவும்.
பிரதான உள்ளடக்கப் பகுதிக்கு <main> ஐப் பயன்படுத்தவும்.
தனித்தனி உள்ளடக்கத் தொகுதிகளை உள்ளடக்க <article> ஐப் பயன்படுத்தவும்.
துணை உள்ளடக்கத்திற்கு <aside> ஐப் பயன்படுத்தவும்.
தளத்தின் அடிக்குறிப்புக்கு <footer> ஐப் பயன்படுத்தவும்.
தலைப்புகளுக்கு <h1> முதல் <h6> வரை பயன்படுத்தவும்.
பத்திகளுக்கு <p> ஐப் பயன்படுத்தவும்.
பட்டியல்களுக்கு <ul> மற்றும் <ol> ஐப் பயன்படுத்தவும்.

எடுத்துக்காட்டுக் குறியீடு:

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

<main>
  <article>
    <h2>Article Title</h2>
    <p>This is the main content of the article.</p>
  </article>
</main>

<footer>
  <p>Copyright 2023</p>
</footer>

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

படங்கள் எப்போதும் ஸ்கிரீன் ரீடர் பயனர்களுக்கு படத்தின் உள்ளடக்கம் மற்றும் நோக்கத்தை தெரிவிக்கும் விளக்கமான மாற்று உரையைக் (alt text) கொண்டிருக்க வேண்டும். மாற்று உரை சுருக்கமாகவும் தகவலறிந்ததாகவும் இருக்க வேண்டும்.

சிறந்த நடைமுறைகள்:

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

எடுத்துக்காட்டுக் குறியீடு:

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

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

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

பொதுவான ARIA பண்புக்கூறுகள்:

role: ஒரு உறுப்பின் பங்கை வரையறுக்கிறது (எ.கா., role="button", role="navigation").
aria-label: ஒரு உறுப்புக்கு காட்சி லேபிள் இல்லாதபோது அல்லது போதுமானதாக இல்லாதபோது உரை லேபிளை வழங்குகிறது.
aria-labelledby: ஒரு உறுப்பை அதன் லேபிளாக செயல்படும் மற்றொரு உறுப்புடன் இணைக்கிறது.
aria-describedby: ஒரு உறுப்பை விளக்கத்தை வழங்கும் மற்றொரு உறுப்புடன் இணைக்கிறது.
aria-hidden: ஸ்கிரீன் ரீடர்களிடமிருந்து ஒரு உறுப்பை மறைக்கிறது.
aria-live: ஒரு உறுப்பின் உள்ளடக்கம் மாறும் வகையில் புதுப்பிக்கப்படுவதைக் குறிக்கிறது (எ.கா., aria-live="polite", aria-live="assertive").
aria-expanded: ஒரு சுருக்கக்கூடிய உறுப்பு தற்போது விரிவாக்கப்பட்டுள்ளதா அல்லது சுருக்கப்பட்டுள்ளதா என்பதைக் குறிக்கிறது.
aria-haspopup: ஒரு உறுப்பு பாப்அப் மெனுவைக் கொண்டிருப்பதைக் குறிக்கிறது.

எடுத்துக்காட்டுக் குறியீடு:

<button role="button" aria-label="Close dialog" onclick="closeDialog()">X</button>

<div id="description">This is a description of the image.</div>
<img src="example.jpg" aria-describedby="description" alt="Example Image">

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

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

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

சிறந்த நடைமுறைகள்:

ஃபோகஸ் குறிகாட்டிகள்: அனைத்து ஊடாடும் கூறுகளுக்கும் (எ.கா., இணைப்புகள், பொத்தான்கள், படிவப் புலங்கள்) அவை தேர்ந்தெடுக்கப்படும்போது தெளிவான மற்றும் புலப்படும் ஃபோகஸ் காட்டி இருப்பதை உறுதிப்படுத்தவும். :focus நிலையை வடிவமைக்க CSS-ஐப் பயன்படுத்தவும்.
டேப் வரிசை: டேப் வரிசை பக்கத்தின் தர்க்கரீதியான வாசிப்பு வரிசையைப் பின்பற்ற வேண்டும் (பொதுவாக இடமிருந்து வலம், மேலிருந்து கீழ்). தேவைப்பட்டால் டேப் வரிசையை சரிசெய்ய tabindex பண்புக்கூற்றைப் பயன்படுத்தவும். தவறாகப் பயன்படுத்தினால் அணுகல் சிக்கல்களை உருவாக்கக்கூடும் என்பதால், முற்றிலும் அவசியமில்லாவிட்டால் tabindex="0" மற்றும் tabindex="-1" ஐப் பயன்படுத்துவதைத் தவிர்க்கவும்.
வழிசெலுத்தல் இணைப்புகளைத் தவிர்: பக்கத்தின் மேலே "வழிசெலுத்தலைத் தவிர்" என்ற இணைப்பை வழங்கவும், இது பயனர்கள் பிரதான வழிசெலுத்தல் மெனுவைத் தவிர்த்து நேரடியாக பிரதான உள்ளடக்கத்திற்குச் செல்ல அனுமதிக்கிறது. இது ஸ்கிரீன் ரீடர்களைப் பயன்படுத்தும் பயனர்களுக்கு குறிப்பாக உதவியாக இருக்கும், ஏனெனில் இது ஒவ்வொரு பக்கத்திலும் மீண்டும் மீண்டும் வரும் வழிசெலுத்தல் இணைப்புகள் வழியாக செல்ல வேண்டிய தேவையை குறைக்கிறது.
மாதிரி உரையாடல்கள்: ஒரு மாதிரி உரையாடல் திறக்கப்படும்போது, அது மூடப்படும் வரை ஃபோகஸ் உரையாடலுக்குள் சிக்கியிருப்பதை உறுதிப்படுத்தவும். பயனர்கள் உரையாடலுக்கு வெளியே டேப் செய்வதைத் தடுக்கவும்.

எடுத்துக்காட்டுக் குறியீடு (வழிசெலுத்தல் இணைப்பைத் தவிர்):

<a href="#main-content" class="skip-link">Skip to main content</a>

<header>
  <nav>
    <!-- Navigation Menu -->
  </nav>
</header>

<main id="main-content">
  <!-- Main Content -->
</main>

எடுத்துக்காட்டுக் குறியீடு (ஃபோகஸ் காட்டிக்கான CSS):

a:focus, button:focus, input:focus, textarea:focus, select:focus {
  outline: 2px solid blue;
  outline-offset: 2px;
}

5. படிவ அணுகல்

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

சிறந்த நடைமுறைகள்:

லேபிளிங்: படிவப் புலங்களுடன் லேபிள்களை இணைக்க <label> உறுப்பைப் பயன்படுத்தவும். <label> உறுப்பின் for பண்புக்கூறு தொடர்புடைய படிவப் புலத்தின் id பண்புக்கூறுடன் பொருந்த வேண்டும்.
அறிவுறுத்தல்கள்: படிவத்தை நிரப்புவதற்கான தெளிவான மற்றும் சுருக்கமான அறிவுறுத்தல்களை வழங்கவும். படிவப் புலங்களுடன் அறிவுறுத்தல்களை இணைக்க aria-describedby பண்புக்கூற்றைப் பயன்படுத்தவும்.
பிழை கையாளுதல்: பிழைச் செய்திகளைத் தெளிவாகவும் முக்கியமாகவும் காட்டவும். ஸ்கிரீன் ரீடர் பயனர்களுக்கு பிழைச் செய்திகளை அறிவிக்க aria-live பண்புக்கூற்றைப் பயன்படுத்தவும். பிழைச் செய்திகளை தொடர்புடைய படிவப் புலங்களுடன் இணைக்க aria-describedby பண்புக்கூற்றைப் பயன்படுத்தவும்.
தேவையான புலங்கள்: தேவையான புலங்களை பார்வைக்கு மற்றும் நிரல் ரீதியாக தெளிவாகக் குறிக்கவும். தேவையான புலங்களைக் குறிக்க required பண்புக்கூற்றைப் பயன்படுத்தவும். ஒரு புலம் தேவை என்பதை ஸ்கிரீன் ரீடர் பயனர்களுக்குக் குறிக்க aria-required பண்புக்கூற்றைப் பயன்படுத்தவும்.
தொடர்புடைய புலங்களைக் குழுவாக்குதல்: தொடர்புடைய படிவப் புலங்களைக் குழுவாக்க <fieldset> மற்றும் <legend> கூறுகளைப் பயன்படுத்தவும்.

எடுத்துக்காட்டுக் குறியீடு:

<label for="name">Name:</label>
<input type="text" id="name" name="name" required aria-required="true">

<div id="name-instructions">Please enter your full name.</div>
<label for="name">Name:</label>
<input type="text" id="name" name="name" aria-describedby="name-instructions">

<form>
  <fieldset>
    <legend>Contact Information</legend>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required aria-required="true"><br><br>
    <label for="phone">Phone:</label>
    <input type="tel" id="phone" name="phone">
  </fieldset>
</form>

6. மாறும் உள்ளடக்க அணுகல்

உங்கள் வலைத்தளத்தில் உள்ளடக்கம் மாறும் வகையில் மாறும்போது (எ.கா., AJAX அல்லது JavaScript மூலம்), ஸ்கிரீன் ரீடர் பயனர்களுக்கு மாற்றங்கள் அறிவிக்கப்படுவதை உறுதி செய்வது மிக முக்கியம். மாறும் உள்ளடக்கத்திற்கான புதுப்பிப்புகளை அறிவிக்க ARIA லைவ் பகுதிகளைப் பயன்படுத்தவும்.

ARIA லைவ் பகுதிகள்:

aria-live="off": இயல்புநிலை மதிப்பு. இப்பகுதிக்கான புதுப்பிப்புகள் அறிவிக்கப்படாது.
aria-live="polite": பயனர் செயலற்ற நிலையில் இருக்கும்போது புதுப்பிப்புகளை அறிவிக்கிறது. இது மிகவும் பொதுவான மற்றும் பரிந்துரைக்கப்பட்ட மதிப்பாகும்.
aria-live="assertive": பயனரை குறுக்கிட்டு, உடனடியாக புதுப்பிப்புகளை அறிவிக்கிறது. இது இடையூறாக இருக்கக்கூடும் என்பதால், இந்த மதிப்பை குறைவாகப் பயன்படுத்தவும்.

எடுத்துக்காட்டுக் குறியீடு:

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

<script>
  // When content is updated, update the status message
  document.getElementById('status-message').textContent = "Content updated successfully!";
</script>

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

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

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

WebAIM Color Contrast Checker (webaim.org/resources/contrastchecker/)
Coolors (coolors.co)
Adobe Color (color.adobe.com)

8. ஊடக அணுகல்

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

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

9. ஸ்கிரீன் ரீடர்களுடன் சோதனை செய்தல்

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

சோதனைக் கருவிகள்:

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

WAVE (Web Accessibility Evaluation Tool)
axe DevTools
Lighthouse (in Chrome DevTools)

ஸ்கிரீன் ரீடர்களுடன் சோதனை செய்வதற்கான உதவிக்குறிப்புகள்:

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

WCAG (Web Content Accessibility Guidelines)

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

WCAG ஆனது POUR என அழைக்கப்படும் நான்கு கோட்பாடுகளைச் சுற்றி ஒழுங்கமைக்கப்பட்டுள்ளது:

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

WCAG ஆனது A, AA, மற்றும் AAA என மூன்று இணக்க நிலைகளாகப் பிரிக்கப்பட்டுள்ளது. நிலை A என்பது அணுகலின் மிக அடிப்படையான நிலை, அதே நேரத்தில் நிலை AAA என்பது மிக உயர்ந்த நிலையாகும். பெரும்பாலான நிறுவனங்கள் நிலை AA-க்கு இணங்க இலக்கு வைக்கின்றன.

முடிவுரை

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

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

கூடுதல் ஆதாரங்கள்:

WebAIM: https://webaim.org/
W3C Web Accessibility Initiative (WAI): https://www.w3.org/WAI/
Deque University: https://dequeuniversity.com/