கரோசெல் கூறுகள்: அணுகக்கூடிய ஸ்லைடுஷோ செயலாக்கத்தின் மூலம் பயனர் அனுபவத்தை உயர்த்துதல்

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

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

கரோசெல் அணுகல்தன்மையின் தவிர்க்க முடியாத தேவை

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

சட்ட மற்றும் நெறிமுறை இணக்கம்

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

அனைவருக்கும் மேம்பட்ட பயனர் அனுபவம்

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

கரோசெல்களுக்குப் பயன்படுத்தப்படும் முக்கிய WCAG கொள்கைகள்

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

1. உணரக்கூடியது

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

• உரை மாற்றுகள் (WCAG 1.1.1): அனைத்து உரையற்ற உள்ளடக்கமும் (கரோசெல் ஸ்லைடுகளுக்குள் உள்ள படங்கள் போன்றவை) சமமான நோக்கத்திற்கு சேவை செய்யும் உரை மாற்றுகளைக் கொண்டிருக்க வேண்டும். அதாவது, படங்களுக்கு விளக்கமான alt உரையை வழங்குவது, குறிப்பாக அவை தகவல்களைத் தெரிவித்தால். ஒரு படம் முற்றிலும் அலங்காரமாக இருந்தால், அதன் alt பண்புக்கூறு காலியாக இருக்க வேண்டும் (alt="").
• வேறுபடுத்தக்கூடியது (WCAG 1.4): கரோசெல்லுக்குள் உள்ள எந்த உரைக்கும் (எ.கா., ஸ்லைடு தலைப்புகள், வழிசெலுத்தல் கட்டுப்பாடுகள்) உரைக்கும் பின்னணிக்கும் இடையே போதுமான வேறுபாடு இருப்பதை உறுதி செய்யவும். மேலும், வழிசெலுத்தல் அம்புகள் அல்லது ஸ்லைடு குறிகாட்டிகள் போன்ற ஊடாடும் கூறுகள், பார்வைக்குத் தெளிவாகவும் அவற்றின் நிலையைத் தெளிவாகக் குறிக்கவும் (எ.கா., hover, focus, active) உறுதி செய்யவும்.
• நேரம் சார்ந்த ஊடகம் (WCAG 1.2): ஒரு கரோசெல்லில் வீடியோ அல்லது ஆடியோ உள்ளடக்கம் இருந்தால், அதற்குத் பொருத்தமான தலைப்புகள், எழுத்துப்படிகள், மற்றும் ஆடியோ விளக்கங்கள் இருப்பதை உறுதி செய்யவும்.

2. இயக்கக்கூடியது

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

• விசைப்பலகை அணுகக்கூடியது (WCAG 2.1.1): கரோசெல்லின் அனைத்து செயல்பாடுகளும் தனிப்பட்ட விசை அழுத்தங்களுக்கு குறிப்பிட்ட நேரங்கள் தேவைப்படாமல் ஒரு விசைப்பலகை இடைமுகம் மூலம் இயக்கக்கூடியதாக இருக்க வேண்டும். இது ஸ்லைடுகளுக்கு இடையில் வழிசெலுத்துதல், இடைநிறுத்தம்/இயக்கு பொத்தான்களைச் செயல்படுத்துதல், மற்றும் ஸ்லைடுகளுக்குள் உள்ள எந்த இணைப்புகள் அல்லது ஊடாடும் கூறுகளை அணுகுதல் ஆகியவற்றை உள்ளடக்கியது.
• விசைப்பலகைப் பொறி இல்லை (WCAG 2.1.2): பயனர்கள் கரோசெல் கூறுக்குள் சிக்கிக்கொள்ளக்கூடாது. அவர்கள் நிலையான விசைப்பலகை வழிசெலுத்தலைப் பயன்படுத்தி (எ.கா., Tab விசை) கரோசெல்லில் இருந்து கவனத்தை நகர்த்த முடியும்.
• போதுமான நேரம் (WCAG 2.2): பயனர்களுக்கு உள்ளடக்கத்தைப் படிக்கவும் பயன்படுத்தவும் போதுமான நேரம் இருக்க வேண்டும்.
• இடைநிறுத்தம், நிறுத்து, மறை (WCAG 2.2.2): தானாக நகரும் அல்லது புதுப்பிக்கும் எந்த உள்ளடக்கத்திற்கும், பயனர்களுக்கு அதை இடைநிறுத்த, நிறுத்த, அல்லது மறைக்க திறன் இருக்க வேண்டும். தானாக இயங்கும் கரோசெல்களுக்கு இது மிகவும் முக்கியமானது. ஒரு முக்கிய இடைநிறுத்தம்/இயக்கு பொத்தான் இல்லாத தானாக முன்னேறும் கரோசெல், திரை வாசிப்பான் பயனர்கள், அறிவாற்றல் குறைபாடுகள் உள்ள பயனர்கள், அல்லது குறைந்த திறமை உள்ளவர்களுக்கு ஒரு பெரிய அணுகல் தடையாகும்.
• நேர சரிசெய்தல் (WCAG 2.2.1): ஒரு நேர வரம்பு விதிக்கப்பட்டால், பயனர்கள் அதை சரிசெய்ய, நீட்டிக்க, அல்லது அணைக்க முடியும்.
• உள்ளீட்டு முறைகள் (WCAG 2.5): கரோசெல் வெறும் சுட்டி கிளிக்குகளால் மட்டுமல்லாமல், தொடு சைகைகள் உட்பட பல்வேறு உள்ளீட்டு முறைகள் மூலம் இயக்கப்பட முடியும் என்பதை உறுதி செய்யவும்.

