Rázcestník - horizontálny (Signpost)
Horizontálny rázcestník má formu jednoduchej horizontálnej dlaždice, ktorá je zložená z nadpisu, popisu a oddeľovacej čiary. Jeho účelom je prehľadne usporiadať pre používateľa odkazy na súvisiaci obsah, ktorý je rozmiestnený na rôznych, samostatných podstránkach. Rázcestník je jedným z komponentov, ktoré navigujú používateľa k obsahu vašej stránky.
Použitie rázcestníka
Použitím rázcestníka spolu s nadpisom a podnadpisom dáte používateľovi najavo, ktorý obsah (a ako) spolu na stránke súvisí. Pri definovaní nadpisu a podnadpisu buďte struční a vecní. Rázcestník môžete štrukturovať do jedného alebo viacerých stĺpcov, musíte však dodržať pravidlá pre rozloženie stránky (grid).
Ako sa používa
- Používa sa na navigáciu k súvisiacemu obsahu.
- Používa sa ako jeden celistvý klikateľný prvok.
- Používa sa s jasným vizuálnym indikátorom, že ide o klikateľný prvok (napr. ikonka šípky).
- Udržujte nadpisy aj podnadpisy krátke.
- Používa sa v logických a primeraných skupinách (max. 5 rázcestníkov).
Ako sa nepoužíva
- Nepoužíva sa s vnútornými odkazmi alebo tlačidlami.
- Nepoužíva sa na zvýraznenie statického obsahu.
- Nepoužíva sa v dlhých zoznamoch.
- Nepoužíva sa ak chýba alebo je nejasný názov poľa.
- Nepoužíva sa ako čistý text bez ikonky alebo ohraničenia.
Varianty a stavy
1. Základný rázcestník (bez ikoniek)
2. S ikonkou napravo (napríklad šípka)
3. S ikonkou naľavo
4. S ikonkami na oboch stranách
5. Skupina rázcestníkov (Grid zobrazenie)
Prístupnosť (Accessibility)
Rázcestník spĺňa požiadavky WCAG 2.1 AA. Podporuje ovládanie klávesnicou a asistenčnými technológiami.
Klávesové ovládanie
Tab– presun zamerania klávesnice (focus) na nasledujúci rázcestník alebo interaktívny prvok.Shift + Tab– presun zamerania klávesnice (focus) na predchádzajúci prvok.Enter– aktivovanie rázcestníka (prechod na cieľovú stránku).
Základné pravidlá prístupnosti
- Rázcestník funguje ako jeden interaktívny cieľ, preto musí byť celý komponent obalený v elemente
<a>s platným atribútomhref. Zabezpečíte tým natívnu podporu pre navigáciu klávesnicou bez nutnosti pridávaťtabindex. - Názov rázcestníka musí byť implementovaný pomocou správnej úrovne nadpisu (zvyčajne
<h2>,<h3>alebo<h4>) v závislosti od hierarchie konkrétnej stránky. Asistenčné technológie to využívajú na rýchlu orientáciu. - Keďže je celý komponent odkazom, asistenčné technológie prečítajú nadpis aj popis rázcestníka ako jeden súvislý celok. Texty preto udržujte čo najstručnejšie, aby ste používateľa nezahltili zbytočne dlhým názvom odkazu.
- Ikonky určujúce tému rázcestníka, rovnako ako navigačná šípka, sú pre asistenčné technológie zväčša čisto dekoratívne. Musia byť skryté pred asistenčnými technológiami pomocou atribútu
aria-hidden=true". " - Ak rázcestník vedie na externú stránku alebo otvára odkaz v novom okne, musí obsahovať skryté textové upozornenie pre asistenčné technológie (napríklad
aria-label="Otvorí sa v novom okne"). Ak na to použijete špeciálnu ikonu externého odkazu, môžete upozornenie pridať priamo do nej.
Implementácia rázcestníka z ID-SK Frontend
Komponenty z knižnice ID-SK Frontend môžete do svojho projektu integrovať dvoma spôsobmi v závislosti od vašej technologickej infraštruktúry:
- Statická HTML implementácia – vhodná pre projekty bez Node.js alebo bundlera.
- Pokročilá integrácia (NPM + SCSS + JS) – vhodná pre projekty so správou zdrojov a build procesom.
Základné požiadavky
Pred začiatkom integrácie sa uistite, že máte:
- Node.js: verzia 4.2.0 alebo vyššia.
- Dart Sass: verzia 1.0.0 alebo vyššia.
- Nunjucks: verzia 3.0.0 alebo vyššia (ak chcete používať makrá).
Možnosti implementácie
1. Statická HTML implementácia (HTML + minifikované súbory)
Ak váš projekt nevyužíva Node.js alebo bundler (napr. Webpack, Vite), môžete použiť hotové buildy. Pri inštalácii z dist sa používajú kompilované a minifikované verzie šablóny so štýlmi. To znamená, že nebudete môcť:
- selektívne zahrnúť CSS alebo JavaScript pre jednotlivé komponenty
- zostaviť si vlastné štýly alebo komponenty na základe palety alebo typografických kombinácií
- prispôsobiť si kód (napríklad prepísať farby alebo povoliť globálne štýly)
- použiť dynamické komponenty z Nunjucks šablón
Stiahnite si najnovšie kompilované a minifikované verzie šablón štýlov, JavaScript a assetov. Skopírujte celý assets priečinok a minifikované súbory do rootu vášho projektu. Štruktúra by mala vyzerať približne takto:
project/
│
├── assets - images
- fonts
├── index.html
├── frontend.min.css
├── frontend.min.js
├── frontend.min.css.map
└── frontend.min.js.mapDo časti head vložte minifikované css. Na záver body pripojte minifikovaný javascript a inicializujte ho.
<!DOCTYPE html>
<html>
<head>
<title>Ukážka</title>
<link rel="stylesheet" href="frontend.min.css">
</head>
<body>
<script type="module" src="./frontend.min.js"></script>
<script type="module">
import { initAll } from './frontend.min.js'
initAll()
</script>
</body>
</html>Zo stránky dokumentácie stiahnite HTML kód komponentu rázcestník (otvorí sa v novom okne) a vložte ho do svojho HTML.
<a class="govuk-signpost govuk-signpost__card govuk-signpost__link" href="#">
<div class="govuk-signpost__container">
<div>
<h3 class="govuk-signpost__title">Dlhý nadpis</h3>
<p class="govuk-signpost__description">Tento text slúži iba ako ukážka naplneného obsahu v danom komponente. Nepoužívať pri implementácii a dizajne.</p>
</div>
</div>
</a>2. Pokročilá integrácia (NPM + SCSS + JS)
- Nainštalujte balíkPre inštaláciu cez NPM spustite:
npm install nunjucks --save npm i @id-sk/frontend@3.0.0-beta.0-hotfix - Pridajte Nunjucks/HTMLDo pripraveného súboru vložte kód, ktorý nájdete vyššie.
- Importujte štýlyPre import individuálneho IDSK komponentu (rázcestník) do svojho Sass súboru pridajte:
@import "node_modules/@id-sk/frontend/idsk/components/signpost/signpost";