Cilņu saskarņu apgūšana: padziļināta izpēte par tastatūras navigāciju un fokusa pārvaldību

Cilņu saskarnes ir mūsdienu tīmekļa dizaina stūrakmens. Sākot ar produktu lapām un lietotāju paneļiem un beidzot ar sarežģītām tīmekļa lietojumprogrammām, tās nodrošina elegantu risinājumu satura organizēšanai un lietotāja saskarnes sakārtošanai. Lai gan virspusēji tās var šķist vienkāršas, patiesi efektīvas un pieejamas cilnes komponentes izveide prasa dziļu izpratni par tastatūras navigāciju un rūpīgu fokusa pārvaldību. Slikti ieviesta cilņu saskarne var kļūt par nepārvaramu šķērsli lietotājiem, kuri paļaujas uz tastatūrām vai palīgtehnoloģijām, faktiski liedzot viņiem piekļuvi jūsu saturam.

Šis visaptverošais ceļvedis ir paredzēts tīmekļa izstrādātājiem, UI/UX dizaineriem un pieejamības aizstāvjiem, kuri vēlas pārsniegt pamatus. Mēs izpētīsim starptautiski atzītus tastatūras mijiedarbības modeļus, ARIA (Pieejamās bagātinātās interneta lietojumprogrammas) kritisko lomu semantiskā konteksta nodrošināšanā un niansētās fokusa pārvaldības metodes, kas rada nevainojamu un intuitīvu lietotāja pieredzi ikvienam, neatkarīgi no viņu atrašanās vietas vai veida, kā viņi mijiedarbojas ar tīmekli.

Cilņu saskarnes anatomija: pamatkomponenti

Pirms iedziļināties mehānikā, ir svarīgi izveidot kopīgu vārdu krājumu, kas balstīts uz WAI-ARIA izstrādes praksi (WAI-ARIA Authoring Practices). Standarta cilnes komponents sastāv no trim galvenajiem elementiem:

• Cilņu saraksts (`role="tablist"`): Tas ir konteinera elements, kas satur cilņu kopu. Tas darbojas kā primārais logrīks, ar kuru lietotāji mijiedarbojas, lai pārslēgtos starp dažādiem satura paneļiem.
• Cilne (`role="tab"`): Atsevišķs klikšķināms elements cilņu sarakstā. Kad tas tiek aktivizēts, tas parāda saistīto satura paneli. Vizuāli tā ir pati “cilne”.
• Cilnes panelis (`role="tabpanel"`): Konteiners saturam, kas saistīts ar konkrētu cilni. Vienlaikus ir redzams tikai viens cilnes panelis — tas, kas atbilst pašlaik aktīvajai cilnei.

Šīs struktūras izpratne ir pirmais solis ceļā uz komponenta izveidi, kas ir ne tikai vizuāli saskaņots, bet arī semantiski saprotams palīgtehnoloģijām, piemēram, ekrāna lasītājiem.

Nevainojamas tastatūras navigācijas principi

Lietotājam ar redzi, kurš izmanto peli, mijiedarbība ar cilnēm ir vienkārša: jūs noklikšķināt uz cilnes, kuru vēlaties redzēt. Lietotājiem, kuri izmanto tikai tastatūru, pieredzei jābūt tikpat intuitīvai. WAI-ARIA izstrādes prakse nodrošina stabilu, standartizētu tastatūras mijiedarbības modeli, ko palīgtehnoloģiju lietotāji ir pieraduši sagaidīt.

Navigācija cilņu sarakstā (`role="tablist"`)

Galvenā mijiedarbība notiek cilņu sarakstā. Mērķis ir ļaut lietotājiem efektīvi pārlūkot un atlasīt cilnes, nepārvietojoties caur katru interaktīvo elementu lapā.