3. புரிந்துகொள்ளக்கூடியது

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

• கணிக்கக்கூடியது (WCAG 3.2): கரோசெல்லின் நடத்தை கணிக்கக்கூடியதாக இருக்க வேண்டும். வழிசெலுத்தல் கட்டுப்பாடுகள் தொடர்ந்து கரோசெல்லை எதிர்பார்க்கப்படும் திசையில் நகர்த்த வேண்டும் (எ.கா., 'அடுத்து' பொத்தான் எப்போதும் அடுத்த ஸ்லைடிற்குச் செல்லும்). கரோசெல்லுடனான தொடர்பு சூழலில் எதிர்பாராத மாற்றங்களை ஏற்படுத்தக்கூடாது.
• உள்ளீட்டு உதவி (WCAG 3.3): கரோசெல் படிவங்கள் அல்லது பயனர் உள்ளீட்டை உள்ளடக்கியிருந்தால், தெளிவான லேபிள்கள், வழிமுறைகள், மற்றும் பிழை அடையாளம்/பரிந்துரைகளை வழங்கவும்.
• படிக்கக்கூடிய தன்மை (WCAG 3.1): கரோசெல்லுக்குள் உள்ள உரை உள்ளடக்கம் படிக்கக்கூடியதாகவும், தெளிவான மொழியுடனும் பொருத்தமான வாசிப்பு மட்டத்துடனும் இருப்பதை உறுதி செய்யவும்.

4. வலுவானது

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

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

கரோசெல்களுக்கான முக்கிய அணுகல் அம்சங்கள் மற்றும் செயலாக்க உத்திகள்

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

1. சொற்பொருள் HTML கட்டமைப்பு

ஒரு திடமான சொற்பொருள் அடித்தளத்துடன் தொடங்கவும். ARIA பாத்திரங்களைப் பயன்படுத்துவதற்கு முன்பு பொருத்தமான இடங்களில் இயல்பான HTML கூறுகளைப் பயன்படுத்தவும்.

<div class="carousel-container">
  <!-- விருப்பமாக, ஸ்லைடு மாற்றங்களை அறிவிக்க ஒரு aria-live பகுதி -->
  <div id="carousel-announcer" aria-live="polite" class="visually-hidden"></div>

  <!-- முக்கிய கரோசெல் கட்டமைப்பு -->
  <div role="region" aria-roledescription="carousel" aria-label="பட கரோசெல்">
    <ul class="carousel-slides">
      <li id="slide1" role="group" aria-roledescription="slide" aria-label="3 இல் 1" tabindex="0">
        <img src="image1.jpg" alt="படம் 1 இன் விளக்கம்">
        <h3>ஸ்லைடு தலைப்பு 1</h3>
        <p>ஸ்லைடு 1 க்கான சுருக்கமான விளக்கம்.</p>
        <a href="#">மேலும் அறிக</a>
      </li>
      <li id="slide2" role="group" aria-roledescription="slide" aria-label="3 இல் 2" aria-hidden="true">
        <img src="image2.jpg" alt="படம் 2 இன் விளக்கம்">
        <h3>ஸ்லைடு தலைப்பு 2</h3>
        <p>ஸ்லைடு 2 க்கான சுருக்கமான விளக்கம்.</p>
        <a href="#">மேலும் கண்டறியுங்கள்</a>
      </li>
      <!-- மேலும் ஸ்லைடுகள் -->
    </ul>

    <!-- வழிசெலுத்தல் கட்டுப்பாடுகள் -->
    <button type="button" class="carousel-control prev" aria-controls="slide-container-id" aria-label="முந்தைய ஸ்லைடு">
      <span aria-hidden="true">&#x276E;</span>
    </button>
    <button type="button" class="carousel-control next" aria-controls="slide-container-id" aria-label="அடுத்த ஸ்லைடு">
      <span aria-hidden="true">&#x276F;</span>
    </button>

    <!-- ஸ்லைடு குறிகாட்டிகள் / பேஜர் புள்ளிகள் -->
    <div role="tablist" aria-label="கரோசெல் ஸ்லைடு குறிகாட்டிகள்">
      <button type="button" role="tab" aria-selected="true" aria-controls="slide1" id="tab-for-slide1" tabindex="0">
        <span class="visually-hidden">3 இல் ஸ்லைடு 1</span>
      </button>
      <button type="button" role="tab" aria-selected="false" aria-controls="slide2" id="tab-for-slide2" tabindex="-1">
        <span class="visually-hidden">3 இல் ஸ்லைடு 2</span>
      </button>
      <!-- மேலும் குறிகாட்டி பொத்தான்கள் -->
    </div>

    <!-- இடைநிறுத்தம்/இயக்கு பொத்தான் -->
    <button type="button" class="carousel-play-pause" aria-label="தானியங்கி ஸ்லைடுஷோவை இடைநிறுத்து">
      <span aria-hidden="true">&#x23F8;</span>
    </button>
  </div>
