JavaScript நிலையான ஆவணங்களை (static documents) மென்பொருளாக மாற்றியது. Single-page apps உடனடியாக இயங்குவது போன்ற உணர்வைத் தருகின்றன. முழு பக்கமும் மீண்டும் ஏற்றப்படுவதில்லை (reloads), வெள்ளைத் திரைகள் மின்னும் சிக்கலும் இல்லை. ஆனால் அந்த வேகத்திற்கு ஒரு விலை உண்டு, அதை பல குழுக்கள் கவனிக்கத் தவறிவிடுகிறார்கள்: இணையத்தின் அடிப்படை இயந்திரவியல் அழுகத் தொடங்குகிறது. வழிசெலுத்தல் (Navigation) பலவீனமடைகிறது. தேடுபொறிகளால் (Search engines) பாதைகளைக் கண்டறிவதில் சிரமம் ஏற்படுகிறது. ஸ்கிரீன் ரீடர்கள் (Screen readers) திசைமாறுகின்றன. பயனர்கள் இணையதளங்களைப் போலவே தோற்றமளிக்கும், ஆனால் பழுதான டெஸ்க்டாப் பயன்பாடுகளைப் போலச் செயல்படும் இடைமுகங்களில் (interfaces) சிக்கிக்கொள்கிறார்கள்.

இதற்குப் பெரும்பாலும் ஒரு div மற்றும் அதன் onClick handler தான் காரணமாக இருக்கிறது.

Div-களை லிங்க்குகளாகப் பயன்படுத்துவதை நிறுத்துங்கள்

ஒரு div-க்கு என்று தனித்துவமான பொருள்சார்ந்த அர்த்தம் (semantic meaning) கிடையாது. அது ஒரு பெட்டி மட்டுமே. நீங்கள் அதன் மீது ஒரு click handler-ஐ இணைத்து, பயனர்களை ஒரு புதிய காட்சிக்கு (view) வழிநடத்தப் பயன்படுத்தும்போது, ஒரு அட்டைப் பெட்டியை ஒரு கதவாகக் கருதும்படி உலாவியிடம் (browser) கேட்கிறீர்கள். உலாவியானது அதை மறுத்துவிடும். உலாவியைச் சுற்றி உருவாக்கப்பட்ட மற்ற அனைத்துக் கருவிகளும் அதையே செய்யும்.

ஸ்கிரீன் ரீடர்கள் ஒரு div-ஐ லிங்க் அல்லது பட்டனாக அறிவிப்பதில்லை. அவை அதைத் தவிர்த்துவிடும் அல்லது வெறும் உரையாக (plain text) வாசிக்கும். குரல் வழி வழிசெலுத்தும் (voice navigation) பயனர் அதைத் தேர்ந்தெடுக்க முடியாது. உங்கள் பக்கத்தில் உள்ள URL-களைத் தேடும் தேடுபொறி க்ராலர் (search engine crawler), பின்பற்ற ஏதுமில்லை என்று கருதும். உங்கள் வழித்தடம் (route) இல்லாதது போலவே ஆகிவிடும்.

அதைவிட மோசமாக, பயனர்களுக்கு ஏற்கனவே தெரிந்த செயல்பாடுகளை நீங்கள் இழக்கிறீர்கள். ஒரு உண்மையான லிங்க், புதிய டேபில் (tab) திறக்க வலது கிளிக் செய்யவும், இலக்கை புக்மார்க் (bookmark) செய்யவும் அல்லது முகவரியைப் பகிர நகலெடுக்கவும் (copy) அனுமதிக்கிறது. கீபோர்டு பயனர்கள் Tab விசையைப் பயன்படுத்தி அதை அடையவும், Enter விசையைப் பயன்படுத்தித் திறக்கவும் எதிர்பார்ப்பார்கள். ஒரு div இவை எதையும் வழங்குவதில்லை. நீங்கள் tabIndex, role="link" மற்றும் keyboard listeners போன்றவற்றைச் சேர்த்தாலும், உலாவியானது இலவசமாகத் தரும் வசதியை நீங்கள் மிக மோசமான முறையில் மீண்டும் உருவாக்குகிறீர்கள் என்றுதான் அர்த்தம். மேலும், நீங்கள் ஏதோ ஒரு விளிம்பு நிலைச் சிக்கலை (edge case) மறந்துவிடுவீர்கள். நீங்கள் எப்போதும் அப்படியேதான் செய்வீர்கள்.

