தமிழ்

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

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

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

மோடல் மற்றும் நான்-மோடல் உரையாடல்களைப் புரிந்துகொள்ளுதல்

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

உரையாடல்களுக்கான அணுகல்தன்மை பரிசீலனைகள்

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

உரையாடல் அணுகல்தன்மைக்கான ARIA பண்புகள்

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

மோடல் உரையாடல் அணுகல்தன்மை: சிறந்த நடைமுறைகள்

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

1. சரியான ARIA பண்புகள்

முன்னர் குறிப்பிட்டபடி, `role="dialog"` (அல்லது அவசர செய்திகளுக்கு `role="alertdialog"`), `aria-labelledby`, `aria-describedby`, மற்றும் `aria-modal="true"` ஆகியவற்றைப் பயன்படுத்துவது உரையாடலையும் அதன் நோக்கத்தையும் உதவித் தொழில்நுட்பங்களுக்கு அடையாளம் காட்டுவதற்கு முக்கியமானது.

உதாரணம்:

<div role="dialog" aria-labelledby="confirmation-heading" aria-modal="true"> <h2 id="confirmation-heading">நீக்குவதை உறுதிப்படுத்தவும்</h2> <p>இந்த உருப்படியை நீக்க விரும்புகிறீர்களா? இந்தச் செயலைச் செயல்தவிர்க்க முடியாது.</p> <button>உறுதிப்படுத்தவும்</button> <button>ரத்துசெய்</button> </div>

2. கவன மேலாண்மை

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

செயல்படுத்தல் பரிசீலனைகள்:

உதாரணம் (கருத்தியல் ஜாவாஸ்கிரிப்ட்):

function openModal(modalId) { const modal = document.getElementById(modalId); modal.style.display = "block"; const firstFocusableElement = modal.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'); firstFocusableElement.focus(); } function closeModal(modalId, triggeringElementId) { const modal = document.getElementById(modalId); modal.style.display = "none"; const triggeringElement = document.getElementById(triggeringElementId); triggeringElement.focus(); }

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

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

பரிசீலனைகள்:

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

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

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

முடிந்தவரை சொற்பொருள் HTML கூறுகளைப் பயன்படுத்தவும். எடுத்துக்காட்டாக, பொத்தான்களுக்கு <button> கூறுகள், படிவ உள்ளீடுகளை லேபிளிட <label> கூறுகள், மற்றும் தலைப்புகளுக்கு <h2> அல்லது <h3> கூறுகளைப் பயன்படுத்தவும்.

6. சர்வதேசமயமாக்கல் மற்றும் உள்ளூர்மயமாக்கல்

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

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

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

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

1. தெளிவான காட்சி வேறுபாடு

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

2. கவன மேலாண்மை

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

3. ARIA பண்புகள்

உரையாடல் பற்றிய சொற்பொருள் தகவல்களை உதவித் தொழில்நுட்பங்களுக்கு வழங்க `role="dialog"`, `aria-labelledby`, மற்றும் `aria-describedby` ஆகியவற்றைப் பயன்படுத்தவும். நான்-மோடல் உரையாடல்களை மோடல் உரையாடல்களிலிருந்து வேறுபடுத்த `aria-modal="false"` அல்லது `aria-modal` பண்பை விட்டுவிடுவது முக்கியம்.

உதாரணம்:

<div role="dialog" aria-labelledby="font-settings-heading"> <h2 id="font-settings-heading">எழுத்துரு அமைப்புகள்</h2> <label for="font-size">எழுத்துரு அளவு:</label> <input type="number" id="font-size" value="12"> <button>பயன்படுத்து</button> </div>

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

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

5. ஒன்றுடன் ஒன்று மோதுவதைத் தவிர்க்கவும்

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

6. விழிப்புணர்வு மற்றும் தொடர்பு

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

நடைமுறை எடுத்துக்காட்டுகள் மற்றும் குறியீட்டுத் துணுக்குகள்

இந்தக் கருத்துகளை விளக்க சில நடைமுறை எடுத்துக்காட்டுகள் மற்றும் குறியீட்டுத் துணுக்குகளைப் பார்ப்போம்.

எடுத்துக்காட்டு 1: ஒரு மோடல் உறுதிப்படுத்தல் உரையாடல்

<button id="delete-button" onclick="openModal('delete-confirmation-modal', 'delete-button')">உருப்படியை நீக்கு</button> <div id="delete-confirmation-modal" role="dialog" aria-labelledby="delete-heading" aria-modal="true" style="display:none;"> <h2 id="delete-heading">நீக்குவதை உறுதிப்படுத்தவும்</h2> <p>இந்த உருப்படியை நீக்க விரும்புகிறீர்களா? இந்தச் செயலைச் செயல்தவிர்க்க முடியாது.</p> <button onclick="//Delete item logic; closeModal('delete-confirmation-modal', 'delete-button')">உறுதிப்படுத்தவும்</button> <button onclick="closeModal('delete-confirmation-modal', 'delete-button')">ரத்துசெய்</button> </div>

எடுத்துக்காட்டு 2: ஒரு நான்-மோடல் எழுத்துரு அமைப்புகள் உரையாடல்

<button id="font-settings-button" onclick="openModal('font-settings-dialog', 'font-settings-button')">எழுத்துரு அமைப்புகள்</button> <div id="font-settings-dialog" role="dialog" aria-labelledby="font-settings-heading" style="display:none;"> <h2 id="font-settings-heading">எழுத்துரு அமைப்புகள்</h2> <label for="font-size">எழுத்துரு அளவு:</label> <input type="number" id="font-size" value="12"><br> <label for="font-family">எழுத்துரு குடும்பம்:</label> <select id="font-family"> <option value="Arial">Arial</option> <option value="Verdana">Verdana</option> <option value="Times New Roman">Times New Roman</option> </select><br> <button onclick="//Apply font settings logic">பயன்படுத்து</button> </div>

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

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

WCAG இணக்கம்

அணுகக்கூடிய உரையாடல்களை உருவாக்க வலை உள்ளடக்க அணுகல்தன்மை வழிகாட்டுதல்களை (WCAG) கடைப்பிடிப்பது மிகவும் முக்கியமானது. தொடர்புடைய WCAG வெற்றி அளவுகோல்கள் பின்வருமாறு:

உலகளாவிய பரிசீலனைகள்

உலகளாவிய பார்வையாளர்களுக்காக உரையாடல்களை வடிவமைக்கும்போது, பின்வருவனவற்றைக் கவனியுங்கள்:

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

முடிவுரை

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