ടോസ്റ്റ് നോട്ടിഫിക്കേഷനുകൾ: എല്ലാവർക്കും ലഭ്യമായ, ഉപയോക്തൃ-സൗഹൃദ താൽക്കാലിക സന്ദേശങ്ങൾ രൂപകൽപ്പന ചെയ്യാം

ഡിജിറ്റൽ ഇൻ്റർഫേസുകളുടെ അതിവേഗം മാറിക്കൊണ്ടിരിക്കുന്ന ലോകത്ത്, ഒരു സിസ്റ്റവും അതിൻ്റെ ഉപയോക്താവും തമ്മിലുള്ള ആശയവിനിമയം വളരെ പ്രധാനമാണ്. നമ്മുടെ പ്രവർത്തനങ്ങളുടെ ഫലങ്ങൾ മനസ്സിലാക്കാൻ നമ്മൾ ദൃശ്യ സൂചനകളെ ആശ്രയിക്കുന്നു. ഈ ഫീഡ്‌ബാക്കിനുള്ള ഏറ്റവും സാധാരണമായ UI പാറ്റേണുകളിൽ ഒന്നാണ് 'ടോസ്റ്റ്' നോട്ടിഫിക്കേഷൻ—താൽക്കാലിക വിവരങ്ങൾ നൽകുന്ന ഒരു ചെറിയ, നോൺ-മോഡൽ പോപ്പ്-അപ്പ്. "സന്ദേശം അയച്ചു," "ഫയൽ അപ്‌ലോഡ് ചെയ്തു," അല്ലെങ്കിൽ "നിങ്ങളുടെ കണക്ഷൻ നഷ്ടപ്പെട്ടു" എന്ന് മുന്നറിയിപ്പ് നൽകുന്നത് പോലുള്ള കാര്യങ്ങൾക്ക്, ടോസ്റ്റുകൾ ഉപയോക്തൃ ഫീഡ്‌ബാക്കിന്റെ സൂക്ഷ്മമായ സഹായികളാണ്.

എന്നിരുന്നാലും, അവയുടെ താൽക്കാലികവും സൂക്ഷ്മവുമായ സ്വഭാവം ഒരു ഇരുതല മൂർച്ചയുള്ള വാളാണ്. ചില ഉപയോക്താക്കൾക്ക് ഇത് കുറഞ്ഞ രീതിയിൽ ശല്യമുണ്ടാക്കുമ്പോൾ, ഈ സ്വഭാവം തന്നെ മറ്റുള്ളവർക്ക്, പ്രത്യേകിച്ച് സ്ക്രീൻ റീഡറുകൾ പോലുള്ള സഹായക സാങ്കേതികവിദ്യകളെ ആശ്രയിക്കുന്നവർക്ക്, അവ പൂർണ്ണമായും അപ്രാപ്യമാക്കുന്നു. ഒരു അപ്രാപ്യമായ ടോസ്റ്റ് നോട്ടിഫിക്കേഷൻ ഒരു ചെറിയ അസൗകര്യം മാത്രമല്ല; അതൊരു നിശബ്ദ പരാജയമാണ്, ഉപയോക്താക്കളെ അനിശ്ചിതത്വത്തിലും നിരാശയിലും ആഴ്ത്തുന്നു. "ക്രമീകരണങ്ങൾ സേവ് ചെയ്തു" എന്ന സന്ദേശം കാണാൻ കഴിയാത്ത ഒരു ഉപയോക്താവ് വീണ്ടും സേവ് ചെയ്യാൻ ശ്രമിക്കുകയോ അല്ലെങ്കിൽ അവരുടെ മാറ്റങ്ങൾ വിജയകരമായിരുന്നോ എന്ന് ഉറപ്പില്ലാതെ ആപ്ലിക്കേഷൻ വിട്ടുപോകുകയോ ചെയ്തേക്കാം.