</div>

2. ARIA பாத்திரங்கள் மற்றும் பண்புக்கூறுகள்: உங்கள் கரோசெல்லுக்கு சொற்பொருளை வழங்குதல்

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

• role="region" அல்லது role="group": முக்கிய கரோசெல் கொள்கலனுக்குப் பயன்படுத்தவும். இது உள்ளடக்கத்தின் ஒரு உணரக்கூடிய பகுதிய வரையறுக்கிறது. மாற்றாக, role="group" பொருத்தமானதாக இருக்கலாம்.
• aria-roledescription="carousel": தனிப்பயன் பாத்திர விளக்கம், இது உறுப்பின் இயல்புநிலை சொற்பொருளை மேலெழுதுகிறது. இது திரை வாசிப்பான் பயனர்கள் ஒரு "region" அல்லது "group" உடன் தொடர்புகொள்வதை விட ஒரு "carousel" உடன் தொடர்புகொள்கிறார்கள் என்பதைப் புரிந்துகொள்ள உதவுகிறது.
• aria-label="பட கரோசெல்": முழு கரோசெல் கூறுக்கும் ஒரு அணுகக்கூடிய பெயரை வழங்குகிறது. திரை வாசிப்பான் பயனர்கள் கூற்றின் நோக்கத்தைப் புரிந்துகொள்வதற்கு இது அவசியம்.
• aria-live="polite": ஸ்லைடு மாற்றங்களை அறிவிக்கும் பார்வைக்கு மறைக்கப்பட்ட உறுப்புக்கு பயன்படுத்தப்படுகிறது. ஒரு ஸ்லைடு மாறும்போது, இந்த உறுப்பின் உள்ளடக்கத்தை புதுப்பிக்கவும் (எ.கா., "5 இல் ஸ்லைடு 2, புதிய வரவுகள்"). "Polite" என்பது திரை வாசிப்பான் அதன் தற்போதைய பணியை முடித்தவுடன் அறிவிப்பு செய்யப்படும், இது குறுக்கீடுகளைத் தடுக்கிறது.
• தனிப்பட்ட ஸ்லைடுகளுக்கு role="group": ஒவ்வொரு ஸ்லைடு கொள்கலனும் (எ.கா., <li> உறுப்பு) role="group" கொண்டிருக்க வேண்டும்.
• தனிப்பட்ட ஸ்லைடுகளுக்கு aria-roledescription="slide": கரோசெல் கொள்கலனைப் போலவே, இது அந்தக் குழு குறிப்பாக ஒரு "slide" என்பத தெளிவுபடுத்துகிறது.
• தனிப்பட்ட ஸ்லைடுகளுக்கு aria-label="3 இல் 1": தற்போதைய ஸ்லைடிற்கான சூழலை வழங்குகிறது, குறிப்பாக அது செயலில் இருக்கும்போது. இது ஜாவாஸ்கிரிப்ட் மூலம் மாறும் வகையில் புதுப்பிக்கப்படலாம்.
• aria-hidden="true": செயலற்ற ஸ்லைடுகளுக்குப் பயன்படுத்தப்படுகிறது. இது அவற்றை அணுகல் மரத்திலிருந்து நீக்குகிறது, தற்போது தெரியாத உள்ளடக்கத்தை திரை வாசிப்பான்கள் உணர்வதைத் தடுக்கிறது. ஒரு ஸ்லைடு செயலில் இருக்கும்போது, அதன் aria-hidden பண்புக்கூறு "false" ஆக அமைக்கப்பட வேண்டும் அல்லது அகற்றப்பட வேண்டும்.
• tabindex="0" மற்றும் tabindex="-1": செயலில் உள்ள ஸ்லைடு அதை நிரல்ரீதியாக கவனம் செலுத்தக்கூடியதாகவும், தாவல் வரிசையின் ஒரு பகுதியாகவும் மாற்ற tabindex="0" கொண்டிருக்க வேண்டும். செயலற்ற ஸ்லைடுகள் tabindex="-1" கொண்டிருக்க வேண்டும், இதனால் அவை நிரல்ரீதியாக கவனம் செலுத்தப்படலாம் (எ.கா., அவை செயலில் இருக்கும்போது) ஆனால் வரிசை தாவல் வழிசெலுத்தலின் ஒரு பகுதியாக இல்லை. செயலில் உள்ள ஸ்லைடுக்குள் உள்ள அனைத்து ஊடாடும் கூறுகளும் (இணைப்புகள், பொத்தான்கள்) இயல்பாகவே கவனம் செலுத்தக்கூடியதாக இருக்க வேண்டும்.
• வழிசெலுத்தல் பொத்தான்கள் (முந்தைய/அடுத்த):
  • <button type="button">: கட்டுப்பாடுகளுக்கு எப்போதும் இயல்பான பொத்தான் கூறுகளைப் பயன்படுத்தவும்.
  • aria-label="முந்தைய ஸ்லைடு": பொத்தானின் செயலுக்கான ஒரு சுருக்கமான, விளக்கமான லேபிளை வழங்குகிறது. காட்சி சின்னங்கள் மட்டும் போதுமானதாக இல்லை.
  • aria-controls="[ID_OF_SLIDE_CONTAINER]": அனைத்து உதவித் தொழில்நுட்பங்களாலும் அனைத்து சூழல்களிலும் உலகளவில் ஆதரிக்கப்படாவிட்டாலும், இந்தப் பண்புக்கூறு பொத்தானை அது கட்டுப்படுத்தும் பகுதிக்கு சொற்பொருள் ரீதியாக இணைக்கலாம், கூடுதல் சூழலை வழங்குகிறது.
  • <span aria-hidden="true">: பொத்தானுக்குள் காட்சி எழுத்துக்கள் அல்லது சின்னங்களைப் பயன்படுத்தினால் ( ❮ அல்லது ❯ போன்றவை), அவற்றை திரை வாசிப்பான்களிடமிருந்து மறைக்கவும், தேவையற்ற அல்லது குழப்பமான அறிவிப்புகளைத் தவிர்க்க. பொத்தானின் மீதான aria-label தேவையான சூழலை வழங்குகிறது.
