Kortelių sąsajų įvaldymas: išsami klaviatūros navigacijos ir fokuso valdymo analizė

Kortelėmis pagrįstos sąsajos yra šiuolaikinio interneto dizaino pagrindas. Nuo produktų puslapių ir vartotojų prietaisų skydelių iki sudėtingų interneto programų jos suteikia elegantišką sprendimą turiniui organizuoti ir vartotojo sąsajai supaprastinti. Nors iš pirmo žvilgsnio jos gali atrodyti paprastos, norint sukurti tikrai veiksmingą ir prieinamą kortelių komponentą, reikia gerai išmanyti navigaciją klaviatūra ir kruopštų fokuso valdymą. Prastai įdiegta kortelių sąsaja gali tapti neįveikiama kliūtimi vartotojams, kurie naudojasi klaviatūra ar pagalbinėmis technologijomis, ir veiksmingai užkirsti jiems kelią prie jūsų turinio.

Šis išsamus vadovas skirtas interneto kūrėjams, UI/UX dizaineriams ir prieinamumo šalininkams, kurie nori žengti toliau nei pagrindai. Išnagrinėsime tarptautiniu mastu pripažintus klaviatūros sąveikos modelius, esminį ARIA (Prieinamų raiškiojo interneto programų) vaidmenį teikiant semantinį kontekstą ir subtilias fokuso valdymo technikas, kurios sukuria sklandžią ir intuityvią vartotojo patirtį visiems, nepriklausomai nuo jų buvimo vietos ar sąveikos su internetu būdo.

Kortelių sąsajos anatomija: pagrindiniai komponentai

Prieš gilinantis į mechaniką, būtina nustatyti bendrą terminiją, pagrįstą WAI-ARIA kūrimo praktikomis. Standartinį kortelių komponentą sudaro trys pagrindiniai elementai:

• Kortelių sąrašas (`role="tablist"`): Tai konteinerio elementas, kuriame yra kortelių rinkinys. Jis veikia kaip pagrindinis valdiklis, su kuriuo vartotojai sąveikauja, norėdami perjungti skirtingus turinio skydelius.
• Kortelė (`role="tab"`): Atskiras paspaudžiamas elementas kortelių sąraše. Suaktyvinus, jis rodo susijusį turinio skydelį. Vizualiai tai yra pati „kortelė“.
• Kortelės skydelis (`role="tabpanel"`): Konteineris turiniui, susijusiam su konkrečia kortele. Vienu metu matomas tik vienas kortelės skydelis – tas, kuris atitinka šiuo metu aktyvią kortelę.

Šios struktūros supratimas yra pirmas žingsnis kuriant komponentą, kuris yra ne tik vizualiai vientisas, bet ir semantiškai suprantamas pagalbinėms technologijoms, tokioms kaip ekrano skaitytuvai.

Nepriekaištingos navigacijos klaviatūra principai

Regiančiam pelės vartotojui sąveika su kortelėmis yra paprasta: spustelite kortelę, kurią norite matyti. Vartotojams, naudojantiems tik klaviatūrą, patirtis turi būti tokia pat intuityvi. WAI-ARIA kūrimo praktikos pateikia tvirtą, standartizuotą klaviatūros sąveikos modelį, kurio tikisi pagalbinių technologijų vartotojai.

Naršymas kortelių sąraše (`role="tablist"`)

Pagrindinė sąveika vyksta kortelių sąraše. Tikslas – leisti vartotojams efektyviai naršyti ir pasirinkti korteles, nereikalaujant pereiti per kiekvieną interaktyvų elementą puslapyje.

