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

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

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

தாவல் இடைமுகத்தின் உடற்கூறியல்: முக்கிய கூறுகள்

இயக்கவியலுக்குள் நுழைவதற்கு முன், WAI-ARIA ஆசிரியர் நடைமுறைகளின் அடிப்படையில் ஒரு பொதுவான சொற்களஞ்சியத்தை நிறுவுவது அவசியம். ஒரு நிலையான தாவல் கூறு மூன்று முதன்மை கூறுகளைக் கொண்டுள்ளது:

• தாவல் பட்டியல் (`role="tablist"`): இது தாவல்களின் தொகுப்பைக் கொண்டிருக்கும் கொள்கலன் உறுப்பு. இது வெவ்வேறு உள்ளடக்கப் பலகங்களுக்கு இடையில் மாற பயனர்கள் தொடர்பு கொள்ளும் முதன்மை விட்ஜெட்டாக செயல்படுகிறது.
• தாவல் (`role="tab"`): தாவல் பட்டியலுக்குள் உள்ள ஒரு தனிப்பட்ட கிளிக் செய்யக்கூடிய உறுப்பு. செயல்படுத்தப்படும்போது, அது தொடர்புடைய உள்ளடக்கப் பலகத்தைக் காட்டுகிறது. பார்வைக்கு, இது "தாவல்" தானே.
• தாவல் பேனல் (`role="tabpanel"`): ஒரு குறிப்பிட்ட தாவலுடன் தொடர்புடைய உள்ளடக்கத்திற்கான கொள்கலன். எந்த நேரத்திலும் ஒரு தாவல் பேனல் மட்டுமே தெரியும் - தற்போது செயலில் உள்ள தாவலுக்கு ஒத்த ஒன்று.

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

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

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

தாவல் பட்டியலை வழிநடத்துதல் (`role="tablist"`)

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

• `Tab` விசை: இது நுழைவு மற்றும் வெளியேறும் புள்ளி. பயனர் `Tab` ஐ அழுத்தும் போது, ஃபோகஸ் தாவல் பட்டியலுக்குள் செல்ல வேண்டும், தற்போது செயலில் உள்ள தாவலில் தரையிறங்கும். `Tab` ஐ மீண்டும் அழுத்துவது பக்கத்தில் உள்ள அடுத்த ஃபோகஸ் செய்யக்கூடிய உறுப்புக்கு தாவல் பட்டியலிலிருந்து ஃபோகஸை நகர்த்த வேண்டும் (அல்லது உங்கள் வடிவமைப்பைப் பொறுத்து, செயலில் உள்ள தாவல் பேனலுக்குள்). முழு தாவல் பட்டியல் விட்ஜெட்டும் பக்கத்தின் ஒட்டுமொத்த தாவல் வரிசையில் ஒரு நிறுத்தத்தை பிரதிநிதித்துவப்படுத்துவதே முக்கிய அம்சம்.
• அம்பு விசைகள் (`Left/Right` அல்லது `Up/Down`): ஃபோகஸ் தாவல் பட்டியலுக்குள் இருக்கும்போது, வழிசெலுத்தலுக்கு அம்பு விசைகள் பயன்படுத்தப்படுகின்றன.
  • ஒரு கிடைமட்ட தாவல் பட்டியலுக்கு, `வலது அம்பு` விசை அடுத்த தாவலுக்கு ஃபோகஸை நகர்த்துகிறது, மற்றும் `இடது அம்பு` விசை முந்தைய தாவலுக்கு ஃபோகஸை நகர்த்துகிறது.
  • ஒரு செங்குத்து தாவல் பட்டியலுக்கு, `கீழ் அம்பு` விசை அடுத்த தாவலுக்கு ஃபோகஸை நகர்த்துகிறது, மற்றும் `மேல் அம்பு` விசை முந்தைய தாவலுக்கு ஃபோகஸை நகர்த்துகிறது.
  முக்கியமாக, வழிசெலுத்தல் சுற்றறிக்கையாக இருக்க வேண்டும். கடைசி தாவலில் `வலது அம்பு` விசையை அழுத்துவது முதல் தாவலுக்கு ஃபோகஸை நகர்த்த வேண்டும், மேலும் முதல் தாவலில் `இடது அம்பு` விசையை அழுத்துவது கடைசி தாவலுக்கு ஃபோகஸை நகர்த்த வேண்டும். இது ஒரு உள்ளடக்க, கணிக்கக்கூடிய வழிசெலுத்தல் வளையத்தை உருவாக்குகிறது.
