மரக் காட்சி: படிநிலைத் தரவு வழிசெலுத்தல் அணுகல்தன்மை

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

மரக் காட்சியின் கட்டமைப்பைப் புரிந்துகொள்ளுதல்

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

பொதுவான மரக் காட்சி கூறுகளின் முறிவு இங்கே:

• மரம் (Tree): முழு மரக் கட்டமைப்பையும் வைத்திருக்கும் ஒட்டுமொத்த கொள்கலன் உறுப்பு.
• மர உருப்படி (Treeitem): மரத்தில் உள்ள ஒரு தனி முனையத்தைக் குறிக்கிறது. இது ஒரு கிளையாக (விரிக்கக்கூடிய/சுருக்கக்கூடிய) அல்லது ஒரு இலையாக (குழந்தைகள் இல்லை) இருக்கலாம்.
• குழு (Group): (விருப்பத்தேர்வு) பெற்றோர் மர உருப்படிக்குள் குழந்தை மர உருப்படிகளை பார்வைக்கு குழுவாக்கும் ஒரு கொள்கலன்.
• மாற்றி/வெளிப்படுத்தல் ஐகான் (Toggler/Disclosure Icon): ஒரு கிளையை விரிக்க அல்லது சுருக்க பயனர்களை அனுமதிக்கும் ஒரு காட்சி காட்டி (எ.கா., ஒரு கூட்டல் அல்லது கழித்தல் குறி, ஒரு அம்பு).
• பெயர் (Label): ஒவ்வொரு மர உருப்படிக்கும் காட்டப்படும் உரை.

ARIA பங்குகள் மற்றும் பண்புக்கூறுகளின் முக்கியத்துவம்

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

அத்தியாவசிய ARIA பங்குகள்:

• role="tree": முழு மரத்தையும் பிரதிநிதித்துவப்படுத்தும் கொள்கலன் உறுப்புக்கு பயன்படுத்தப்படுகிறது. இது உறுப்பு ஒரு படிநிலை பட்டியலைக் கொண்டுள்ளது என்று உதவித் தொழில்நுட்பங்களுக்குத் தெரிவிக்கிறது.
• role="treeitem": மரத்தில் உள்ள ஒவ்வொரு முனைக்கும் பயன்படுத்தப்படுகிறது. இது ஒவ்வொரு முனையையும் மரத்திற்குள் ஒரு உருப்படியாக அடையாளம் காட்டுகிறது.
• role="group": குழந்தை மர உருப்படிகளை பார்வைக்கு குழுவாக்கும் கொள்கலன் உறுப்புக்கு பயன்படுத்தப்படுகிறது. இது எப்போதும் தேவையில்லை என்றாலும், இது சொற்பொருளை மேம்படுத்தும்.

முக்கிய ARIA பண்புக்கூறுகள்:

• aria-expanded="true|false": குழந்தைகளைக் கொண்ட மர உருப்படிகளுக்குப் பயன்படுத்தப்படுகிறது. கிளை தற்போது விரிவாக்கப்பட்டுள்ளதா (true) அல்லது சுருக்கப்பட்டுள்ளதா (false) என்பதைக் குறிக்கிறது. பயனர் முனையை விரிக்கும்போது அல்லது சுருக்கும்போது இந்த பண்புக்கூற்றை ஜாவாஸ்கிரிப்ட் பயன்படுத்தி மாறும் வகையில் புதுப்பிக்கவும்.
• aria-selected="true|false": ஒரு முனை தற்போது தேர்ந்தெடுக்கப்பட்டதா என்பதைக் குறிக்க மர உருப்படிகளுக்குப் பயன்படுத்தப்படுகிறது. ஒரே நேரத்தில் ஒரு முனை மட்டுமே தேர்ந்தெடுக்கப்பட வேண்டும் (உங்கள் பயன்பாட்டிற்கு பல-தேர்வு தேவைப்பட்டால் தவிர, সেক্ষেত্রে role="tree" உறுப்பில் aria-multiselectable="true" ஐப் பயன்படுத்தவும்).
• aria-label="[label text]" அல்லது aria-labelledby="[ID of label element]": மரம் அல்லது தனிப்பட்ட மர உருப்படிகளுக்கு ஒரு விளக்கமான லேபிளை வழங்குகிறது. லேபிள் பார்வைக்கு இல்லை என்றால் aria-label ஐப் பயன்படுத்தவும்; இல்லையெனில், மர உருப்படியை அதன் காட்சி லேபிளுடன் இணைக்க aria-labelledby ஐப் பயன்படுத்தவும்.
• tabindex="0": ஆரம்பத்தில் கவனம் செலுத்தப்பட்ட மர உருப்படிக்கு (வழக்கமாக முதல் ஒன்று) பயன்படுத்தப்படுகிறது. கவனம் பெறும் வரை மற்ற அனைத்து மர உருப்படிகளிலும் tabindex="-1" ஐப் பயன்படுத்தவும் (எ.கா., விசைப்பலகை வழிசெலுத்தல் மூலம்). இது சரியான விசைப்பலகை வழிசெலுத்தல் ஓட்டத்தை உறுதி செய்கிறது.