• `Tab` klavišas: Tai įėjimo ir išėjimo taškas. Kai vartotojas paspaudžia `Tab`, fokusas turėtų pereiti *į* kortelių sąrašą ir atsidurti ant šiuo metu aktyvios kortelės. Dar kartą paspaudus `Tab`, fokusas turėtų pereiti *iš* kortelių sąrašo į kitą fokusuojamą elementą puslapyje (arba į aktyvų kortelės skydelį, priklausomai nuo jūsų dizaino). Svarbiausia išvada yra ta, kad visas kortelių sąrašo valdiklis turėtų atstoti vieną stotelę bendroje puslapio `Tab` sekoje.
• Rodyklių klavišai (`Kairėn/Dešinėn` arba `Aukštyn/Žemyn`): Kai fokusas yra kortelių sąraše, navigacijai naudojami rodyklių klavišai.
  • Horizontaliam kortelių sąrašui `Dešinės rodyklės` klavišas perkelia fokusą į kitą kortelę, o `Kairės rodyklės` klavišas – į ankstesnę.
  • Vertikaliam kortelių sąrašui `Apatinės rodyklės` klavišas perkelia fokusą į kitą kortelę, o `Viršutinės rodyklės` klavišas – į ankstesnę.
  Svarbiausia, kad navigacija būtų cikliška. Paspaudus `Dešinės rodyklės` klavišą ant paskutinės kortelės, fokusas turėtų pereiti į pirmąją, o paspaudus `Kairės rodyklės` klavišą ant pirmosios – į paskutinę. Tai sukuria uždarą, nuspėjamą navigacijos ciklą.
• `Home` ir `End` klavišai: Siekiant efektyvumo sąrašuose su daug kortelių, šie klavišai suteikia sparčiuosius klavišus.
  • `Home`: Perkelia fokusą į pirmąją sąrašo kortelę.
  • `End`: Perkelia fokusą į paskutinę sąrašo kortelę.

Aktyvavimo modeliai: automatinis ir rankinis

Kai vartotojas naršo tarp kortelių naudodamas rodyklių klavišus, kada turėtų būti rodomas atitinkamas skydelis? Yra du standartiniai modeliai:

• Automatinis aktyvavimas: Kai tik kortelė gauna fokusą per rodyklės klavišą, rodomas su ja susijęs skydelis. Tai labiausiai paplitęs modelis ir paprastai yra pageidautinas dėl savo greitumo. Jis sumažina klavišų paspaudimų, reikalingų turiniui peržiūrėti, skaičių.
• Rankinis aktyvavimas: Judinant fokusą rodyklių klavišais, kortelė tik paryškinama. Vartotojas tada turi paspausti `Enter` arba `Space`, kad aktyvuotų kortelę ir parodytų jos skydelį. Šis modelis gali būti naudingas, kai kortelių skydeliuose yra daug turinio arba jie sukelia tinklo užklausas, nes tai neleidžia turiniui be reikalo krautis, kol vartotojas tiesiog naršo kortelių parinktis.

Aktyvavimo modelio pasirinkimas turėtų būti pagrįstas jūsų sąsajos turiniu ir kontekstu. Kad ir kurį pasirinktumėte, būkite nuoseklūs visoje savo programoje.

Fokuso valdymo įvaldymas: nepastebimas patogumo herojus

Efektyvus fokuso valdymas yra tai, kas skiria griozdišką sąsają nuo sklandžios. Tai reiškia programinį vartotojo fokuso valdymą, užtikrinantį logišką ir nuspėjamą kelią per komponentą.

Klajojančio `tabindex` technika

Klajojantis `tabindex` yra klaviatūros navigacijos pagrindas komponentuose, tokiuose kaip kortelių sąrašai. Tikslas – kad visas valdiklis veiktų kaip viena `Tab` stotelė.

Štai kaip tai veikia:

1. Šiuo metu aktyviam kortelės elementui suteikiamas `tabindex="0"`. Tai padaro jį natūralios `Tab` sekos dalimi ir leidžia jam gauti fokusą, kai vartotojas patenka į komponentą.
2. Visiems kitiems neaktyviems kortelių elementams suteikiamas `tabindex="-1"`. Tai pašalina juos iš natūralios `Tab` sekos, todėl vartotojui nereikia spausti `Tab` per kiekvieną iš jų. Juos vis dar galima fokusuoti programiškai, ką mes ir darome naviguodami rodyklių klavišais.