• ஸ்லைடு குறிகாட்டிகள் (புள்ளிகள்/பக்க எண்):
  • role="tablist": குறிகாட்டி புள்ளிகளுக்கான கொள்கலன் இந்தப் பாத்திரத்தைப் பயன்படுத்த வேண்டும். இது தாவல்களின் பட்டியலைக் குறிக்கிறது.
  • aria-label="கரோசெல் ஸ்லைடு குறிகாட்டிகள்": தாவல் பட்டியல் கொள்கலனுக்கான ஒரு அணுகக்கூடிய பெயர்.
  • role="tab": ஒவ்வொரு தனிப்பட்ட குறிகாட்டி புள்ளி/பொத்தானும் இந்தப் பாத்திரத்தைக் கொண்டிருக்க வேண்டும்.
  • aria-selected="true"/"false": தொடர்புடைய ஸ்லைடு தற்போது செயலில் உள்ளதா என்பதைக் குறிக்கிறது. இது மாறும் வகையில் புதுப்பிக்கப்பட வேண்டும்.
  • aria-controls="[ID_OF_CORRESPONDING_SLIDE]": குறிகாட்டி தாவலை அதன் தொடர்புடைய ஸ்லைடுடன் இணைக்கிறது.
  • செயலில் உள்ள தாவலுக்கு tabindex="0", செயலற்ற தாவல்களுக்கு tabindex="-1": அம்புக்குறி விசைகளைப் பயன்படுத்தி குறிகாட்டி தாவல்களுக்கு இடையில் விசைப்பலகை வழிசெலுத்தலை அனுமதிக்கிறது (`tablist` கூறுகளுக்கான ஒரு பொதுவான முறை).
  • பார்வைக்கு மறைக்கப்பட்ட உரை: ஒவ்வொரு குறிகாட்டிக்கும், திரை வாசிப்பான் பயனர்களுக்கு முழுமையான சூழலை வழங்க <span class="visually-hidden">3 இல் ஸ்லைடு 1</span> போன்ற பார்வைக்கு மறைக்கப்பட்ட உரையை வழங்கவும்.
• இடைநிறுத்தம்/இயக்கு பொத்தான்:
  • <button type="button">: நிலையான பொத்தான் உறுப்பு.
  • aria-label="தானியங்கி ஸ்லைடுஷோவை இடைநிறுத்து" (இயங்கும் போது) அல்லது aria-label="தானியங்கி ஸ்லைடுஷோவைத் தொடங்கு" (இடைநிறுத்தப்பட்ட போது): தற்போதைய செயலைப் பிரதிபலிக்க லேபிளை மாறும் வகையில் புதுப்பிக்கவும்.
  • <span aria-hidden="true">: காட்சி சின்னத்தை (இயக்கு/இடைநிறுத்து சின்னம்) திரை வாசிப்பான்களிடமிருந்து மறைக்கவும்.

3. விசைப்பலகை வழிசெலுத்தல்: சுட்டிக்கு அப்பால்

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