ഈ സമഗ്രമായ വഴികാട്ടി ഡെവലപ്പർമാർ, UX/UI ഡിസൈനർമാർ, പ്രൊഡക്റ്റ് മാനേജർമാർ എന്നിവർക്കായി ഉള്ളതാണ്, അവർക്ക് യഥാർത്ഥത്തിൽ എല്ലാവരെയും ഉൾക്കൊള്ളുന്ന ഡിജിറ്റൽ ഉൽപ്പന്നങ്ങൾ നിർമ്മിക്കാൻ ആഗ്രഹമുണ്ട്. ടോസ്റ്റ് നോട്ടിഫിക്കേഷനുകളുടെ അന്തർലീനമായ അക്സെസ്സിബിലിറ്റി വെല്ലുവിളികൾ നമ്മൾ പര്യവേക്ഷണം ചെയ്യും, ARIA (Accessible Rich Internet Applications) ഉപയോഗിച്ചുള്ള സാങ്കേതിക പരിഹാരങ്ങളിലേക്ക് ആഴത്തിൽ ഇറങ്ങിച്ചെല്ലും, എല്ലാവർക്കും പ്രയോജനപ്പെടുന്ന ഡിസൈൻ മികച്ച രീതികൾ വിവരിക്കും. ഈ താൽക്കാലിക സന്ദേശങ്ങളെ എങ്ങനെ ഒരു പ്രാപ്യമായ ഉപയോക്തൃ അനുഭവത്തിന്റെ സ്ഥിരം ഭാഗമാക്കാം എന്ന് നമുക്ക് പഠിക്കാം.

ടോസ്റ്റ് നോട്ടിഫിക്കേഷനുകളിലെ അക്സെസ്സിബിലിറ്റി വെല്ലുവിളി

പരിഹാരം മനസ്സിലാക്കാൻ, നമ്മൾ ആദ്യം പ്രശ്നം ആഴത്തിൽ മനസ്സിലാക്കണം. പരമ്പരാഗത ടോസ്റ്റ് നോട്ടിഫിക്കേഷനുകൾ അവയുടെ പ്രധാന ഡിസൈൻ തത്വങ്ങൾ കാരണം പല അക്സെസ്സിബിലിറ്റി തലങ്ങളിലും പരാജയപ്പെടുന്നു.

1. അവ നൈമിഷികവും സമയബന്ധിതവുമാണ്

ഒരു ടോസ്റ്റിന്റെ നിർവചിക്കുന്ന സവിശേഷത അതിന്റെ ഹ്രസ്വകാല അസ്തിത്വമാണ്. അത് കുറച്ച് സെക്കൻഡുകൾ പ്രത്യക്ഷപ്പെടുകയും പിന്നീട് പതുക്കെ മാഞ്ഞുപോകുകയും ചെയ്യുന്നു. കാഴ്ചയുള്ള ഒരു ഉപയോക്താവിന്, സന്ദേശം വായിക്കാൻ ഈ സമയം സാധാരണയായി മതിയാകും. എന്നിരുന്നാലും, ഒരു സ്ക്രീൻ റീഡർ ഉപയോക്താവിന് ഇതൊരു വലിയ തടസ്സമാണ്. ഒരു സ്ക്രീൻ റീഡർ ഉള്ളടക്കം ക്രമാനുഗതമായി പ്രഖ്യാപിക്കുന്നു. ഉപയോക്താവ് ഒരു ഫോം ഫീൽഡിൽ ശ്രദ്ധ കേന്ദ്രീകരിക്കുകയോ അല്ലെങ്കിൽ മറ്റ് ഉള്ളടക്കം വായിക്കുന്നത് കേൾക്കുകയോ ആണെങ്കിൽ, സ്ക്രീൻ റീഡർ അതിലേക്ക് എത്തുന്നതിന് മുമ്പ് ടോസ്റ്റ് പ്രത്യക്ഷപ്പെടുകയും അപ്രത്യക്ഷമാവുകയും ചെയ്തേക്കാം. ഇത് ഒരു വിവര വിടവ് സൃഷ്ടിക്കുന്നു, അക്സെസ്സിബിലിറ്റിയുടെ ഒരു അടിസ്ഥാന തത്വം ലംഘിക്കുന്നു: വിവരങ്ങൾ ഗ്രഹിക്കാൻ കഴിയുന്നതായിരിക്കണം.