• `Home` மற்றும் `End` விசைகள்: பல தாவல்களைக் கொண்ட பட்டியல்களில் செயல்திறனுக்காக, இந்த விசைகள் குறுக்குவழிகளை வழங்குகின்றன.
  • `Home`: பட்டியலில் உள்ள முதல் தாவலுக்கு ஃபோகஸை நகர்த்துகிறது.
  • `End`: பட்டியலில் உள்ள கடைசி தாவலுக்கு ஃபோகஸை நகர்த்துகிறது.

செயல்படுத்தும் மாதிரிகள்: தானியங்கி மற்றும் கையேடு

பயனர் அம்பு விசைகளைப் பயன்படுத்தி தாவல்களுக்கு இடையில் செல்லும்போது, தொடர்புடைய பேனல் எப்போது காண்பிக்கப்பட வேண்டும்? இரண்டு நிலையான மாதிரிகள் உள்ளன:

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

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

ஃபோகஸ் நிர்வாகத்தில் தேர்ச்சி பெறுதல்: பயன்பாட்டினைப் பாதிக்காத ஹீரோ

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

ரோவிங் `tabindex` நுட்பம்

ரோவிங் `tabindex` என்பது தாவல் பட்டியல்கள் போன்ற கூறுகளுக்குள் விசைப்பலகை வழிசெலுத்தலின் மூலக்கல்லாகும். முழு விட்ஜெட்டும் ஒரு `Tab` நிறுத்தமாக செயல்படுவதே குறிக்கோள்.

இது எவ்வாறு செயல்படுகிறது என்பது இங்கே:

1. தற்போது செயலில் இருக்கும் தாவல் உறுப்புக்கு `tabindex="0"` வழங்கப்படுகிறது. இது இயல்பான தாவல் வரிசையின் ஒரு பகுதியாக ஆக்குகிறது மற்றும் பயனர் கூறுக்குள் தாவும்போது கவனம் செலுத்த அனுமதிக்கிறது.
2. மற்ற அனைத்து செயலற்ற தாவல் கூறுகளுக்கும் `tabindex="-1"` வழங்கப்படுகிறது. இது அவற்றை இயல்பான தாவல் வரிசையிலிருந்து நீக்குகிறது, எனவே பயனர் ஒவ்வொரு முறையும் `Tab` ஐ அழுத்த வேண்டியதில்லை. அவை இன்னும் நிரலாக்க ரீதியாக கவனம் செலுத்தப்படலாம், அதைத்தான் நாம் அம்பு விசை வழிசெலுத்தலுடன் செய்கிறோம்.

பயனர் அம்பு விசையை அழுத்தி தாவல் A இலிருந்து தாவல் B க்கு செல்லும்போது:

• JavaScript தர்க்கம் தாவல் A ஐ `tabindex="-1"` ஆக புதுப்பிக்கிறது.
• பின்னர் அது தாவல் B ஐ `tabindex="0"` ஆக புதுப்பிக்கிறது.
• இறுதியாக, இது பயனரின் ஃபோகஸை அங்கு நகர்த்த தாவல் B உறுப்பில் `.focus()` ஐ அழைக்கிறது.

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

தாவல் பேனல்களுக்குள் கவனம்

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