• Tab மற்றும் Shift+Tab: பயனர்கள் கரோசெல்லுக்குள் தாவல் செய்ய, அதன் கட்டுப்பாடுகள் (முந்தைய, அடுத்த, இடைநிறுத்தம்/இயக்கு, ஸ்லைடு குறிகாட்டிகள்) வழியாக செல்ல, பின்னர் கரோசெல்லில் இருந்து வெளியே தாவல் செய்ய முடியும். ஒரு தர்க்கரீதியான மற்றும் கணிக்கக்கூடிய தாவல் வரிசையை உறுதி செய்யவும்.
• அம்புக்குறி விசைகள்:
  • இடது/வலது அம்புக்குறிகள்: முந்தைய/அடுத்த பொத்தான்கள் அல்லது செயலில் உள்ள ஸ்லைடில் கவனம் இருக்கும்போது ஸ்லைடுகளுக்கு இடையில் வழிசெலுத்த வேண்டும்.
  • Home/End விசைகள்: விருப்பமாக, Home முதல் ஸ்லைடிற்கும் End கடைசி ஸ்லைடிற்கும் செல்லலாம்.
  • தாவல் குறிகாட்டிகளுக்கு (role="tablist"): ஒரு குறிகாட்டியில் கவனம் இருக்கும்போது, இடது/வலது அம்புக்குறி விசைகள் குறிகாட்டிகளுக்கு இடையில் கவனத்தை நகர்த்த வேண்டும், மற்றும் Space/Enter தேர்ந்தெடுக்கப்பட்ட குறிகாட்டியைச் செயல்படுத்தி, தொடர்புடைய ஸ்லைடைக் காட்ட வேண்டும்.
• Enter/Space Bar: கரோசெல்லுக்குள் உள்ள பொத்தான்கள் மற்றும் இணைப்புகளைச் செயல்படுத்த வேண்டும். செயலில் உள்ள ஸ்லைடிற்கு (அதற்கு `tabindex="0"` இருந்தால்), Enter அல்லது Space ஐ அழுத்துவது விருப்பமாக ஸ்லைடை முன்னேற்றலாம் அல்லது ஸ்லைடிற்குள் ஒரு முதன்மை செயல்பாட்டிற்கான அழைப்பைச் செயல்படுத்தலாம், இது வடிவமைப்பைப் பொறுத்தது.

விசைப்பலகை தொடர்பு எடுத்துக்காட்டு தர்க்கம் (கருத்தியல் ஜாவாஸ்கிரிப்ட்):

// 'carouselElement' என்பது முக்கிய கரோசெல் கொள்கலன் என்று வைத்துக்கொள்வோம்
carouselElement.addEventListener('keydown', function(event) {
  switch (event.key) {
    case 'ArrowLeft':
      // முந்தைய ஸ்லைடைக் காண்பிப்பதற்கான தர்க்கம்
      break;
    case 'ArrowRight':
      // அடுத்த ஸ்லைடைக் காண்பிப்பதற்கான தர்க்கம்
      break;
    case 'Home':
      // முதல் ஸ்லைடைக் காண்பிப்பதற்கான தர்க்கம்
      break;
    case 'End':
      // கடைசி ஸ்லைடைக் காண்பிப்பதற்கான தர்க்கம்
      break;
    case 'Tab':
      // கவனம் சரியாக சுற்றுகிறது அல்லது கரோசெல்லில் இருந்து வெளியேறுகிறது என்பதை உறுதிப்படுத்தவும்
      break;
    case 'Enter':
    case ' ': // Space bar
      // தற்போது கவனம் செலுத்திய பொத்தான்/இணைப்பைச் செயல்படுத்த அல்லது பொருந்தினால் ஸ்லைடை முன்னேற்றுவதற்கான தர்க்கம்
      break;
  }
});

4. கவன மேலாண்மை மற்றும் காட்சி குறிகாட்டிகள்

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

• தெரியும் கவனக் குறிகாட்டி: உலாவியின் இயல்புநிலை கவன வெளிக்கோட்டை (அல்லது ஒரு தனிப்பயன், மிகவும் தெரியும் ஒன்று) ஒருபோதும் CSS இல் outline: none; ஐப் பயன்படுத்தி அகற்றப்படாமல் இருப்பதை உறுதி செய்யவும். ஒரு தெளிவான கவனக் குறிகாட்டி பயனர்கள் பக்கத்தில் தங்கள் நிலையை கண்காணிக்க உதவுகிறது.
• நிரல்ரீதியான கவனம்: ஒரு ஸ்லைடு மாறும்போது (குறிப்பாக முந்தைய/அடுத்த பொத்தான்கள் வழியாக வழிநடத்தப்பட்டால்), கவனம் நிரல்ரீதியாக புதிதாக செயலில் உள்ள ஸ்லைடிற்கு அல்லது அதற்குள் உள்ள ஒரு தர்க்கரீதியான உறுப்புக்கு நகர்த்தப்படுவதை உறுதி செய்யவும். மாற்றாக, கவனம் மாற்றத்தைத் தூண்டிய வழிசெலுத்தல் கட்டுப்பாட்டில் இருக்கலாம், ஆனால் `aria-live` பகுதி வழியாக புதிய ஸ்லைடை அறிவிப்பது முக்கியம்.
• தற்போதைய ஸ்லைடு குறிப்பு: தற்போது செயலில் உள்ள ஸ்லைடு குறிகாட்டியை பார்வைக்கு முன்னிலைப்படுத்தவும் (எ.கா., ஒரு இருண்ட புள்ளி, ஒரு பெரிய அளவு) அனைத்து பயனர்களுக்கும் சூழலை வழங்க.