எடுத்துக்காட்டு ARIA செயல்படுத்தல்:

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

<ul role="tree" aria-label="File System"> <li role="treeitem" aria-expanded="true" aria-selected="false" tabindex="0"> <span>Root Folder</span> <ul role="group"> <li role="treeitem" aria-expanded="false" aria-selected="false" tabindex="-1"> <span>Folder 1</span> <ul role="group"> <li role="treeitem" aria-selected="false" tabindex="-1"><span>File 1.txt</span></li> <li role="treeitem" aria-selected="false" tabindex="-1"><span>File 2.txt</span></li> </ul> </li> <li role="treeitem" aria-selected="false" tabindex="-1"><span>Folder 2</span></li> </ul> </li> </ul>

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

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

• மேல் அம்பு (Up Arrow): மரத்தில் உள்ள முந்தைய முனைக்குக் கவனத்தை நகர்த்துகிறது.
• கீழ் அம்பு (Down Arrow): மரத்தில் உள்ள அடுத்த முனைக்குக் கவனத்தை நகர்த்துகிறது.
• இடது அம்பு (Left Arrow):
  • முனை விரிவாக்கப்பட்டிருந்தால், முனையைச் சுருக்குகிறது.
  • முனை சுருக்கப்பட்டிருந்தாலோ அல்லது குழந்தைகள் இல்லாவிட்டாலோ, கவனத்தை முனையின் பெற்றோருக்கு நகர்த்துகிறது.
• வலது அம்பு (Right Arrow):
  • முனை சுருக்கப்பட்டிருந்தால், முனையை விரிவுபடுத்துகிறது.
  • முனை விரிவாக்கப்பட்டிருந்தால், முதல் குழந்தைக்கு கவனத்தை நகர்த்துகிறது.
• ஹோம் (Home): மரத்தில் உள்ள முதல் முனைக்கு கவனத்தை நகர்த்துகிறது.
• எண்ட் (End): மரத்தில் தெரியும் கடைசி முனைக்கு கவனத்தை நகர்த்துகிறது.
• ஸ்பேஸ்பார் அல்லது என்டர்: கவனம் செலுத்தப்பட்ட முனையைத் தேர்ந்தெடுக்கிறது (தேர்வு ஆதரிக்கப்பட்டால்).
• தட்டச்சு செய்தல் (ஒரு எழுத்து அல்லது எண்): தட்டச்சு செய்யப்பட்ட எழுத்தில் தொடங்கும் அடுத்த முனைக்கு கவனத்தை நகர்த்துகிறது. ஒவ்வொரு அடுத்தடுத்த விசை அழுத்தத்துடனும் தேடலைத் தொடர்கிறது.
• கூட்டல் (+): தற்போது கவனம் செலுத்தப்பட்ட முனையை விரிவுபடுத்துகிறது (சுருக்கும்போது வலது அம்புக்கு சமம்).
• கழித்தல் (-): தற்போது கவனம் செலுத்தப்பட்ட முனையைச் சுருக்குகிறது (விரிக்கும்போது இடது அம்புக்கு சமம்).
• நட்சத்திரக்குறி (*): தற்போதைய மட்டத்தில் உள்ள அனைத்து முனைகளையும் விரிவுபடுத்துகிறது (உலகளவில் ஆதரிக்கப்படவில்லை ஆனால் பெரும்பாலும் நன்மை பயக்கும்).

விசைப்பலகை வழிசெலுத்தலுக்கான ஜாவாஸ்கிரிப்ட் செயல்படுத்தல்:

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

