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

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

இருப்பினும், அவற்றின் தற்காலிக மற்றும் நுட்பமான தன்மை ஒரு இருமுனைக் கத்தி போன்றது. சில பயனர்களுக்கு இது குறைந்தபட்ச குறுக்கீடாக இருந்தாலும், இந்த அம்சம் மற்றவர்களுக்கு, குறிப்பாக திரை வாசிப்பான்கள் போன்ற உதவி தொழில்நுட்பங்களைச் சார்ந்திருப்பவர்களுக்கு, முற்றிலும் அணுக முடியாததாக ஆக்குகிறது. அணுக முடியாத ஒரு டோஸ்ட் அறிவிப்பு ஒரு சிறிய असुविधा மட்டுமல்ல; அது ஒரு மௌனத் தோல்வி, பயனர்களை நிச்சயமற்ற மற்றும் விரக்தியடையச் செய்கிறது. "அமைப்புகள் சேமிக்கப்பட்டன" என்ற செய்தியை உணர முடியாத ஒரு பயனர், மீண்டும் சேமிக்க முயற்சிக்கலாம் அல்லது தங்கள் மாற்றங்கள் வெற்றிகரமாக இருந்ததா என்று தெரியாமல் பயன்பாட்டை விட்டு வெளியேறலாம்.

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

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

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

1. அவை நிலையற்றவை மற்றும் நேரம் சார்ந்தவை

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

2. அவை ஃபோகஸைப் பெறுவதில்லை

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

3. அவை சூழலுக்குப் புறம்பாகத் தோன்றுகின்றன

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

WCAG உடன் இணைப்பு: அணுகல்தன்மையின் நான்கு தூண்கள்

வலை உள்ளடக்க அணுகல்தன்மை வழிகாட்டுதல்கள் (WCAG) நான்கு கோட்பாடுகளின் மீது கட்டமைக்கப்பட்டுள்ளன. அணுக முடியாத டோஸ்ட்கள் அவற்றில் பலவற்றை மீறுகின்றன.

• உணரக்கூடியது (Perceivable): ஒரு பார்வை குறைபாடுள்ள பயனர் தனது திரை வாசிப்பான் அறிவிக்காததால் அறிவிப்பை உணர முடியாவிட்டால், அல்லது ஒரு அறிவாற்றல் குறைபாடுள்ள பயனருக்கு அதைப் படிக்க போதுமான நேரம் இல்லாவிட்டால், அந்தத் தகவல் உணரக்கூடியதாக இல்லை. இது WCAG வெற்றி அளவுகோல் 2.2.1 நேரம் சரிசெய்யக்கூடியது (Timing Adjustable) உடன் தொடர்புடையது, இது பயனர்களுக்கு உள்ளடக்கத்தைப் படிக்கவும் பயன்படுத்தவும் போதுமான நேரம் வழங்கப்பட வேண்டும் என்று கோருகிறது.
• இயக்கக்கூடியது (Operable): ஒரு டோஸ்டில் 'மூடு' பொத்தான் போன்ற ஒரு செயல்பாடு இருந்தால், அது விசைப்பலகை வழியாக ஃபோகஸ் செய்யக்கூடியதாகவும் இயக்கக்கூடியதாகவும் இருக்க வேண்டும். அது தகவல் சார்ந்ததாக இருந்தாலும், பயனர் அதை கைமுறையாக நிராகரிக்கும் திறன் போன்ற கட்டுப்பாட்டைக் கொண்டிருக்க வேண்டும்.
• புரிந்துகொள்ளக்கூடியது (Understandable): டோஸ்டின் உள்ளடக்கம் தெளிவாகவும் சுருக்கமாகவும் இருக்க வேண்டும். ஒரு திரை வாசிப்பான் செய்தியை சூழலுக்குப் புறம்பாக அறிவித்தால், அதன் பொருள் புரிந்துகொள்ள முடியாததாக இருக்கலாம். இது WCAG 4.1.2 பெயர், பங்கு, மதிப்பு (Name, Role, Value) உடனும் தொடர்புடையது, இது ஒரு UI கூறுகளின் நோக்கம் நிரலாக்க ரீதியாக தீர்மானிக்கப்பட வேண்டும் என்று கோருகிறது.
• வலுவானது (Robust): அறிவிப்பு, உதவி தொழில்நுட்பங்கள் உட்பட தற்போதைய மற்றும் எதிர்கால பயனர் முகவர்களுடன் இணக்கமான வகையில் நிலையான வலை தொழில்நுட்பங்களைப் பயன்படுத்தி செயல்படுத்தப்பட வேண்டும். ARIA தரநிலைகளைப் புறக்கணிக்கும் ஒரு தனிப்பயன்-உருவாக்கப்பட்ட டோஸ்ட் வலுவானது அல்ல.