2. അവയ്ക്ക് ഫോക്കസ് ലഭിക്കുന്നില്ല

ടോസ്റ്റുകൾ ശല്യപ്പെടുത്താത്ത രീതിയിലാണ് രൂപകൽപ്പന ചെയ്തിരിക്കുന്നത്. ഉപയോക്താവിന്റെ നിലവിലെ ജോലിയിൽ നിന്ന് അവ മനഃപൂർവം ഫോക്കസ് മാറ്റുന്നില്ല. ഒരു കാഴ്ചയുള്ള ഉപയോക്താവിന് "ഡ്രാഫ്റ്റ് സേവ് ചെയ്തു" എന്ന സന്ദേശം പ്രത്യക്ഷപ്പെടുമ്പോൾ ഒരു ടെക്സ്റ്റ് ഫീൽഡിൽ ടൈപ്പുചെയ്യുന്നത് തുടരാനാകും. എന്നാൽ കീബോർഡ് മാത്രം ഉപയോഗിക്കുന്നവർക്കും സ്ക്രീൻ റീഡർ ഉപയോക്താക്കൾക്കും, ഫോക്കസ് ആണ് അവരുടെ നാവിഗേഷന്റെയും ആശയവിനിമയത്തിന്റെയും പ്രധാന മാർഗ്ഗം. ടോസ്റ്റ് ഒരിക്കലും ഫോക്കസ് ഓർഡറിൽ ഇല്ലാത്തതുകൊണ്ട്, ഒരു ക്രമാനുഗതമായ നാവിഗേഷൻ പാതയ്ക്ക് അത് അദൃശ്യമാണ്. ഉപയോക്താവിന് നിലവിലുണ്ടെന്ന് പോലും അറിയാത്ത ഒരു സന്ദേശത്തിനായി പേജ് മുഴുവൻ സ്വമേധയാ തിരയേണ്ടി വരും.

3. അവ സന്ദർഭത്തിന് പുറത്ത് പ്രത്യക്ഷപ്പെടുന്നു

ടോസ്റ്റുകൾ പലപ്പോഴും സ്ക്രീനിന്റെ ഒരു പ്രത്യേക ഭാഗത്ത്, മുകളിൽ വലതുവശത്തോ താഴെ ഇടതുവശത്തോ, അവയെ പ്രവർത്തനക്ഷമമാക്കിയ ഘടകത്തിൽ നിന്ന് (ഉദാഹരണത്തിന്, ഒരു ഫോമിന്റെ മധ്യത്തിലുള്ള 'സേവ്' ബട്ടൺ) വളരെ അകലെയാണ് പ്രത്യക്ഷപ്പെടുന്നത്. ഈ സ്ഥാനപരമായ അകലം കാഴ്ചയിലൂടെ എളുപ്പത്തിൽ മറികടക്കാമെങ്കിലും, സ്ക്രീൻ റീഡറുകൾക്ക് ഇത് യുക്തിപരമായ ഒഴുക്കിനെ തകർക്കുന്നു. പ്രഖ്യാപനം, ഇനി ഉണ്ടായാൽ തന്നെ, ക്രമരഹിതവും ഉപയോക്താവിന്റെ അവസാന പ്രവർത്തനത്തിൽ നിന്ന് വിച്ഛേദിക്കപ്പെട്ടതുമായി തോന്നാം, ഇത് ആശയക്കുഴപ്പത്തിന് കാരണമാകുന്നു.

WCAG-യുമായി ബന്ധിപ്പിക്കുന്നു: അക്സെസ്സിബിലിറ്റിയുടെ നാല് തൂണുകൾ