இலக்குகளுக்கு Anchors-ஐயும், செயல்பாடுகளுக்கு Buttons-ஐயும் பயன்படுத்துங்கள்

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

பயனரை ஒரு புதிய URL-க்கு மாற்ற விரும்பும்போது <a டேக்-ஐப் பயன்படுத்துங்கள். அது ஒரு போலி காட்சி மாற்றம் (simulated view swap) அல்லது நிலை மாற்றம் (state change) அல்ல, ஒரு உண்மையான இருப்பிடம் (location) ஆகும். href பண்புக்கூறு (attribute) ஒரு உண்மையான முகவரியைக் கொண்டிருக்க வேண்டும்:

<a href="/docs">Documentation</a>

அவ்வளவுதான். பயனர் எங்காவது செல்லப் போகிறார் என்றால், ஒரு லிங்கைப் பயன்படுத்துங்கள்.

தற்போதைய பக்கத்திலேயே ஏதேனும் ஒரு செயல் நடக்கும்போது <button>-ஐப் பயன்படுத்துங்கள். பட்டன்கள் பின்வரும் செயல்பாடுகளுக்கானவை:

  • ஒரு மோடலைத் (modal) திறக்க
  • ஒரு படிவத்தைச் (form) சமர்ப்பிக்க
  • அமைப்புகளைச் சேமிக்க
  • மெனுவை மாற்றியமைக்க (toggle)

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

உலாவியை அதன் வேலையைச் செய்ய விடுங்கள்

நவீன உலாவிகள் பல தசாப்த கால பரிணாமம் மற்றும் தரப்படுத்தலின் (standardization) விளைவாகும். நீங்கள் கைமுறையாக உருவாக்கும் JavaScript-ஐ விட, அவை பாதுகாப்பு, வரலாறு (history), முன்னதாகவே தரவுகளைப் பெறுதல் (prefetching) மற்றும் அணுகல்தன்மை (accessibility) ஆகியவற்றைச் சிறப்பாகக் கையாளுகின்றன.

ஒரு உண்மையான anchor tag தானாகவே உலாவியின் வரலாறுத் தொகுப்பிற்கு (history stack) தகவல்களை வழங்குகிறது. இது இயல்பான சூழல் மெனுவுடன் (native context menu) இணைந்து செயல்படுகிறது. பயனர் அதன் மீது கர்சரை வைக்கும்போதோ (hover) அல்லது கவனம் செலுத்தும்போதோ (focus), உலாவியின் உள்ளமைக்கப்பட்ட prefetching அல்காரிதம்களில் இது பங்கேற்கிறது; இதனால் நீங்கள் ஒரு வரியைக் கூட எழுதாமல் உங்கள் ஆப் வேகமாக இயங்குவது போன்ற உணர்வைத் தரும். இது லிங்குகளைத் திறப்பதற்கான பயனரின் விருப்பங்களை மதிக்கிறது. மேலும் இது கடவுச்சொல் மேலாளர்கள் (password managers), மொழிபெயர்ப்பு கருவிகள் மற்றும் ரீடர் மோட்களுடன் (reader modes) இணைந்து செயல்படுகிறது.