தொழில்நுட்பத் தீர்வு: மீட்புக்கு வரும் ARIA லைவ் பகுதிகள்

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

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

டோஸ்ட்களுக்கான முக்கிய ARIA பண்புக்கூறுகள்

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

1. role பண்புக்கூறு

`role` பண்புக்கூறு உறுப்பின் சொற்பொருள் நோக்கத்தை வரையறுக்கிறது. லைவ் பகுதிகளுக்கு, கருத்தில் கொள்ள மூன்று முதன்மை பங்குகள் உள்ளன:

• role="status": இது டோஸ்ட் அறிவிப்புகளுக்கு மிகவும் பொதுவான மற்றும் பொருத்தமான பங்கு. இது முக்கியமான ஆனால் அவசரமில்லாத தகவல் செய்திகளுக்குப் பயன்படுத்தப்படுகிறது. இது aria-live="polite" உடன் இணைகிறது, அதாவது திரை வாசிப்பான் அறிவிப்பை வெளியிடுவதற்கு முன்பு ஒரு சிறிய செயலற்ற தருணத்திற்காக (ஒரு வாக்கியத்தின் முடிவு போல) காத்திருக்கும், இது பயனர் பணியின் நடுவில் குறுக்கிடப்படுவதில்லை என்பதை உறுதி செய்கிறது. "சுயவிவரம் புதுப்பிக்கப்பட்டது," "வண்டியில் பொருள் சேர்க்கப்பட்டது," அல்லது "செய்தி அனுப்பப்பட்டது" போன்ற உறுதிப்படுத்தல்களுக்கு இதைப் பயன்படுத்தவும்.
• role="alert": இந்த பங்கு பயனரின் உடனடி கவனம் தேவைப்படும் அவசரமான, நேரம் சார்ந்த தகவல்களுக்காக ஒதுக்கப்பட்டுள்ளது. இது aria-live="assertive" உடன் இணைகிறது, இது செய்தியை வழங்க உடனடியாக திரை வாசிப்பானை குறுக்கிடும். இது மிகவும் சீர்குலைப்பதாக இருக்கக்கூடும் என்பதால் இதை மிகுந்த எச்சரிக்கையுடன் பயன்படுத்தவும். "உங்கள் அமர்வு காலாவதியாகப் போகிறது" போன்ற பிழைச் செய்திகள் அல்லது "இணைப்பு துண்டிக்கப்பட்டது" போன்ற முக்கியமான எச்சரிக்கைகளுக்கு இது பொருத்தமானது. role="alert" ஐ அதிகமாகப் பயன்படுத்துவது உங்கள் பயனர்களிடம் கத்துவது போன்றது.
• role="log": இது ஒரு குறைவான பொதுவான பங்கு, அரட்டை பதிவுகள் அல்லது பிழை கன்சோல்கள் போன்ற புதிய செய்திகள் இறுதியில் சேர்க்கப்படும் ஒரு தகவல் பதிவை உருவாக்கப் பயன்படுகிறது. இது பொதுவாக வழக்கமான டோஸ்ட் அறிவிப்புகளுக்கு சிறந்த தேர்வாக இருக்காது.

2. aria-live பண்புக்கூறு

`role` பண்புக்கூறு பெரும்பாலும் ஒரு குறிப்பிட்ட `aria-live` நடத்தையை సూசிக்குகிறது, ஆனால் நீங்கள் மேலும் கட்டுப்பாட்டிற்கு அதை வெளிப்படையாக அமைக்கலாம். இது மாற்றத்தை *எப்படி* அறிவிக்க வேண்டும் என்று திரை வாசிப்பானுக்குச் சொல்கிறது.

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

3. aria-atomic பண்புக்கூறு

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

• aria-atomic="true": லைவ் பகுதிக்குள் உள்ள உள்ளடக்கத்தின் எந்தப் பகுதி மாறினாலும், திரை வாசிப்பான் அந்த உறுப்பின் முழு உள்ளடக்கத்தையும் படிக்கும். இது கிட்டத்தட்ட எப்போதும் ஒரு டோஸ்ட் அறிவிப்புக்கு நீங்கள் விரும்புவது, முழு செய்தியும் சூழலில் படிக்கப்படுவதை உறுதி செய்கிறது.
• aria-atomic="false": திரை வாசிப்பான் சேர்க்கப்பட்ட அல்லது மாற்றப்பட்ட கணுவை மட்டுமே அறிவிக்கும். இது டோஸ்ட்களுக்கு துண்டு துண்டான மற்றும் குழப்பமான அறிவிப்புகளுக்கு வழிவகுக்கும்.