വെബ് ഉള്ളടക്ക അക്സെസ്സിബിലിറ്റി മാർഗ്ഗനിർദ്ദേശങ്ങൾ (WCAG) നാല് തത്വങ്ങളെ അടിസ്ഥാനമാക്കിയുള്ളതാണ്. അപ്രാപ്യമായ ടോസ്റ്റുകൾ അവയിൽ പലതും ലംഘിക്കുന്നു.

• ഗ്രഹിക്കാൻ കഴിയുന്നത് (Perceivable): കാഴ്ച വൈകല്യമുള്ള ഒരു ഉപയോക്താവിന് അവരുടെ സ്ക്രീൻ റീഡർ അത് പ്രഖ്യാപിക്കാത്തതുകൊണ്ട് നോട്ടിഫിക്കേഷൻ ഗ്രഹിക്കാൻ കഴിയുന്നില്ലെങ്കിൽ, അല്ലെങ്കിൽ ഒരു γνωσാനവൈകല്യമുള്ള ഉപയോക്താവിന് അത് വായിക്കാൻ മതിയായ സമയം ലഭിക്കുന്നില്ലെങ്കിൽ, ആ വിവരം ഗ്രഹിക്കാൻ കഴിയുന്നതല്ല. ഇത് WCAG വിജയ മാനദണ്ഡം 2.2.1 സമയ ക്രമീകരണവുമായി ബന്ധപ്പെട്ടിരിക്കുന്നു, ഉപയോക്താക്കൾക്ക് ഉള്ളടക്കം വായിക്കാനും ഉപയോഗിക്കാനും മതിയായ സമയം നൽകണമെന്ന് ഇത് ആവശ്യപ്പെടുന്നു.
• പ്രവർത്തിപ്പിക്കാവുന്നത് (Operable): ഒരു ടോസ്റ്റിൽ 'അടയ്ക്കുക' ബട്ടൺ പോലുള്ള ഒരു പ്രവർത്തനം ഉൾപ്പെടുന്നുവെങ്കിൽ, അത് ഫോക്കസ് ചെയ്യാവുന്നതും കീബോർഡ് വഴി പ്രവർത്തിപ്പിക്കാവുന്നതും ആയിരിക്കണം. ഇത് വിവരദായകമാണെങ്കിൽ പോലും, ഉപയോക്താവിന് അതിൽ നിയന്ത്രണം ഉണ്ടായിരിക്കണം, ഉദാഹരണത്തിന് അത് സ്വമേധയാ തള്ളിക്കളയാനുള്ള കഴിവ്.
• മനസ്സിലാക്കാവുന്നത് (Understandable): ടോസ്റ്റിന്റെ ഉള്ളടക്കം വ്യക്തവും സംക്ഷിപ്തവുമായിരിക്കണം. ഒരു സ്ക്രീൻ റീഡർ സന്ദേശം സന്ദർഭത്തിന് പുറത്ത് പ്രഖ്യാപിക്കുകയാണെങ്കിൽ, അതിന്റെ അർത്ഥം മനസ്സിലാക്കാൻ കഴിഞ്ഞേക്കില്ല. ഇത് WCAG 4.1.2 പേര്, റോൾ, മൂല്യം എന്നതുമായും ബന്ധപ്പെട്ടിരിക്കുന്നു, ഒരു UI ഘടകത്തിന്റെ ഉദ്ദേശ്യം പ്രോഗ്രാമാറ്റിക്കായി നിർണ്ണയിക്കാവുന്നതായിരിക്കണമെന്ന് ഇത് ആവശ്യപ്പെടുന്നു.
• ഉറപ്പുള്ളത് (Robust): നോട്ടിഫിക്കേഷൻ നിലവിലുള്ളതും ഭാവിയിലുള്ളതുമായ യൂസർ ഏജന്റുകളുമായി, സഹായക സാങ്കേതികവിദ്യകൾ ഉൾപ്പെടെ, പൊരുത്തപ്പെടുന്ന രീതിയിൽ സ്റ്റാൻഡേർഡ് വെബ് സാങ്കേതികവിദ്യകൾ ഉപയോഗിച്ച് നടപ്പിലാക്കണം. ARIA മാനദണ്ഡങ്ങളെ അവഗണിക്കുന്ന ഒരു കസ്റ്റം-ബിൽറ്റ് ടോസ്റ്റ് ഉറപ്പുള്ളതല്ല.