நீங்கள் அதற்குப் பதிலாக ஒரு JavaScript வழிசெலுத்தல் செயல்பாட்டைப் (navigation function) பயன்படுத்தும்போது, இவை அனைத்தையும் நீங்கள் இழக்கிறீர்கள். நீங்கள் வெறும் வசதிகளை மட்டும் இழக்கவில்லை; இணையத்தில் உள்ள மற்ற அனைத்துத் தளங்களிலும் பயனர்கள் வளர்த்தெடுத்த பழக்கங்களை அவர்கள் கைவிடும்படி கட்டாயப்படுத்துகிறீர்கள். இது ஒரு தொழில்நுட்ப முடிவு அல்ல; இது ஒரு மோசமான பயனர் அனுபவம் (hostile user experience).

உங்கள் Framework உண்மையில் எதை உருவாக்குகிறது என்பதைச் சரிபார்க்கவும்

React Router, Vue Router, Next.js Link components, SvelteKit. இந்தத் கருவிகள் client-side routing-ஐ எளிதாக்குகின்றன. ஆனால் அப்ஸ்ட்ராக்ஷன் (abstraction) தவறுகளை உருவாக்குகிறது.

உங்கள் DOM-ஐச் சோதிக்கவும். உலாவியின் டெவலப்பர் டூல்களைத் (developer tools) திறந்து, உங்கள் framework வெளியிடும் கூறுகளைப் பார்க்கவும். ஒரு <Link> கூறு, இறுதி HTML-இல் சரியான href பண்புக்கூறுடன் கூடிய உண்மையான <a டேக்-ஆகத் தெரிய வேண்டும். அது ஒரு span, div அல்லது முறையான href இல்லாத வேறு ஏதேனும் ஒன்றாகத் தெரிந்தால், உங்கள் அப்ஸ்ட்ராக்ஷன் தோல்வியடைந்துவிட்டது என்று அர்த்தம். அந்தத் கூறினைச் சரிசெய்யவும். இயல்பு நிலையை (default) மாற்றியமைக்கவும். passHref prop அல்லது அதற்கு இணையான framework வசதியைப் பயன்படுத்தவும். சரிபார்ப்பு இல்லாமல் framework சரியாகச் செய்யும் என்று நம்பாதீர்கள்.

இது hydration mismatches-க்கும் முக்கியமானது. சர்வர் ஒரு லிங்குகளை உருவாக்குகிறது, ஆனால் கிளையண்ட் அதை லிங்க் அல்லாத ஒன்றாக மாற்றினால் (hydrate), நீங்கள் அணுகல்தன்மை சார்ந்த பிழைகளை (accessibility bugs) உருவாக்குகிறீர்கள். உங்கள் மூலக் குறியீட்டில் (source code) HTML சரியாகத் தெரிந்தாலும், நேரடி DOM-இல் அது தவறாக இருப்பதால், இந்தப் பிழைகளைக் கண்டறிவது கடினம்.

போலி இலக்குகளைத் தடை செய்யுங்கள்

அழிய மறுக்கும் ஒரு முறை உள்ளது: href="javascript:void(0)". ஒரு லிங்க் போலத் தோன்றி, பட்டன் போலச் செயல்பட விரும்பும்போது டெவலப்பர்கள் இதைப் பயன்படுத்துகிறார்கள்; பொதுவாக ஒரு பட்டனை ஸ்டைல் (style) செய்ய விரும்பாததாலோ அல்லது பழைய codebase தேவைப்படுவதாலோ இவ்வாறு செய்கிறார்கள்.

நிறுத்துங்கள். இது ஒரு URL அல்ல. இது உலாவிற்கு (browser) எந்த இலக்கையும் வழங்காது. இது பயன்படுத்த முடியாத நிலைகளால் (states) வரலாற்றை (history stack) அசுத்தப்படுத்துகிறது. இது உலாவியின் வரலாறு மற்றும் அணுகல்தன்மையை (accessibility) சிதைக்கிறது. இது ஒரு பொறி. உங்களுக்குத் திசைமாற்றம் (navigation) இல்லாமல் கிளிக் செய்யும் செயல்பாடு தேவைப்பட்டால், உங்களுக்கு ஒரு <button> தேவை. அதை நீங்கள் விரும்பியபடி வடிவமைத்துக் கொள்ளுங்கள். அந்த உறுப்பு (element) ஒரு பட்டனா அல்லது இணைப்பா (link) என்பது CSS-க்கு முக்கியமல்ல. ஆனால் உங்கள் பயனர்களுக்கு அது முக்கியம்.

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