இதேபோல், ஒரு பயனர் ஒரு தாவல் பேனலுக்குள் உள்ள கடைசி ஃபோகஸ் செய்யக்கூடிய உறுப்பில் கவனம் செலுத்தும்போது, `Tab` ஐ அழுத்துவது பேனலில் இருந்து பக்கத்தில் உள்ள அடுத்த ஃபோகஸ் செய்யக்கூடிய உறுப்புக்கு ஃபோகஸை நகர்த்த வேண்டும். பேனலுக்குள் உள்ள முதல் ஃபோகஸ் செய்யக்கூடிய உறுப்பிலிருந்து `Shift + Tab` ஐ அழுத்துவது ஃபோகஸை மீண்டும் செயலில் உள்ள தாவல் உறுப்புக்கு நகர்த்த வேண்டும்.

கவனம் சிதறடிப்பதைத் தவிர்க்கவும்: ஒரு தாவல் இடைமுகம் என்பது ஒரு மாதிரி உரையாடல் அல்ல. பயனர்கள் எப்போதும் தாவல் கூறு மற்றும் அதன் பேனல்களுக்குள் `Tab` விசையைப் பயன்படுத்தி செல்ல முடியும். கூறுகளில் கவனத்தை சிதறடிக்காதீர்கள், ஏனெனில் இது திசைதிருப்பவும் விரக்தியடையவும் செய்யும்.

ARIA வின் பங்கு: உதவி தொழில்நுட்பங்களுக்கு சொற்பொருளைத் தொடர்புகொள்வது

ARIA இல்லாமல், `

<h2 id="tablist-label">கணக்கு அமைப்புகள்</h2>
<div role="tablist" aria-labelledby="tablist-label">
  <button id="tab-1" type="button" role="tab" aria-selected="true" aria-controls="panel-1" tabindex="0">
    சுயவிவரம்
  </button>
  <button id="tab-2" type="button" role="tab" aria-selected="false" aria-controls="panel-2" tabindex="-1">
    கடவுச்சொல்
  </button>
  <button id="tab-3" type="button" role="tab" aria-selected="false" aria-controls="panel-3" tabindex="-1">
    அறிவிப்புகள்
  </button>
</div>

<div id="panel-1" role="tabpanel" aria-labelledby="tab-1" tabindex="0">
  <p>சுயவிவரப் பேனலுக்கான உள்ளடக்கம்...</p>
</div>
<div id="panel-2" role="tabpanel" aria-labelledby="tab-2" tabindex="0" hidden>
  <p>கடவுச்சொல் பேனலுக்கான உள்ளடக்கம்...</p>
</div>
<div id="panel-3" role="tabpanel" aria-labelledby="tab-3" tabindex="0" hidden>
  <p>அறிவிப்புகள் பேனலுக்கான உள்ளடக்கம்...</p>
</div>

const tablist = document.querySelector('[role="tablist"]');
const tabs = tablist.querySelectorAll('[role="tab"]');

tablist.addEventListener('keydown', (e) => {
  let currentTab = document.activeElement;
  let newTab;

  if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
    // தேவையானால் சுற்றி வளைத்து, வரிசையில் அடுத்த தாவலைக் கண்டறியவும்
    newTab = getNextTab(currentTab);
  } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
    // தேவையானால் சுற்றி வளைத்து, வரிசையில் முந்தைய தாவலைக் கண்டறியவும்
    newTab = getPreviousTab(currentTab);
  } else if (e.key === 'Home') {
    newTab = tabs[0];
  } else if (e.key === 'End') {
    newTab = tabs[tabs.length - 1];
  }

  if (newTab) {
    activateTab(newTab);
    e.preventDefault(); // அம்பு விசைகளுக்கான இயல்புநிலை உலாவியின் நடத்தையைத் தடுக்கவும்
  }
});

function activateTab(tab) {
  // மற்ற எல்லா தாவல்களையும் செயலிழக்கச் செய்யவும்
  tabs.forEach(t => {
    t.setAttribute('aria-selected', 'false');
    t.setAttribute('tabindex', '-1');
    document.getElementById(t.getAttribute('aria-controls')).hidden = true;
  });

  // புதிய தாவலைச் செயல்படுத்தவும்
  tab.setAttribute('aria-selected', 'true');
  tab.setAttribute('tabindex', '0');
  document.getElementById(tab.getAttribute('aria-controls')).hidden = false;
  tab.focus();
}