const tree = document.querySelector('[role="tree"]'); const treeitems = document.querySelectorAll('[role="treeitem"]'); tree.addEventListener('keydown', (event) => { const focusedElement = document.activeElement; let nextElement; switch (event.key) { case 'ArrowUp': event.preventDefault(); // Prevent scrolling the page // Logic to find the previous treeitem (requires traversing the DOM) // ... nextElement = findPreviousTreeitem(focusedElement); break; case 'ArrowDown': event.preventDefault(); // Logic to find the next treeitem // ... nextElement = findNextTreeitem(focusedElement); break; case 'ArrowLeft': event.preventDefault(); if (focusedElement.getAttribute('aria-expanded') === 'true') { // Collapse the node focusedElement.setAttribute('aria-expanded', 'false'); } else { // Move focus to the parent nextElement = findParentTreeitem(focusedElement); } break; case 'ArrowRight': event.preventDefault(); if (focusedElement.getAttribute('aria-expanded') === 'false') { // Expand the node focusedElement.setAttribute('aria-expanded', 'true'); } else { // Move focus to the first child nextElement = findFirstChildTreeitem(focusedElement); } break; case 'Home': event.preventDefault(); nextElement = treeitems[0]; break; case 'End': event.preventDefault(); nextElement = treeitems[treeitems.length - 1]; break; case ' ': // Spacebar case 'Enter': event.preventDefault(); // Logic to select the focused node selectNode(focusedElement); break; default: // Handle character typing for navigating to nodes that start with that character break; } if (nextElement) { focusedElement.setAttribute('tabindex', '-1'); nextElement.setAttribute('tabindex', '0'); nextElement.focus(); } });

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

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

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

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

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

திரை வாசிப்பானுக்கான குறிப்புகள்

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

• விளக்கமான லேபிள்கள்: மரம் மற்றும் தனிப்பட்ட மர உருப்படிகளுக்கு விளக்கமான லேபிள்களை வழங்க aria-label அல்லது aria-labelledby ஐப் பயன்படுத்தவும். இந்த லேபிள்கள் சுருக்கமாகவும் தகவலறிந்ததாகவும் இருக்க வேண்டும்.
• நிலை அறிவிப்புகள்: நிலை மாற்றங்கள் (எ.கா., ஒரு முனையை விரித்தல்/சுருக்குதல், ஒரு முனையைத் தேர்ந்தெடுப்பது) திரை வாசிப்பானால் சரியாக அறிவிக்கப்படுவதை உறுதிசெய்யவும். aria-expanded மற்றும் aria-selected பண்புக்கூறுகளைச் சரியாகப் புதுப்பிப்பதன் மூலம் இது அடையப்படுகிறது.
• படிநிலை அறிவிப்புகள்: திரை வாசிப்பான்கள் படிநிலையில் உள்ள ஒவ்வொரு முனையின் அளவையும் அறிவிக்க வேண்டும் (எ.கா., "நிலை 2, கோப்புறை 1"). ARIA பங்குகள் சரியாகச் செயல்படுத்தப்படும்போது இது பெரும்பாலான திரை வாசிப்பான்களால் தானாகவே கையாளப்படுகிறது.
• விசைப்பலகை வழிசெலுத்தல் நிலைத்தன்மை: விசைப்பலகை வழிசெலுத்தல் வெவ்வேறு உலாவிகள் மற்றும் திரை வாசிப்பான்களில் நிலையானதாகவும் கணிக்கக்கூடியதாகவும் இருப்பதை உறுதி செய்யவும். ஏதேனும் முரண்பாடுகளைக் கண்டறிந்து தீர்க்க உங்கள் மரக் காட்சியை பல திரை வாசிப்பான்களுடன் (எ.கா., NVDA, JAWS, VoiceOver) சோதிக்கவும்.
• படிப்படியான மேம்பாடு: ஜாவாஸ்கிரிப்ட் முடக்கப்பட்டிருந்தால், மரக் காட்சி ஒரு சீரழிந்த நிலையில் இருந்தாலும், அணுகக்கூடியதாக இருக்க வேண்டும். ஜாவாஸ்கிரிப்ட் இல்லாவிட்டாலும் ஒரு அடிப்படை அளவிலான அணுகலை வழங்க சொற்பொருள் HTML (எ.கா., உள்ளமைக்கப்பட்ட பட்டியல்கள்) பயன்படுத்துவதைக் கவனியுங்கள்.

உலாவிகளுக்கிடையேயான இணக்கத்தன்மை

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

• டெஸ்க்டாப் உலாவிகள்: Chrome, Firefox, Safari, Edge
• மொபைல் உலாவிகள்: Chrome (Android மற்றும் iOS), Safari (iOS)
• இயக்க முறைமைகள்: Windows, macOS, Linux, Android, iOS
• திரை வாசிப்பான்கள்: NVDA (Windows), JAWS (Windows), VoiceOver (macOS மற்றும் iOS)

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

சோதனை மற்றும் சரிபார்ப்பு

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

• கைமுறை சோதனை: மரக் காட்சியை வழிநடத்தவும், அனைத்து அம்சங்களும் அணுகக்கூடியவை என்பதைச் சரிபார்க்கவும் திரை வாசிப்பான் மற்றும் விசைப்பலகையைப் பயன்படுத்தவும்.
• தானியங்கு சோதனை: சாத்தியமான அணுகல்தன்மை சிக்கல்களைக் கண்டறிய அணுகல்தன்மை சோதனை கருவிகளைப் (எ.கா., axe DevTools, WAVE) பயன்படுத்தவும்.
• பயனர் சோதனை: உங்கள் மரக் காட்சியின் அணுகல்தன்மை குறித்த நிஜ உலகக் கருத்துக்களைப் பெற, மாற்றுத்திறனாளி பயனர்களை சோதனைச் செயல்பாட்டில் ஈடுபடுத்துங்கள்.
• WCAG இணக்கம்: வலை உள்ளடக்க அணுகல்தன்மை வழிகாட்டுதல்களை (WCAG) 2.1 நிலை AA ஐ சந்திப்பதை நோக்கமாகக் கொள்ளுங்கள். WCAG வலை உள்ளடக்கத்தை மேலும் அணுகக்கூடியதாக மாற்றுவதற்கான சர்வதேச அளவில் அங்கீகரிக்கப்பட்ட வழிகாட்டுதல்களின் தொகுப்பை வழங்குகிறது.

அணுகக்கூடிய மரக் காட்சிகளுக்கான சிறந்த நடைமுறைகள்

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

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

மேம்பட்ட பரிசீலனைகள்

• தேவைக்கேற்ப ஏற்றுதல் (Lazy Loading): மிகப் பெரிய மரங்களுக்கு, முனைகள் தேவைப்படும்போது மட்டுமே ஏற்றுவதற்கு தேவைக்கேற்ப ஏற்றுதலைச் செயல்படுத்தவும். இது செயல்திறனை மேம்படுத்தி ஆரம்ப ஏற்றுதல் நேரத்தைக் குறைக்கும். முனைகள் ஏற்றப்படும்போது பயனருக்கு பொருத்தமான பின்னூட்டத்தை வழங்கி, அணுகக்கூடிய முறையில் தேவைக்கேற்ப ஏற்றுதல் செயல்படுத்தப்படுவதை உறுதிசெய்யவும். ஏற்றுதல் நிலையை அறிவிக்க ARIA லைவ் பகுதிகளைப் பயன்படுத்தவும்.
• இழுத்து விடுதல் (Drag and Drop): உங்கள் மரக் காட்சி இழுத்து விடும் செயல்பாட்டை ஆதரித்தால், அது விசைப்பலகை பயனர்கள் மற்றும் திரை வாசிப்பான் பயனர்களுக்கும் அணுகக்கூடியதாக இருப்பதை உறுதிசெய்யவும். முனைகளை இழுத்து விடுவதற்கு மாற்று விசைப்பலகை கட்டளைகளை வழங்கவும்.
• சூழல் மெனுக்கள் (Context Menus): உங்கள் மரக் காட்சியில் சூழல் மெனுக்கள் இருந்தால், அவை விசைப்பலகை பயனர்கள் மற்றும் திரை வாசிப்பான் பயனர்களுக்கும் அணுகக்கூடியதாக இருப்பதை உறுதிசெய்யவும். சூழல் மெனு மற்றும் அதன் விருப்பங்களை அடையாளம் காண ARIA பண்புக்கூறுகளைப் பயன்படுத்தவும்.
• உலகமயமாக்கல் மற்றும் உள்ளூர்மயமாக்கல்: உங்கள் மரக் காட்சியை வெவ்வேறு மொழிகள் மற்றும் கலாச்சாரங்களுக்கு எளிதில் உள்ளூர்மயமாக்க வடிவமைக்கவும். காட்சி அமைப்பு மற்றும் விசைப்பலகை வழிசெலுத்தலில் வெவ்வேறு உரை திசைகளின் (எ.கா., வலமிருந்து இடமாக) தாக்கத்தைக் கவனியுங்கள்.

முடிவுரை

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

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