அனைத்தையும் ஒன்றிணைத்தல்: குறியீடு எடுத்துக்காட்டுகள்

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

HTML கட்டமைப்பு

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

<!-- நிலையான அறிவிப்புகளுக்கான ஒரு பணிவான லைவ் பகுதி -->
<div id="toast-container-polite" 
     role="status" 
     aria-live="polite" 
     aria-atomic="true">
  <!-- டோஸ்ட்கள் இங்கே மாறும் வகையில் செருகப்படும் -->
</div>

<!-- அவசர எச்சரிக்கைகளுக்கான ஒரு உறுதியான லைவ் பகுதி -->
<div id="toast-container-assertive" 
     role="alert" 
     aria-live="assertive" 
     aria-atomic="true">
  <!-- அவசர டோஸ்ட்கள் இங்கே மாறும் வகையில் செருகப்படும் -->
</div>

ஒரு பணிவான அறிவிப்புக்கான ஜாவாஸ்கிரிப்ட்

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

function showPoliteToast(message, duration = 5000) {
  const container = document.getElementById('toast-container-polite');

  // டோஸ்ட் உறுப்பை உருவாக்குகிறது
  const toast = document.createElement('div');
  toast.className = 'toast';
  toast.textContent = message;

  // டோஸ்ட்டை கண்டெய்னரில் சேர்க்கிறது
  container.appendChild(toast);

  // டோஸ்ட்டை அகற்ற ஒரு காலக்கெடுவை அமைக்கிறது
  setTimeout(() => {
    container.removeChild(toast);
  }, duration);
}

// எடுத்துக்காட்டு பயன்பாடு:
document.getElementById('save-button').addEventListener('click', () => {
  // ... சேமிக்கும் தர்க்கம் ...
  showPoliteToast('உங்கள் அமைப்புகள் வெற்றிகரமாக சேமிக்கப்பட்டுள்ளன.');
});

இந்தக் குறியீடு இயங்கும்போது, `role="status"` உடன் உள்ள `div` புதுப்பிக்கப்படுகிறது. பக்கத்தைக் கண்காணிக்கும் ஒரு திரை வாசிப்பான் இந்த மாற்றத்தைக் கண்டறிந்து, பயனரின் பணி ஓட்டத்தைக் குறுக்கிடாமல், "உங்கள் அமைப்புகள் வெற்றிகரமாக சேமிக்கப்பட்டுள்ளன," என்று அறிவிக்கும்.

உண்மையிலேயே உள்ளடக்கிய டோஸ்ட்களுக்கான வடிவமைப்பு மற்றும் UX சிறந்த நடைமுறைகள்

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

1. நேரம் மிக முக்கியம்: பயனர்களுக்கு கட்டுப்பாட்டைக் கொடுங்கள்

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

• நீண்ட இயல்புநிலை கால அளவு: குறைந்தபட்சம் 5-7 வினாடிகள் கால அளவை நோக்கமாகக் கொள்ளுங்கள். இது பரந்த அளவிலான பயனர்களுக்கு மிகவும் வசதியான வாசிப்பு சாளரத்தை வழங்குகிறது.
• 'மூடு' பொத்தானைச் சேர்க்கவும்: டோஸ்ட்டை கைமுறையாக நிராகரிக்க எப்போதும் தெளிவாகத் தெரியும் மற்றும் விசைப்பலகை-அணுகக்கூடிய பொத்தானை வழங்கவும். இது பயனர்களுக்கு முழுமையான கட்டுப்பாட்டைக் கொடுக்கிறது மற்றும் அவர்கள் முடிப்பதற்கு முன்பு செய்தி மறைந்துவிடுவதைத் தடுக்கிறது. இந்த பொத்தானுக்கு `<button aria-label="அறிவிப்பை மூடு">X</button>` போன்ற அணுகக்கூடிய லேபிள் இருக்க வேண்டும்.
• ஹோவர்/ஃபோகஸில் இடைநிறுத்தம்: பயனர் டோஸ்ட் மீது மவுஸை வைக்கும்போது அல்லது விசைப்பலகை மூலம் அதில் கவனம் செலுத்தும்போது நிராகரிப்பு டைமர் இடைநிறுத்தப்பட வேண்டும். இது WCAG-யின் நேரம் சரிசெய்யக்கூடியது அளவுகோலின் ஒரு முக்கிய அம்சமாகும்.