• Taustiņš `Tab`: Tas ir ieejas un izejas punkts. Kad lietotājs nospiež `Tab`, fokusam jāpārvietojas *uz* cilņu sarakstu, nonākot uz pašlaik aktīvās cilnes. Atkārtoti nospiežot `Tab`, fokusam jāpārvietojas *ārā* no cilņu saraksta uz nākamo fokusējamo elementu lapā (vai uz aktīvo cilnes paneli, atkarībā no jūsu dizaina). Galvenais secinājums ir tāds, ka visam cilņu saraksta logrīkam ir jāatspoguļo viena pietura lapas kopējā `Tab` secībā.
• Bulttaustiņi (`Left/Right` vai `Up/Down`): Kad fokuss ir cilņu sarakstā, navigācijai tiek izmantoti bulttaustiņi.
  • Horizontālam cilņu sarakstam `Right Arrow` taustiņš pārvieto fokusu uz nākamo cilni, bet `Left Arrow` taustiņš pārvieto fokusu uz iepriekšējo cilni.
  • Vertikālam cilņu sarakstam `Down Arrow` taustiņš pārvieto fokusu uz nākamo cilni, bet `Up Arrow` taustiņš pārvieto fokusu uz iepriekšējo cilni.
  Būtiski, ka navigācijai jābūt cikliskai. Nospiežot `Right Arrow` uz pēdējās cilnes, fokusam jāpāriet uz pirmo cilni, un nospiežot `Left Arrow` uz pirmās cilnes, fokusam jāpāriet uz pēdējo. Tas rada ierobežotu, paredzamu navigācijas ciklu.
• Taustiņi `Home` un `End`: Lai nodrošinātu efektivitāti sarakstos ar daudzām cilnēm, šie taustiņi nodrošina īsceļus.
  • `Home`: Pārvieto fokusu uz pirmo cilni sarakstā.
  • `End`: Pārvieto fokusu uz pēdējo cilni sarakstā.

Aktivizācijas modeļi: automātiskais pret manuālo

Kad lietotājs pārvietojas starp cilnēm, izmantojot bulttaustiņus, kad būtu jāparāda atbilstošais panelis? Ir divi standarta modeļi:

• Automātiskā aktivizācija: Tiklīdz cilne saņem fokusu ar bulttaustiņu, tiek parādīts tās saistītais panelis. Šis ir visizplatītākais modelis un parasti ir vēlams tā tūlītējās iedarbības dēļ. Tas samazina taustiņsitienu skaitu, kas nepieciešams satura apskatei.
• Manuālā aktivizācija: Fokusa pārvietošana ar bulttaustiņiem tikai iezīmē cilni. Pēc tam lietotājam ir jānospiež `Enter` vai `Space`, lai aktivizētu cilni un parādītu tās paneli. Šis modelis var būt noderīgs, ja cilņu paneļi satur lielu daudzumu satura vai izraisa tīkla pieprasījumus, jo tas novērš nevajadzīgu satura ielādi, kamēr lietotājs vienkārši pārlūko cilņu opcijas.

Jūsu izvēlētajam aktivizācijas modelim jābūt balstītam uz jūsu saskarnes saturu un kontekstu. Lai kuru jūs izvēlētos, esiet konsekventi visā savā lietojumprogrammā.

Fokusa pārvaldības apgūšana: neapdziedātais lietojamības varonis

Efektīva fokusa pārvaldība ir tas, kas atšķir neveiklu saskarni no nevainojamas. Tā ir programmatiska kontrole pār to, kur atrodas lietotāja fokuss, nodrošinot loģisku un paredzamu ceļu caur komponentu.

Kustīgā `tabindex` tehnika

Kustīgais `tabindex` ir tastatūras navigācijas stūrakmens tādos komponentos kā cilņu saraksti. Mērķis ir panākt, lai viss logrīks darbotos kā viena `Tab` pietura.

Lūk, kā tas darbojas:

1. Pašreizējam aktīvajam cilnes elementam tiek piešķirts `tabindex="0"`. Tas padara to par daļu no dabiskās cilņu secības un ļauj tam saņemt fokusu, kad lietotājs ar `Tab` taustiņu ieiet komponentā.
2. Visiem pārējiem neaktīvajiem cilņu elementiem tiek piešķirts `tabindex="-1"`. Tas noņem tos no dabiskās cilņu secības, tāpēc lietotājam nav jānospiež `Tab` caur katru no tiem. Tos joprojām var fokusēt programmatiski, ko mēs darām ar bulttaustiņu navigāciju.

