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

உதாரணம்:

<ol aria-label="முன்னேற்றம்"
  <li aria-current="step">படி 1: கணக்கு விவரங்கள்</li>
  <li>படி 2: விநியோக முகவரி</li>
  <li>படி 3: கட்டணத் தகவல்</li>
  <li>படி 4: மதிப்பாய்வு செய்து உறுதிப்படுத்தவும்</li>
</ol>

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

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

கருத்தில் கொள்ள வேண்டிய முக்கிய ARIA பண்புக்கூறுகள்:

• aria-label: ஸ்டெப்பர் கூறுக்கு ஒரு விளக்கமான லேபிளை வழங்குகிறது.
• aria-current="step": செயல்முறையின் தற்போதைய படியைக் குறிக்கிறது.
• aria-describedby: படியை விளக்கமான உரையுடன் தொடர்புபடுத்துகிறது.
• aria-invalid: ஒரு படியில் தவறான தரவு உள்ளதா என்பதைக் குறிக்கிறது.
• aria-required: ஒரு படிக்கு தரவு தேவையா என்பதைக் குறிக்கிறது.
• role="tablist", role="tab", role="tabpanel": படிகளுக்கு ஒரு டேப் போன்ற அமைப்பைப் பயன்படுத்தும்போது.
• aria-orientation="vertical" அல்லது aria-orientation="horizontal": படிகளின் தளவமைப்பு திசையை உதவித் தொழில்நுட்பங்களுக்குத் தெரிவிக்கிறது.

உதாரணம்:

<div role="tablist" aria-label="செக்அவுட் செயல்முறை">
  <button role="tab" aria-selected="true" aria-controls="step1" id="tab1">படி 1: விநியோகம்</button>
  <button role="tab" aria-selected="false" aria-controls="step2" id="tab2">படி 2: பில்லிங்</button>
  <button role="tab" aria-selected="false" aria-controls="step3" id="tab3">படி 3: மதிப்பாய்வு</button>
</div>
<div role="tabpanel" id="step1" aria-labelledby="tab1"><!-- விநியோக படிவ உள்ளடக்கம் --></div>
<div role="tabpanel" id="step2" aria-labelledby="tab2" hidden><!-- பில்லிங் படிவ உள்ளடக்கம் --></div>
<div role="tabpanel" id="step3" aria-labelledby="tab3" hidden><!-- மதிப்பாய்வு உள்ளடக்கம் --></div>

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

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

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

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

உதாரணம்:

<a href="#content" class="skip-link">முக்கிய உள்ளடக்கத்திற்குச் செல்லவும்</a>
<style>
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000;
  color: white;
  padding: 8px;
  z-index: 100;
}
.skip-link:focus {
  top: 0;
}
</style>

4. காட்சி வடிவமைப்பு மற்றும் மாறுபாடு

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

காட்சி வடிவமைப்பு மற்றும் மாறுபாட்டிற்கான முக்கிய கருத்தாய்வுகள்:

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

5. தெளிவான மற்றும் சுருக்கமான லேபிள்கள் மற்றும் வழிமுறைகள்

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

லேபிள்கள் மற்றும் வழிமுறைகளுக்கான முக்கிய கருத்தாய்வுகள்:

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

6. பிழை கையாளுதல் மற்றும் சரிபார்த்தல்

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

பிழை கையாளுதல் மற்றும் சரிபார்த்தலுக்கான முக்கிய கருத்தாய்வுகள்:

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

7. உதவித் தொழில்நுட்பங்களுடன் சோதித்தல்

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

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

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

8. மொபைல் அணுகல்தன்மை

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

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

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

9. முற்போக்கான மேம்பாட்டில் கவனம் செலுத்துங்கள்

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

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

10. ஆவணப்படுத்தல் மற்றும் எடுத்துக்காட்டுகள்

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

இதில் பின்வரும் தகவல்களைச் சேர்க்கவும்:

• தேவையான ARIA பண்புக்கூறுகள்.
• விசைப்பலகை இடைவினைகள்.
• ஸ்டைலிங் கருத்தாய்வுகள்.
• எடுத்துக்காட்டு குறியீடு துணுக்குகள்.

அணுகக்கூடிய ஸ்டெப்பர் கூறுகளின் எடுத்துக்காட்டுகள்

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

• ரியாக்ட்: ரீச் UI மற்றும் ARIA-கிட் போன்ற நூலகங்கள், ஸ்டெப்பர்கள் உட்பட, முன்பே கட்டமைக்கப்பட்ட அணுகக்கூடிய கூறுகளை வழங்குகின்றன, அவற்றை உங்கள் ரியாக்ட் பயன்பாடுகளில் பயன்படுத்தலாம். இந்த நூலகங்கள் உங்களுக்காக அணுகல்தன்மை வேலையின் பெரும்பகுதியைக் கையாளுகின்றன.
• ஆங்குலர்: ஆங்குலர் மெட்டீரியல் உள்ளமைக்கப்பட்ட அணுகல்தன்மை அம்சங்களுடன் ஒரு ஸ்டெப்பர் கூறை வழங்குகிறது.
• Vue.js: Vuetify மற்றும் Element UI போன்ற அணுகக்கூடிய ஸ்டெப்பர் கூறுகளை வழங்கும் பல Vue.js கூறு நூலகங்கள் உள்ளன.
• சாதாரண HTML/CSS/ஜாவாஸ்கிரிப்ட்: மிகவும் சிக்கலானதாக இருந்தாலும், நிலை மற்றும் நடத்தையை நிர்வகிக்க சொற்பொருள் HTML, ARIA பண்புக்கூறுகள் மற்றும் ஜாவாஸ்கிரிப்ட் ஆகியவற்றைப் பயன்படுத்தி அணுகக்கூடிய ஸ்டெப்பர்களை உருவாக்க முடியும்.

தவிர்க்க வேண்டிய பொதுவான இடர்பாடுகள்

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

முடிவுரை

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

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

அணுகல்தன்மையில் முதலீடு செய்வது ஒரு சிறந்த, அனைவரையும் உள்ளடக்கிய டிஜிட்டல் உலகில் முதலீடு செய்வதாகும்.