Hlavička pre elektronické služby (Header)

Hlavička pre elektronické služby je základný prvok jednotného dizajnového systému Slovenska. Zabezpečuje jednotný vizuálny a interaktívny zážitok naprieč elektronickými službami. Použite ju pre rozhrania vyžadujúce prihlásenie používateľa, napríklad pre elektronické služby, portály služieb a osobné zóny.

Použitie hlavičky

IDSK 3

Hlavička pomáha používateľovi navigovať sa k obsahu webovej aplikácie. Obsahuje hlavnú sekciu, záhlavie, navigáciu a rozbaľovacie menu podľa potreby. Hlavička je statická. Pri posúvaní sa obsah webovej aplikácie roluje pod ňou.

Záhlavie

Obsahuje informáciu, že ide o oficiálne webové sídlo verejnej správy, spolu s odkazom na hlavné webové sídlo správcu alebo ústredný portál verejnej správy.
Obsahuje výber jazyka.

Hlavná sekcia

Hlavná sekcia je povinná časť každej hlavičky. Obsahuje logo, navigáciu a akčný panel.

Logo je umiestnené vľavo a riadi sa pravidlami pre doménové mená.
Navigácia je umiestnená v strede a obsahuje hlavné časti aplikácie.
Akčný panel je umiestnený vpravo a obsahuje profil, notifikácie alebo doplnkové nadradené akcie.

Ako sa používa

Hlavička patrí na úplný začiatok každej podstránky.
Úplne hore patrí informácia o oficiálnom webe verejnej správy a výber jazyka.
Vľavo v hlavnej sekcii umiestnite logo, do stredu navigáciu a vpravo akčný panel.
V prvej úrovni navigácie použite najviac 5 položiek.

Ako sa nepoužíva

Neumiestňujte do kódu viacero hlavných hlavičiek na jednej stránke.
Nepresúvajte logo doprava alebo akčný panel doľava.
Nenapĺňajte navigáciu dlhým zoznamom nerelevantných odkazov.
Ak robíte jednoduchú elektronickú službu, rozbaľovaciu navigáciu úplne vynechajte.

Prístupnosť (Accessibility)

Hlavička pre elektronické služby musí byť použiteľná klávesnicou a asistenčnými technológiami. Používateľ musí vedieť jednoznačne rozpoznať navigáciu, logo, jazykové menu, akčný panel a prípadné rozbaľovacie časti.

Klávesové ovládanie

Tab – posúva fokus sekvenčne vpred cez logo, navigáciu, jazykové menu a tlačidlá.
Shift + Tab – vracia fokus o krok späť v opačnom poradí.
Enter alebo Medzerník – aktivuje odkazy, tlačidlá a rozbaľovacie prvky.
Esc – zatvorí otvorené rozbaľovacie menu a vráti fokus na prvok, ktorý ho otvoril.
Šípky – môžu slúžiť na pohyb medzi položkami, ak sa používateľ nachádza v otvorenom výbere alebo podmenu.

Základné pravidlá prístupnosti komponentu Hlavička

Celý blok hlavičky obaľte do natívneho HTML prvku <header>.
Logo prepojte s domovskou stránkou pomocou odkazu <a href="/">. Ak je logo obrázok, musí mať zrozumiteľný alternatívny text, napríklad „Odkaz na domovskú stránku ministerstva“.
Hlavné menu musí byť v prvku <nav> s prístupným názvom, napríklad aria-label="Hlavná navigácia".
Rozbaľovacie zoznamy otvárajte cez natívny prvok <button>. Položky menu štruktúrujte pomocou <ul>, <li> a <a>.
Každé tlačidlo, ktoré otvára podmenu, musí mať atribút aria-expanded. Ak otvára menu, môže mať aj aria-haspopup.
Všetky odkazy a tlačidlá v hlavičke musia mať jasne rozpoznateľný stav zamerania klávesnicou.
Medzera medzi interaktívnymi prvkami má byť dostatočná, aby sa znížilo riziko nechceného kliknutia používateľmi s motorickým znevýhodnením.
Ikony, ktoré sú iba dekoratívne, skryte pred asistenčnými technológiami pomocou aria-hidden="true".
Ak je prihlásenie nevyhnutné pre používanie služby, tlačidlo prihlásenia môže byť v hlavičke vizuálne zvýraznené ako primárna akcia.

Implementácia hlavičky pre elektronické služby z ID-SK Frontend