5. தானியங்கி முன்னேற்றத்தின் மீதான கட்டுப்பாடு ("இடைநிறுத்தம், நிறுத்து, மறை" விதி)

இது கரோசெல்களுக்கான மிக முக்கியமான அணுகல் அம்சங்களில் ஒன்றாகும். தானாக முன்னேறும் கரோசெல்கள் மோசமான அணுகல் தடைகளாகும்.

• இயல்புநிலை நிலை: இடைநிறுத்தம்: சிறந்த முறையில், கரோசெல்கள் இயல்பாக தானாக முன்னேறக்கூடாது. பயனர்களை கைமுறையாக முன்னேற்றத்தை செயல்படுத்த அனுமதிக்கவும்.
• கட்டாய இடைநிறுத்தம்/இயக்கு பொத்தான்: தானாக முன்னேறுவது ஒரு வணிகத் தேவையாக இருந்தால், ஒரு முக்கிய, எளிதில் கண்டறியக்கூடிய, மற்றும் விசைப்பலகை-இயக்கக்கூடிய இடைநிறுத்தம்/இயக்கு பொத்தான் முற்றிலும் அவசியம்.
• கவனம்/சுட்டி மீது: ஒரு பயனரின் சுட்டி அதன் மீது வட்டமிடும்போது அல்லது கரோசெல்லுக்குள் உள்ள எந்த ஊடாடும் உறுப்புக்குள் கவனம் நுழையும்போது கரோசெல் தானாக இடைநிறுத்தப்பட வேண்டும். சுட்டி வெளியேறும்போது அல்லது கவனம் வெளியேறும்போது மட்டுமே அது மீண்டும் தொடங்க வேண்டும், பயனர் வெளிப்படையாக இடைநிறுத்து பொத்தானை அழுத்தவில்லை என்றால்.
• அறிவிப்புகள்: கரோசெல் இடைநிறுத்தப்படும்போது அல்லது இயங்கும்போது, இந்த மாற்றத்தை `aria-live` பகுதி வழியாக திரை வாசிப்பான் பயனர்களுக்கு அறிவிக்கவும் (எ.கா., "ஸ்லைடுஷோ இடைநிறுத்தப்பட்டது," "ஸ்லைடுஷோ இயங்குகிறது").

6. ஸ்லைடுகளுக்குள் உள்ளடக்க அணுகல்தன்மை

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

• படங்களுக்கான மாற்று உரை: குறிப்பிட்டுள்ளபடி, ஒவ்வொரு அர்த்தமுள்ள படமும் விளக்கமான `alt` உரையைக் கொண்டிருக்க வேண்டும்.
• ஊடகத்திற்கான எழுத்துப்படிகள்/தலைப்புகள்: ஸ்லைடுகளில் வீடியோக்கள் அல்லது ஆடியோ இருந்தால், அணுகக்கூடிய மாற்றுகளை வழங்கவும்.
• இணைப்பு/பொத்தான் லேபிள்கள்: அனைத்து இணைப்புகளும் பொத்தான்களும் சூழலுக்கு வெளியே அர்த்தமுள்ள, விளக்கமான உரையைக் கொண்டிருப்பதை உறுதி செய்யவும் (எ.கா., "மேலும் படிக்க" என்பதற்கு பதிலாக "உலகளாவிய முயற்சிகள் பற்றி மேலும் படிக்கவும்").
• தலைப்பு கட்டமைப்பு: உள்ளடக்கத்தை தர்க்கரீதியாக கட்டமைக்க ஸ்லைடுகளுக்குள் சரியான தலைப்பு படிநிலையைப் பயன்படுத்தவும் (<h1>, <h2>, <h3>, போன்றவை).
• வேறுபாடு: ஒவ்வொரு ஸ்லைடிலும் உள்ள அனைத்து உரை மற்றும் ஊடாடும் கூறுகளுக்கும் போதுமான வண்ண வேறுபாட்டை பராமரிக்கவும்.

பொதுவான தவறுகள் மற்றும் அவற்றை தவிர்ப்பது எப்படி

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