2. காட்சித் தெளிவு மற்றும் இடம்

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

• அதிக மாறுபாடு: டோஸ்ட்டின் உரை மற்றும் பின்னணி WCAG AA தரநிலைகளை (சாதாரண உரைக்கு 4.5:1) பூர்த்தி செய்ய போதுமான வண்ண மாறுபாடு விகிதத்தைக் கொண்டிருப்பதை உறுதிசெய்க. உங்கள் வண்ணக் கலவைகளைச் சரிபார்க்க கருவிகளைப் பயன்படுத்தவும்.
• தெளிவான ஐகான்கள்: உரையுடன் உலகளவில் புரிந்துகொள்ளப்பட்ட ஐகான்களைப் பயன்படுத்தவும் (வெற்றிக்கு ஒரு சரிபார்ப்பு குறி, தகவலுக்கு ஒரு 'i', அல்லது எச்சரிக்கைக்கு ஒரு ஆச்சரியக்குறி போன்றவை). இந்த ஐகான்கள் ஒரு விரைவான காட்சி குறிப்பை வழங்குகின்றன, ஆனால் அவற்றை மட்டும் நம்ப வேண்டாம். எப்போதும் உரையைச் சேர்க்கவும்.
• நிலையான நிலைப்படுத்தல்: உங்கள் டோஸ்ட்களுக்கு ஒரு நிலையான இடத்தைத் தேர்ந்தெடுத்து (எ.கா., மேல்-வலது) உங்கள் முழு பயன்பாடு முழுவதும் அதைப் பின்பற்றவும். இது பயனர்களுக்கு முன்கணிப்புத்தன்மையை உருவாக்குகிறது. முக்கியமான UI கூறுகளை மறைக்கக்கூடிய இடங்களில் டோஸ்ட்களை வைப்பதைத் தவிர்க்கவும்.

3. தெளிவான மற்றும் சுருக்கமான மைக்ரோகாப்பியை எழுதுங்கள்

செய்தியே அறிவிப்பின் மையமாகும். அதை மதிப்புமிக்கதாக்குங்கள்.

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

4. முக்கியமான தகவல்களுக்கு டோஸ்ட்களைப் பயன்படுத்த வேண்டாம்

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

உங்கள் அணுகக்கூடிய டோஸ்ட் அறிவிப்புகளைச் சோதித்தல்

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

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

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

உங்களைக் கேட்டுக்கொள்ளுங்கள்:

• செய்தி அறிவிக்கப்பட்டதா? இது மிக அடிப்படையான சோதனை.
• அது சரியாக அறிவிக்கப்பட்டதா? முழு செய்தியும் படிக்கப்பட்டதா?
• நேரம் சரியாக இருந்ததா? ஒரு பணிவான டோஸ்டுக்கு, அது ஒரு இயற்கையான இடைநிறுத்தத்திற்காகக் காத்திருந்ததா? ஒரு உறுதியான எச்சரிக்கைக்கு, அது உடனடியாக குறுக்கிட்டதா?
• அனுபவம் சீர்குலைப்பதாக இருந்ததா? `role="alert"` ஐப் பயன்படுத்துவது நியாயமானதா, அல்லது அது வெறுமனே எரிச்சலூட்டுகிறதா?

2. விசைப்பலகை-மட்டும் சோதனை

உங்கள் மவுஸை அவிழ்த்துவிட்டு, விசைப்பலகையை மட்டும் (Tab, Shift+Tab, Enter, Spacebar) பயன்படுத்தி உங்கள் தளத்தில் செல்லவும்.

• உங்கள் டோஸ்ட்டில் 'மூடு' பொத்தான் அல்லது வேறு ஏதேனும் ஊடாடும் உறுப்பு இருந்தால், Tab விசையைப் பயன்படுத்தி அதற்குச் செல்ல முடியுமா?
• Enter அல்லது Spacebar ஐப் பயன்படுத்தி பொத்தானைச் செயல்படுத்த முடியுமா?
• டோஸ்ட் நிராகரிக்கப்பட்ட பிறகு ஃபோகஸ் பயன்பாட்டில் ஒரு தர்க்கரீதியான இடத்திற்குத் திரும்புகிறதா?

3. காட்சி மற்றும் பயன்பாட்டுத்திறன் சோதனைகள்

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

முடிவுரை: ஒரே நேரத்தில் ஒரு அறிவிப்பு மூலம் மேலும் உள்ளடக்கிய வலையை உருவாக்குதல்

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

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

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