Zdokonalenie rozhraní s kartami: Hĺbkový pohľad na navigáciu pomocou klávesnice a správu zamerania

Rozhrania s kartami sú základným kameňom moderného webového dizajnu. Od produktových stránok a používateľských panelov až po komplexné webové aplikácie poskytujú elegantné riešenie na organizovanie obsahu a sprehľadnenie používateľského rozhrania. Hoci sa na prvý pohľad môžu zdať jednoduché, vytvorenie skutočne efektívneho a prístupného komponentu s kartami si vyžaduje hlboké pochopenie navigácie pomocou klávesnice a dôslednú správu zamerania. Zle implementované rozhranie s kartami sa môže stať neprekonateľnou bariérou pre používateľov, ktorí sa spoliehajú na klávesnicu alebo asistenčné technológie, a efektívne im tak zamedziť prístup k vášmu obsahu.

Tento komplexný sprievodca je určený pre webových vývojárov, UI/UX dizajnérov a zástancov prístupnosti, ktorí sa chcú posunúť za základy. Preskúmame medzinárodne uznávané vzory pre interakciu s klávesnicou, kľúčovú úlohu ARIA (Accessible Rich Internet Applications) pri poskytovaní sémantického kontextu a nuansované techniky správy zamerania, ktoré vytvárajú plynulý a intuitívny používateľský zážitok pre každého, bez ohľadu na jeho polohu alebo spôsob interakcie s webom.

Anatómia rozhrania s kartami: Základné komponenty

Predtým, ako sa ponoríme do mechaniky, je nevyhnutné stanoviť spoločnú terminológiu založenú na WAI-ARIA Authoring Practices. Štandardný komponent s kartami pozostáva z troch základných prvkov:

• Zoznam kariet (`role="tablist"`): Toto je kontajnerový prvok, ktorý obsahuje sadu kariet. Funguje ako primárny widget, s ktorým používatelia interagujú pri prepínaní medzi rôznymi panelmi s obsahom.
• Karta (`role="tab"`): Jednotlivý klikateľný prvok v rámci zoznamu kariet. Po aktivácii zobrazí svoj priradený panel s obsahom. Vizuálne je to samotná „karta“.
• Panel karty (`role="tabpanel"`): Kontajner pre obsah spojený s konkrétnou kartou. V danom okamihu je viditeľný iba jeden panel karty – ten, ktorý zodpovedá aktuálne aktívnej karte.

Pochopenie tejto štruktúry je prvým krokom k vytvoreniu komponentu, ktorý je nielen vizuálne koherentný, ale aj sémanticky zrozumiteľný pre asistenčné technológie, ako sú čítačky obrazovky.

Princípy bezchybnej navigácie pomocou klávesnice

Pre vidiaceho používateľa myši je interakcia s kartami jednoduchá: kliknete na kartu, ktorú chcete vidieť. Pre používateľov, ktorí používajú iba klávesnicu, musí byť zážitok rovnako intuitívny. WAI-ARIA Authoring Practices poskytujú robustný, štandardizovaný model pre interakciu s klávesnicou, ktorý používatelia asistenčných technológií očakávajú.

Navigácia v zozname kariet (`role="tablist"`)

Primárna interakcia prebieha v rámci zoznamu kariet. Cieľom je umožniť používateľom efektívne prehliadať a vyberať karty bez toho, aby museli prechádzať každým interaktívnym prvkom na stránke.

• Kláves `Tab`: Toto je vstupný a výstupný bod. Keď používateľ stlačí `Tab`, zameranie by sa malo presunúť *do* zoznamu kariet a pristáť na aktuálne aktívnej karte. Opätovné stlačenie `Tab` by malo presunúť zameranie *von* zo zoznamu kariet na ďalší zamerateľný prvok na stránke (alebo do aktívneho panela karty, v závislosti od vášho dizajnu). Kľúčovým poznatkom je, že celý widget zoznamu kariet by mal predstavovať jednu zastávku v celkovej sekvencii tabulátorov na stránke.
• Šípkové klávesy (`Vľavo/Vpravo` alebo `Hore/Dole`): Keď je zameranie vnútri zoznamu kariet, na navigáciu sa používajú šípkové klávesy.
  • Pre horizontálny zoznam kariet kláves `Šípka vpravo` presunie zameranie na ďalšiu kartu a kláves `Šípka vľavo` presunie zameranie na predchádzajúcu kartu.
  • Pre vertikálny zoznam kariet kláves `Šípka dole` presunie zameranie na ďalšiu kartu a kláves `Šípka hore` presunie zameranie на predchádzajúcu kartu.
  Kľúčové je, že navigácia by mala byť cyklická. Stlačenie `Šípky vpravo` na poslednej karte by malo presunúť zameranie na prvú kartu a stlačenie `Šípky vľavo` na prvej karte by malo presunúť zameranie na poslednú. Tým sa vytvorí uzavretá, predvídateľná navigačná slučka.
• Klávesy `Home` a `End`: Pre efektívnosť v zoznamoch s mnohými kartami poskytujú tieto klávesy skratky.
  • `Home`: Presunie zameranie na prvú kartu в zozname.
  • `End`: Presunie zameranie na poslednú kartu в zozname.

Modely aktivácie: Automatická vs. Manuálna

Kedy by sa mal zobraziť príslušný panel, keď používateľ prechádza medzi kartami pomocou šípkových klávesov? Existujú dva štandardné modely:

• Automatická aktivácia: Hneď ako karta získa zameranie pomocou šípkového klávesu, zobrazí sa jej priradený panel. Toto je najbežnejší vzor a všeobecne sa uprednostňuje pre svoju okamžitosť. Znižuje počet stlačení klávesov potrebných na zobrazenie obsahu.
• Manuálna aktivácia: Presunutie zamerania pomocou šípkových klávesov iba zvýrazní kartu. Používateľ musí potom stlačiť `Enter` alebo `Medzerník`, aby aktivoval kartu a zobrazili jej panel. Tento model môže byť užitočný, keď panely kariet obsahujú veľké množstvo obsahu alebo spúšťajú sieťové požiadavky, pretože zabraňuje zbytočnému načítavaniu obsahu, kým si používateľ iba prezerá možnosti kariet.

Váš výber modelu aktivácie by mal byť založený na obsahu a kontexte vášho rozhrania. Nech už si vyberiete ktorýkoľvek, buďte konzistentní v celej svojej aplikácii.

Zvládnutie správy zamerania: Neospevovaný hrdina použiteľnosti

Efektívna správa zamerania je to, čo oddeľuje nemotorné rozhranie od plynulého. Ide o programové riadenie toho, kde sa nachádza zameranie používateľa, čím sa zabezpečí logická a predvídateľná cesta komponentom.

Technika Roving `tabindex`

Roving `tabindex` je základným kameňom navigácie pomocou klávesnice v komponentoch, ako sú zoznamy kariet. Cieľom je, aby celý widget fungoval ako jedna zastávka klávesu `Tab`.

Funguje to takto:

1. Aktuálne aktívna karta dostane `tabindex="0"`. Tým sa stáva súčasťou prirodzeného poradia tabulátorov a umožňuje jej získať zameranie, keď používateľ vstúpi do komponentu.
2. Všetky ostatné neaktívne karty dostanú `tabindex="-1"`. Tým sa odstránia z prirodzeného poradia tabulátorov, takže používateľ nemusí stláčať `Tab` cez každú z nich. Stále môžu byť zamerané programovo, čo robíme pri navigácii šípkovými klávesami.

Keď používateľ stlačí šípkový kláves na prechod z karty A na kartu B:

• Logika JavaScriptu aktualizuje kartu A tak, aby mala `tabindex="-1"`.
• Potom aktualizuje kartu B tak, aby mala `tabindex="0"`.
• Nakoniec zavolá `.focus()` na prvku karty B, aby tam presunula zameranie používateľa.

Táto technika zabezpečuje, že bez ohľadu na to, koľko kariet je v zozname, komponent vždy zaberá iba jednu pozíciu v celkovej sekvencii `Tab` na stránke.

Zameranie v paneloch kariet

Keď je karta aktívna, kam sa presunie zameranie ďalej? Očakávané správanie je, že stlačenie `Tab` z aktívneho prvku karty presunie zameranie na prvý zamerateľný prvok *vnútri* jej príslušného panela karty. Ak panel karty nemá žiadne zamerateľné prvky, stlačenie `Tab` by malo presunúť zameranie na ďalší zamerateľný prvok na stránke *za* zoznamom kariet.

Podobne, keď je používateľ zameraný na posledný zamerateľný prvok v paneli karty, stlačenie `Tab` by malo presunúť zameranie von z panela na ďalší zamerateľný prvok na stránke. Stlačenie `Shift + Tab` z prvého zamerateľného prvku v paneli by malo presunúť zameranie späť na aktívny prvok karty.

Vyhnite sa uväzneniu zamerania (focus trapping): Rozhranie s kartami nie je modálne okno. Používatelia by mali byť vždy schopní navigovať do a von z komponentu s kartami a jeho panelov pomocou klávesu `Tab`. Neuväzňujte zameranie v komponente, pretože to môže byť dezorientujúce a frustrujúce.

Úloha ARIA: Komunikácia sémantiky asistenčným technológiám

Bez ARIA je rozhranie s kartami vytvorené pomocou prvkov `

<h2 id="tablist-label">Nastavenia účtu</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">
    Profil
  </button>
  <button id="tab-2" type="button" role="tab" aria-selected="false" aria-controls="panel-2" tabindex="-1">
    Heslo
  </button>
  <button id="tab-3" type="button" role="tab" aria-selected="false" aria-controls="panel-3" tabindex="-1">
    Upozornenia
  </button>
</div>

<div id="panel-1" role="tabpanel" aria-labelledby="tab-1" tabindex="0">
  <p>Obsah pre panel Profil...</p>
</div>
<div id="panel-2" role="tabpanel" aria-labelledby="tab-2" tabindex="0" hidden>
  <p>Obsah pre panel Heslo...</p>
</div>
<div id="panel-3" role="tabpanel" aria-labelledby="tab-3" tabindex="0" hidden>
  <p>Obsah pre panel Upozornenia...</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') {
    // Nájdi nasledujúcu kartu v poradí, v prípade potreby sa vráť na začiatok
    newTab = getNextTab(currentTab);
  } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
    // Nájdi predchádzajúcu kartu v poradí, v prípade potreby sa vráť na koniec
    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(); // Zabráň predvolenému správaniu prehliadača pre šípkové klávesy
  }
});

function activateTab(tab) {
  // Deaktivuj všetky ostatné karty
  tabs.forEach(t => {
    t.setAttribute('aria-selected', 'false');
    t.setAttribute('tabindex', '-1');
    document.getElementById(t.getAttribute('aria-controls')).hidden = true;
  });

  // Aktivuj novú kartu
  tab.setAttribute('aria-selected', 'true');
  tab.setAttribute('tabindex', '0');
  document.getElementById(tab.getAttribute('aria-controls')).hidden = false;
  tab.focus();
}