• கவன வெளிக்கோடுகளை அகற்றுதல்: தற்செயலாக அல்லது வேண்டுமென்றே CSS இல் outline: none; ஐப் பயன்படுத்துதல். தீர்வு: கவன வெளிக்கோடுகளை ஒருபோதும் அகற்ற வேண்டாம். அவற்றை அகற்றுவதற்கு பதிலாக சிறந்த தெரிவுநிலைக்காக தனிப்பயனாக்கவும்.
• தானியங்கி முன்னேற்றத்திற்கு இடைநிறுத்தம்/இயக்கு இல்லை: பயனர் கட்டுப்பாடு இல்லாமல் தானாக இயங்கும் கரோசெல்கள். தீர்வு: எப்போதும் ஒரு முக்கிய, விசைப்பலகை-இயக்கக்கூடிய இடைநிறுத்து பொத்தானை வழங்கவும். இயல்பாக இடைநிறுத்தப்பட்ட நிலைக்கு மாற்றுவதைக் கருத்தில் கொள்ளவும்.
• விசைப்பலகை வழிசெலுத்தல் இல்லை: சுட்டி கிளிக்குகள் அல்லது தொடு சைகைகளை மட்டுமே நம்பியிருத்தல். தீர்வு: அனைத்து ஊடாடும் கூறுகளுக்கும் மற்றும் ஸ்லைடு வழிசெலுத்தலுக்கும் விரிவான விசைப்பலகை ஆதரவை செயல்படுத்தவும்.
• தெளிவற்ற ARIA லேபிள்கள் அல்லது விடுபட்ட பாத்திரங்கள்: "பொத்தான்" போன்ற பொதுவான லேபிள்களைப் பயன்படுத்துதல் அல்லது ARIA பாத்திரங்களைத் தவிர்த்தல். தீர்வு: விளக்கமான aria-label பண்புக்கூறுகளை வழங்கவும் (எ.கா., "அடுத்த ஸ்லைடு," "5 இல் ஸ்லைடு 3, புதிய தயாரிப்புகளைக் கொண்டுள்ளது"). `role="region"`, `role="tablist"`, `role="tab"` போன்ற பொருத்தமான ARIA பாத்திரங்களைப் பயன்படுத்தவும்.
• தவறான aria-hidden பயன்பாடு: செயலில் உள்ள கூறுகளுக்கு aria-hidden="true" ஐப் பயன்படுத்துதல் அல்லது செயலற்றவற்றில் அதைத் தவிர்த்தல். தீர்வு: உண்மையிலேயே மறைக்கப்பட்ட மற்றும் தற்போது ஊடாடாத உள்ளடக்கத்திற்கு மட்டுமே aria-hidden="true" ஐப் பயன்படுத்தவும். தெரியும், செயலில் உள்ள ஸ்லைடுகளில் அது அகற்றப்பட்டிருப்பதை அல்லது `false` ஆக அமைக்கப்பட்டிருப்பதை உறுதி செய்யவும்.
• ஸ்லைடுகளுக்குள் அணுக முடியாத உள்ளடக்கம்: கரோசெல் பொறிமுறையில் மட்டும் கவனம் செலுத்துதல், ஆனால் அது காட்டும் உள்ளடக்கத்தைப் புறக்கணித்தல். தீர்வு: ஸ்லைடுகளுக்குள் உள்ள ஒவ்வொரு கூறும் (படங்கள், இணைப்புகள், உரை) அணுகல் தரநிலைகளை பூர்த்தி செய்வதை உறுதி செய்யவும்.
• ஒரு ஸ்லைடிற்கு அதிக உள்ளடக்கம்: உரையுடன் அல்லது அதிக ஊடாடும் கூறுகளுடன் ஸ்லைடுகளை ஓவர்லோட் செய்தல், குறிப்பாக அவை விரைவாக தானாக முன்னேறினால். தீர்வு: உள்ளடக்கத்தை சுருக்கமாக வைக்கவும். அத்தியாவசிய தகவல்களை மட்டும் வழங்கவும். ஒரு ஸ்லைடிற்கு குறிப்பிடத்தக்க வாசிப்பு அல்லது தொடர்பு தேவைப்பட்டால், போதுமான நேரம் அல்லது முன்னேற்றத்தின் மீது பயனர் கட்டுப்பாடு இருப்பதை உறுதி செய்யவும்.
• ஒரு முதன்மை வழிசெலுத்தலாக கரோசெல்: ஒரு வலைத்தளத்தின் முக்கியமான பிரிவுகளை வழிநடத்துவதற்கான முக்கிய வழிமுறையாக ஒரு கரோசெல்லைப் பயன்படுத்துதல். தீர்வு: கரோசெல்கள் காட்சிப்படுத்துவதற்கு சிறந்தவை. அத்தியாவசிய உள்ளடக்கம் மற்றும் வழிசெலுத்தல் எப்போதும் பக்கத்தில் வேறு இடங்களில் நிலையான, தெரியும் இணைப்புகள் மூலம் அணுகக்கூடியதாக இருக்க வேண்டும்.