Komponenty z knižnice ID-SK Frontend môžete do svojho projektu integrovať dvoma spôsobmi v závislosti od 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

Ak projekt nevyužíva Node.js alebo bundler, môžete použiť hotové buildy. Pri inštalácii zo zložky dist sa používajú kompilované a minifikované verzie šablóny so štýlmi.

Nemôžete selektívne zahrnúť CSS alebo JavaScript pre jednotlivé komponenty.
Nemôžete zostaviť vlastné štýly podľa typografických kombinácií.
Nemôžete prispôsobiť interný kód komponentu bez zásahu do buildu.
Nemôžete použiť dynamické komponenty z Nunjucks šablón bez prípravy prostredia.

➜ Stiahnite a zahrňte zdroje

Skopírujte potrebné súbory a assety do projektu. Štruktúra môže vyzerať napríklad takto:

project/
│
├── assets/
│   ├── images/
│   └── fonts/
├── index.html
├── frontend.min.css
├── frontend.min.js
├── frontend.min.css.map
└── frontend.min.js.map

➜ Prepojte štýly a skripty

Do časti head vložte minifikovaný CSS súbor. Na koniec body pripojte JavaScript a inicializujte komponenty.

<!DOCTYPE html>
    <html lang="sk">
    <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>

➜ Skopírujte HTML kód

Zo stránky dokumentácie stiahnite HTML kód komponentu hlavička pre elektronické služby (otvorí sa v novom okne) a vložte ho do svojho HTML.

<header class="govuk-header" data-module="govuk-header">
<div class="govuk-header__container">
    <a href="/" class="govuk-header__link govuk-header__link--homepage">
    <img
        src="/assets/images/logo-sk-color.svg"
        alt="Odkaz na domovskú stránku"
    >
    </a>

    <nav aria-label="Hlavná navigácia" class="govuk-header__navigation">
    <ul class="govuk-header__navigation-list">
        <li class="govuk-header__navigation-item" aria-current="page">
        <a class="govuk-header__link" href="/sekcia-1">
            Sekcia 1
        </a>
        </li>
        <li class="govuk-header__navigation-item">
        <a class="govuk-header__link" href="/sekcia-2">
            Sekcia 2
        </a>
        </li>
    </ul>
    </nav>

    <div class="govuk-header__actionPanel">
    <button type="button" class="govuk-button" aria-label="Notifikácie">
        <span class="material-icons" aria-hidden="true">notifications</span>
    </button>
    <button type="button" class="govuk-button" aria-label="Profil">
        MM
    </button>
    </div>
</div>
</header>

2. Pokročilá integrácia (NPM + SCSS + JS)

Nainštalujte balík

Pre inštaláciu cez NPM spustite:

npm install nunjucks --save
npm i @id-sk/frontend@3.0.0-beta.0-hotfix

Pridajte Nunjucks alebo HTMLDo pripraveného súboru vložte HTML alebo Nunjucks makro podľa spôsobu integrácie.
Importujte štýly
Pre import individuálneho IDSK komponentu, v tomto prípade hlavičky, do Sass súboru pridajte:
```
@import "node_modules/@id-sk/frontend/idsk/components/header/header";
```
Importujte JavaScript
ID-SK Frontend komponenty s JavaScript správaním majú vo svojom markupe nastavený atribút data-module. Pre import JavaScriptu hlavičky vložte do JS súboru:
```
import { Header, createAll } from 'govuk-frontend'

createAll(Header)
```

Doména gov.sk je oficiálna

Táto stránka je zabezpečená

Hlavička pre elektronické služby (Header)

Použitie hlavičky

Doména gov.sk je oficiálna

Táto stránka je zabezpečená

Záhlavie

Hlavná sekcia

Ako sa používa

Ako sa nepoužíva

Varianty a stavy

1. Hlavička s navigáciou

Doména gov.sk je oficiálna

Táto stránka je zabezpečená

2. Hlavička bez navigácie

Doména gov.sk je oficiálna

Táto stránka je zabezpečená

Prístupnosť (Accessibility)

Klávesové ovládanie

Základné pravidlá prístupnosti komponentu Hlavička

Implementácia hlavičky pre elektronické služby z ID-SK Frontend

Základné požiadavky

Možnosti implementácie

1. Statická HTML implementácia

2. Pokročilá integrácia (NPM + SCSS + JS)