Päta (Footer)

Všetky stránky musia používať štandardizovanú pätu, ktorá môže, ale nemusí obsahovať štrukturované hypertextové odkazy na dôležitý obsah. Základným variantom je päta bez sekundárnej navigácie.

Použitie päty

Päta sa primárne využíva pre webové sídla a býva vždy umiestnená na konci stránky. Rolu sa spoločne s obsahom. Komponent obsahuje textové informácie o prevádzkovateľovi webovej stránky a textové odkazy na vyhlásenie o prístupnosti, priamy kontakt na prevádzkovateľa webového sídla, odkaz na RSS kanál alebo mapu webového sídla.

Štruktúru navigácie v päte tvorte podľa platných pravidiel IDSK pre rozloženie obsahu. Používajte rozloženie stránky na celú šírku, na polovice, tretiny alebo štvrtiny. Nepoužívajte iné formy rozloženia.

Ako sa používa

keď potrebujete štandardizovanú a jednotnú uzatváraciu sekciu naprieč všetkými stránkami webového sídla,
keď chcete používateľovi poskytnúť doplnkové a kontextové informácie, nie primárnu navigáciu,
keď potrebujete umiestniť povinné odkazy, napríklad vyhlásenie o prístupnosti, kontakt, RSS alebo mapu webu,
keď sekundárna navigácia logicky dopĺňa hlavnú navigáciu,
keď počet odkazov v jednom stĺpci zostáva primeraný, ideálne 2 až 6 odkazov.

Ako sa nepoužíva

neumiestňujte do nej kľúčové úlohy alebo primárne používateľské cesty,
nepoužívajte ju, ak je obsah v päte neprehľadne dlhý alebo zahlcujúci,
nepoužívajte viacero pätičiek na jednej stránke,
pätu neumiestňujte mimo koniec stránky, napríklad medzi sekcie obsahu,
nepoužívajte sekundárnu navigáciu s veľkým množstvom skupín,
nepoužívajte stĺpce bez nadpisov.

Prístupnosť (Accessibility)

Päta poskytuje používateľovi doplnkové informácie a odkazy na konci stránky. Z prístupnostného pohľadu má byť správne sémanticky označená, ľahko ovládateľná klávesnicou a nesmie nahrádzať hlavnú navigáciu ani primárne používateľské úlohy.

Klávesové ovládanie

Tab – presunie zameranie klávesnice na nasledujúci odkaz v päte.
Shift + Tab – presunie zameranie klávesnice na predchádzajúci odkaz.
Enter – aktivuje vybraný odkaz.

Základné pravidlá prístupnosti

Celý komponent má byť implementovaný ako natívny element <footer>. Tým asistenčné technológie získajú sémantickú informáciu, že ide o pätičku stránky.
Ak je päta použitá ako hlavná päta dokumentu, element <footer> zvyčajne vystupuje ako landmark contentinfo.
Navigácia v päte má byť reprezentovaná sémanticky, napríklad pomocou <nav>, <ul>, <li> a <a>.
Navigácia v päte má mať zrozumiteľný názov, napríklad pomocou aria-label="Navigácia v päte".
Odkazy v päte musia mať jasný a pochopiteľný text. Vyhnite sa všeobecným textom ako „kliknite sem“ alebo „viac“.
Ak v päte používate logo ako odkaz, obrázok musí mať zmysluplný atribút alt. Ak je logo zároveň odkazom na iný web, text alternatívy má používateľovi povedať, kam odkaz vedie alebo čo logo reprezentuje.
Ak odkaz otvára nové okno alebo novú kartu, používateľ by o tom mal byť informovaný v texte odkazu alebo pomocou vizuálne skrytého textu.
Päta nemá obsahovať veľké množstvo odkazov bez jasnej štruktúry. Dlhé zoznamy rozdeľte do pomenovaných skupín.

Implementácia päty 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íklad Webpack alebo 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 a zahrňte zdroje

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.map

➜ Prepojte štýly a skripty

Do časti head vložte minifikované CSS. Na záver body pripojte minifikovaný JavaScript a inicializujte ho.

<!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 päta (otvorí sa v novom okne) a vložte ho do svojho HTML.

<footer class="govuk-footer">
        <div class="govuk-width-container">
            <div class="govuk-footer__meta">
            <div class="govuk-footer__meta-item govuk-footer__meta-item--grow">
                <h2 class="govuk-visually-hidden">Päta stránky</h2>

                <ul class="govuk-footer__inline-list">
                <li class="govuk-footer__inline-list-item">
                    <a class="govuk-footer__link" href="#accessibility">
                    Vyhlásenie o prístupnosti
                    </a>
                </li>
                <li class="govuk-footer__inline-list-item">
                    <a class="govuk-footer__link" href="#contact">
                    Kontakt na prevádzkovateľa
                    </a>
                </li>
                <li class="govuk-footer__inline-list-item">
                    <a class="govuk-footer__link" href="#rss">
                    RSS
                    </a>
                </li>
                <li class="govuk-footer__inline-list-item">
                    <a class="govuk-footer__link" href="#sitemap">
                    Mapa stránky
                    </a>
                </li>
                </ul>

                <span class="govuk-footer__licence-description">
                Prevádzkovateľom služby je Ministerstvo investícií,
                regionálneho rozvoja a informatizácie SR.
                <br>
                Vytvorené v súlade s Jednotným dizajnovým manuálom
                elektronických služieb.
                </span>
            </div>

            <div class="govuk-footer__meta-item">
                <a class="govuk-footer__link govuk-footer__copyright-logo" href="#">
                <img src="/assets/images/logo-sk-black.svg" alt="Slovensko.sk">
                </a>
            </div>
        </div>
    </div>
</footer>

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 alebo HTMLDo pripraveného súboru vložte markup komponentu alebo použite zodpovedajúce Nunjucks makro, ak ho máte v projekte dostupné.
Importujte štýlyPre import individuálneho ID-SK komponentu päta do svojho Sass súboru pridajte:
```
@import "node_modules/@id-sk/frontend/idsk/components/footer/footer";
```

Doména gov.sk je oficiálna

Táto stránka je zabezpečená