உங்கள் அணுகக்கூடிய கரோசெல்லை சோதித்தல்

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

1. கைமுறை விசைப்பலகை சோதனை

• Tab விசை: நீங்கள் கரோசெல்லுக்குள், அதன் வழியாக (அனைத்து கட்டுப்பாடுகள் மற்றும் ஊடாடும் கூறுகள்), மற்றும் வெளியே தாவல் செய்ய முடியுமா? தாவல் வரிசை தர்க்கரீதியானதா?
• Shift+Tab: தலைகீழ் தாவல் சரியாக வேலை செய்கிறதா?
• Enter/Space: அனைத்து பொத்தான்களும் இணைப்புகளும் எதிர்பார்த்தபடி செயல்படுகின்றனவா?
• அம்புக்குறி விசைகள்: இடது/வலது அம்புக்குறிகள் ஸ்லைடுகளை நோக்கமாக வழிநடத்துகின்றனவா? அவை ஸ்லைடு குறிகாட்டிகளுக்கு வேலை செய்கின்றனவா?
• கவனக் குறிகாட்டி: கவன வெளிக்கோடு எப்போதும் தெரியும் மற்றும் தெளிவாக உள்ளதா?

2. திரை வாசிப்பான் சோதனை

குறைந்தபட்சம் ஒரு பிரபலமான திரை வாசிப்பான் கலவையுடன் சோதிக்கவும்:

• Windows: NVDA (இலவசம்) அல்லது JAWS (வணிக) உடன் Chrome அல்லது Firefox.
• macOS: VoiceOver (உள்ளமைக்கப்பட்டது) உடன் Safari அல்லது Chrome.
• Mobile: TalkBack (Android) அல்லது VoiceOver (iOS).

திரை வாசிப்பான் சோதனையின் போது, இதற்காகக் கேளுங்கள்:

• கரோசெல் கூறுகள் அவற்றின் சரியான பாத்திரங்களுடன் அறிவிக்கப்படுகின்றனவா (எ.கா., "கரோசெல்," "தாவல் பட்டியல்," "தாவல்")?
• அணுகக்கூடிய பெயர்கள் (aria-label, பொத்தான் உரை) தெளிவாகப் படிக்கப்படுகின்றனவா?
• ஸ்லைடு மாற்றங்கள் அறிவிக்கப்படுகின்றனவா (எ.கா., "5 இல் ஸ்லைடு 2")?
• நீங்கள் கரோசெல்லை இடைநிறுத்த/இயக்க முடியுமா? நிலை மாற்றம் அறிவிக்கப்படுகிறதா?
• திரை வாசிப்பான் கட்டளைகளைப் பயன்படுத்தி கரோசெல்லுக்குள் உள்ள அனைத்து ஊடாடும் கூறுகளையும் வழிநடத்த முடியுமா?
• aria-hidden சரியாக வேலை செய்கிறதா, மறைக்கப்பட்ட உள்ளடக்கம் அறிவிக்கப்படுவதைத் தடுக்கிறதா?

3. தானியங்கி அணுகல் சரிபார்ப்பவர்கள்

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

• உலாவி நீட்டிப்புகள்: Axe DevTools, Lighthouse (Chrome DevTools இல் உள்ளமைக்கப்பட்டது).
• ஆன்லைன் ஸ்கேனர்கள்: WAVE, Siteimprove, SortSite.

4. பல்வேறு நபர்களுடன் பயனர் சோதனை

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

ஒரு அணுகக்கூடிய கரோசெல் தீர்வைத் தேர்ந்தெடுப்பது அல்லது உருவாக்குவது

ஒரு புதிய திட்டத்தைத் தொடங்கும்போது, கரோசெல்களைச் செயல்படுத்த உங்களுக்கு பொதுவாக இரண்டு முக்கிய பாதைகள் உள்ளன:

1. ஏற்கனவே உள்ள நூலகங்கள் அல்லது கட்டமைப்புகளைப் பயன்படுத்துதல்

பல பிரபலமான ஜாவாஸ்கிரிப்ட் நூலகங்கள் (எ.கா., Swiper, Slick, Owl Carousel) கரோசெல் செயல்பாடுகளை வழங்குகின்றன. ஒன்றைத் தேர்ந்தெடுக்கும்போது, வலுவான, ஆவணப்படுத்தப்பட்ட அணுகல் அம்சங்களைக் கொண்டவற்றுக்கு முன்னுரிமை அளியுங்கள். இதற்காகப் பாருங்கள்:

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

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

2. புதிதாக உருவாக்குதல்

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

புதிதாக உருவாக்கும்போது முக்கியக் கருத்தில் கொள்ள வேண்டியவை:

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

முடிவுரை: இணக்கத்திற்கு அப்பால் - உண்மையான டிஜிட்டல் உள்ளடக்கத்தை நோக்கி

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

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