Kai vartotojas paspaudžia rodyklės klavišą, norėdamas pereiti nuo kortelės A prie kortelės B:

• JavaScript logika atnaujina kortelę A, kad jos `tabindex` būtų `"-1"`.
• Tada ji atnaujina kortelę B, kad jos `tabindex` būtų `"0"`.
• Galiausiai, ji iškviečia `.focus()` metodą kortelės B elementui, kad perkeltų ten vartotojo fokusą.

Ši technika užtikrina, kad nesvarbu, kiek kortelių yra sąraše, komponentas visada užima tik vieną poziciją bendroje puslapio `Tab` sekoje.

Fokusas kortelių skydeliuose

Kai kortelė yra aktyvi, kur toliau keliauja fokusas? Tikimasi, kad paspaudus `Tab` ant aktyvaus kortelės elemento, fokusas pereis į pirmąjį fokusuojamą elementą *viduje* atitinkamo kortelės skydelio. Jei kortelės skydelyje nėra fokusuojamų elementų, paspaudus `Tab` fokusas turėtų pereiti į kitą fokusuojamą elementą puslapyje *po* kortelių sąrašo.

Panašiai, kai vartotojas yra susifokusavęs ant paskutinio fokusuojamo elemento kortelės skydelyje, paspaudus `Tab` fokusas turėtų išeiti iš skydelio į kitą fokusuojamą elementą puslapyje. Paspaudus `Shift + Tab` ant pirmojo fokusuojamo elemento skydelyje, fokusas turėtų grįžti į aktyvų kortelės elementą.

Venkite fokuso spąstų: Kortelių sąsaja nėra modalinis langas. Vartotojai visada turėtų galėti naršyti į kortelių komponentą ir jo skydelius bei iš jų naudodami `Tab` klavišą. Neįkalinkite fokuso komponente, nes tai gali klaidinti ir varginti.

ARIA vaidmuo: semantikos perdavimas pagalbinėms technologijoms

Be ARIA, kortelių sąsaja, sukurta su `

<h2 id="tablist-label">Paskyros nustatymai</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">
    Profilis
  </button>
  <button id="tab-2" type="button" role="tab" aria-selected="false" aria-controls="panel-2" tabindex="-1">
    Slaptažodis
  </button>
  <button id="tab-3" type="button" role="tab" aria-selected="false" aria-controls="panel-3" tabindex="-1">
    Pranešimai
  </button>
</div>

<div id="panel-1" role="tabpanel" aria-labelledby="tab-1" tabindex="0">
  <p>Profilio skydelio turinys...</p>
</div>
<div id="panel-2" role="tabpanel" aria-labelledby="tab-2" tabindex="0" hidden>
  <p>Slaptažodžio skydelio turinys...</p>
</div>
<div id="panel-3" role="tabpanel" aria-labelledby="tab-3" tabindex="0" hidden>
  <p>Pranešimų skydelio turinys...</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') {
    // Rasti kitą kortelę sekoje, prireikus pereinant į pradžią
    newTab = getNextTab(currentTab);
  } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
    // Rasti ankstesnę kortelę sekoje, prireikus pereinant į pabaigą
    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(); // Išvengti numatytojo naršyklės elgesio rodyklių klavišams
  }
});

function activateTab(tab) {
  // Deaktyvuoti visas kitas korteles
  tabs.forEach(t => {
    t.setAttribute('aria-selected', 'false');
    t.setAttribute('tabindex', '-1');
    document.getElementById(t.getAttribute('aria-controls')).hidden = true;
  });

  // Aktyvuoti naują kortelę
  tab.setAttribute('aria-selected', 'true');
  tab.setAttribute('tabindex', '0');
  document.getElementById(tab.getAttribute('aria-controls')).hidden = false;
  tab.focus();
}