Kad lietotājs nospiež bulttaustiņu, lai pārietu no cilnes A uz cilni B:

• JavaScript loģika atjaunina cilni A, lai tai būtu `tabindex="-1"`.
• Pēc tam tā atjaunina cilni B, lai tai būtu `tabindex="0"`.
• Visbeidzot, tā izsauc `.focus()` uz cilnes B elementa, lai pārvietotu lietotāja fokusu uz turieni.

Šī tehnika nodrošina, ka neatkarīgi no tā, cik cilņu ir sarakstā, komponents vienmēr aizņem tikai vienu pozīciju lapas kopējā `Tab` secībā.

Fokuss cilņu paneļos

Kad cilne ir aktīva, kur tālāk virzās fokuss? Paredzamā rīcība ir tāda, ka, nospiežot `Tab` no aktīva cilnes elementa, fokuss pāries uz pirmo fokusējamo elementu *iekšpus* tā atbilstošā cilnes paneļa. Ja cilnes panelī nav fokusējamu elementu, nospiežot `Tab`, fokusam jāpārvietojas uz nākamo fokusējamo elementu lapā *pēc* cilņu saraksta.

Līdzīgi, kad lietotājs ir fokusējies uz pēdējo fokusējamo elementu cilnes panelī, nospiežot `Tab`, fokusam ir jāiziet no paneļa uz nākamo fokusējamo elementu lapā. Nospiežot `Shift + Tab` no pirmā fokusējamā elementa panelī, fokusam ir jāatgriežas pie aktīvā cilnes elementa.

Izvairieties no fokusa slazda: Cilņu saskarne nav modālais dialogs. Lietotājiem vienmēr jāspēj naviģēt uz cilnes komponentu un tā paneļiem un iziet no tiem, izmantojot `Tab` taustiņu. Neieslogiet fokusu komponentā, jo tas var būt mulsinoši un kaitinoši.

ARIA loma: semantikas paziņošana palīgtehnoloģijām

Bez ARIA, cilņu saskarne, kas izveidota ar `

<h2 id="tablist-label">Konta iestatījumi</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">
    Profils
  </button>
  <button id="tab-2" type="button" role="tab" aria-selected="false" aria-controls="panel-2" tabindex="-1">
    Parole
  </button>
  <button id="tab-3" type="button" role="tab" aria-selected="false" aria-controls="panel-3" tabindex="-1">
    Paziņojumi
  </button>
</div>

<div id="panel-1" role="tabpanel" aria-labelledby="tab-1" tabindex="0">
  <p>Saturs profila panelim...</p>
</div>
<div id="panel-2" role="tabpanel" aria-labelledby="tab-2" tabindex="0" hidden>
  <p>Saturs paroles panelim...</p>
</div>
<div id="panel-3" role="tabpanel" aria-labelledby="tab-3" tabindex="0" hidden>
  <p>Saturs paziņojumu panelim...</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') {
    // Atrod nākamo cilni secībā, vajadzības gadījumā apliecoties apkārt
    newTab = getNextTab(currentTab);
  } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
    // Atrod iepriekšējo cilni secībā, vajadzības gadījumā apliecoties apkārt
    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(); // Novērš pārlūka noklusējuma darbību bulttaustiņiem
  }
});

function activateTab(tab) {
  // Deaktivizē visas pārējās cilnes
  tabs.forEach(t => {
    t.setAttribute('aria-selected', 'false');
    t.setAttribute('tabindex', '-1');
    document.getElementById(t.getAttribute('aria-controls')).hidden = true;
  });

  // Aktivizē jauno cilni
  tab.setAttribute('aria-selected', 'true');
  tab.setAttribute('tabindex', '0');
  document.getElementById(tab.getAttribute('aria-controls')).hidden = false;
  tab.focus();
}