உங்கள் இணைப்பிற்குள் இருக்கும் சொற்கள் முக்கியமானவை. ஸ்கிரீன் ரீடர் (screen reader) பயனர்கள் பெரும்பாலும் பக்கத்தில் உள்ள அனைத்து இணைப்புகளையும் விரைவாகப் பார்க்க ஒரு பட்டியலைப் பயன்படுத்துவார்கள். உங்கள் இணைப்புகள் அனைத்தும் "Read more" அல்லது "Click here" என்று இருந்தால், அந்தப் பட்டியல் பயனற்ற இரைச்சலாக மாறிவிடும்.

துல்லியமாக இருங்கள். இவற்றை ஒப்பிட்டுப் பாருங்கள்:

  • தவறு: <a href="/security/api-guide">Read more</a>
  • சரி: <a href="/security/api-guide">Read the API security guide</a>

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

முழு ஈடுபாட்டுடன் சோதனை செய்யுங்கள்

நீங்கள் அதைச் சரிபார்க்கவில்லை என்றால், கட்டமைப்பு (Architecture) என்பது எதற்கும் உதவாது.

முதலாவதாக, உங்கள் விசைப்பலகை ஓட்டத்தை (keyboard flow) சோதனை செய்யுங்கள். உங்கள் மவுஸை (mouse) துண்டித்துவிடுங்கள். உங்கள் தளத்தில் உள்ள ஒவ்வொரு ஊடாடும் உறுப்புக்கும் (interactive element) Tab விசையைப் பயன்படுத்திச் செல்லுங்கள். ஒவ்வொரு உண்மையான இணைப்பும் ஒரு தெளிவான 'focus outline'-ஐக் காட்ட வேண்டும்; அது பின்னணியில் மறைந்துவிடும் ஒரு மெல்லிய ஒளியாக இருக்கக்கூடாது, மாறாக சோர்வடைந்த கண்களாலும் எளிதில் காணக்கூடிய ஒரு தெளிவான வளையமாக இருக்க வேண்டும். Enter அழுத்தவும். அது இணைப்பைச் செயல்படுத்த வேண்டும். Tab ஒரு உறுப்பைத் தவிர்த்தாலோ அல்லது Enter எதையும் செய்யவில்லை என்றாலோ, அங்கு ஒரு பிழை (bug) உள்ளது என்று அர்த்தம்.

இரண்டாவதாக, உங்கள் பாதைகளை (routes) சர்வர் மட்டத்தில் சோதனை செய்யுங்கள். கிளையண்ட்-சைடு ரூட்டிங் (Client-side routing) என்பது ஒரு மெல்லியத் திரை போன்றது. ஒரு பயனர் /dashboard/reports என்பதை புக்மார்க் செய்துவிட்டு நாளைத் திரும்பினாலோ அல்லது பக்கத்தைப் புதுப்பித்தாலோ (refresh), அந்தப் பக்கத்தை எவ்வாறு வழங்குவது என்பதை உங்கள் சர்வர் அறிந்திருக்க வேண்டும். தெரியாத பாதைகளுக்கு (unknown paths) உங்கள் அப்ளிகேஷன் ஷெல் (application shell) மூலம் செயல்பட அல்லது சரியான HTML-ஐ நேரடியாக வழங்க உங்கள் ரிவர்ஸ் ப்ராக்ஸி (reverse proxy) அல்லது சர்வர் கட்டமைப்பை (server framework) உள்ளமைக்கவும். பக்கத்தைப் புதுப்பிக்கும்போது வரும் ஒரு 404 பிழை என்பது ஒரு சிறிய பிழை அல்ல. அது ஒரு மீறப்பட்ட வாக்குறுதி.

JavaScript ஒரு சக்திவாய்ந்த அடுக்கு