സാങ്കേതിക പരിഹാരം: ARIA ലൈവ് റീജിയനുകൾ സഹായത്തിന്

ടോസ്റ്റ് നോട്ടിഫിക്കേഷനുകൾ പ്രാപ്യമാക്കുന്നതിനുള്ള താക്കോൽ ARIA സ്പെസിഫിക്കേഷന്റെ ശക്തമായ ഒരു ഭാഗത്താണ്: ലൈവ് റീജിയനുകൾ. ഒരു 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 ഘടന

ഈ കണ്ടെയ്നർ നിങ്ങളുടെ <body> ടാഗിന്റെ അവസാനം സ്ഥാപിക്കുക. ഇത് 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>

ഒരു പൊളൈറ്റ് നോട്ടിഫിക്കേഷനായുള്ള JavaScript

ഒരു പൊളൈറ്റ് ടോസ്റ്റ് സന്ദേശം കാണിക്കുന്നതിനുള്ള ഒരു വാനില JavaScript ഫംഗ്ഷൻ താഴെ നൽകുന്നു. ഇത് ഒരു ടോസ്റ്റ് എലമെന്റ് സൃഷ്ടിക്കുകയും അത് പൊളൈറ്റ് കണ്ടെയ്നറിലേക്ക് ചേർക്കുകയും അത് നീക്കം ചെയ്യാൻ ഒരു ടൈംഔട്ട് സജ്ജമാക്കുകയും ചെയ്യുന്നു.

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 ലൈവ് റീജിയനുകളുടെ ശക്തി പ്രയോജനപ്പെടുത്തുകയും ചിന്താപൂർവ്വമായ ഡിസൈൻ തത്വങ്ങൾ പാലിക്കുകയും ചെയ്യുന്നതിലൂടെ, ഈ നൈമിഷിക സന്ദേശങ്ങളെ നമുക്ക് തടസ്സങ്ങളിൽ നിന്ന് പാലങ്ങളാക്കി മാറ്റാൻ കഴിയും. ഒരു അക്സെസ്സിബിൾ ടോസ്റ്റ് ഒരു സാങ്കേതിക ചെക്ക്ബോക്സ് മാത്രമല്ല; അത് *എല്ലാ* ഉപയോക്താക്കളുമായുള്ള വ്യക്തമായ ആശയവിനിമയത്തോടുള്ള ഒരു പ്രതിബദ്ധതയാണ്. ഓരോരുത്തർക്കും, അവരുടെ കഴിവിനെ പരിഗണിക്കാതെ, ഒരേ നിർണായക ഫീഡ്‌ബാക്ക് ലഭിക്കുന്നുവെന്നും നമ്മുടെ ആപ്ലിക്കേഷനുകൾ ആത്മവിശ്വാസത്തോടും കാര്യക്ഷമതയോടും കൂടി ഉപയോഗിക്കാൻ കഴിയുമെന്നും ഇത് ഉറപ്പാക്കുന്നു.

നമുക്ക് അക്സെസ്സിബിൾ നോട്ടിഫിക്കേഷനുകൾ വ്യവസായ നിലവാരമാക്കി മാറ്റാം. ഈ രീതികൾ നമ്മുടെ ഡിസൈൻ സിസ്റ്റങ്ങളിലും ഡെവലപ്‌മെന്റ് വർക്ക്ഫ്ലോകളിലും ഉൾച്ചേർക്കുന്നതിലൂടെ, നമുക്ക് യഥാർത്ഥ ആഗോള പ്രേക്ഷകർക്കായി കൂടുതൽ ഉൾക്കൊള്ളുന്നതും, ഉറപ്പുള്ളതും, ഉപയോക്തൃ-സൗഹൃദവുമായ ഒരു വെബ് നിർമ്മിക്കാൻ കഴിയും.