Webové komponenty

Typografia

Odporúčame používať pre všetky stránky jednotne len písmo uvedené v Jednotnom dizajn manuáli elektronických služieb. Zároveň odporúčame štruktúrovať textový obsah tak, aby bol ľahko a rýchlo čitateľný.

Obsah:

Písmo

Odporúčame používať písmo Source Sans Pro. Tento typ písma je voľne dostupný, môžete si ho stiahnuť napríklad v databáze Google Fonts.

Pre prípad nedostupnosti typu písma, ponúknite používateľovi typograficky podobnú alternatívu skupiny bezpätkového písma. Príklad: “font-family: Source Sans Pro, sans-serif;”.

Pri tvorbe textov dodržujte pravidlá slovenského pravopisu a používania interpunkcie.

Nadpisy

• V nadpisoch používajte veľké písmeno len na začiatku prvého slova a podľa pravidiel slovenského pravopisu. Nepoužívajte tzv. kapitálky na celé nadpisy.
• Dôsledne používajte nadpisy pre vytvorenie správnej a zrozumiteľnej hierarchie.

48 px Tučný nadpis

36 px Tučný nadpis

24 px Tučný nadpis

19 px Tučný nadpis

<h1 class="govuk-heading-xl">48 px Tučný nadpis</h1>

<h2 class="govuk-heading-l">36 px Tučný nadpis</h2>

<h3 class="govuk-heading-m">24 px Tučný nadpis</h3>

<h4 class="govuk-heading-s">19 px Tučný nadpis</h4>

Úvodný odsek

• Na úvodný odsek odporúčame používať veľkosť 24 pixelov. Veľkosť písma uvádzajte v relatívnych jednotkách.
• Na každej strane by mal byť maximálne jeden úvodný odsek.

24 px úvodný odsek, ktorý by mal obsahovať podstatné informácie. Text by mal byť krátky a zrozumiteľný.

19 px odsek s hlavným textom, v ktorom si používateľ nájde všetky potrebné informácie v zrozumiteľnej podobe.

<p class="govuk-body-l">
  24 px úvodný odsek, ktorý by mal obsahovať podstatné informácie. Text by mal byť krátky a zrozumiteľný.
</p>
<p class="govuk-body">
  19 px odsek s hlavným textom, v ktorom si používateľ nájde všetky potrebné informácie v zrozumiteľnej podobe.
</p>

Hlavný text

• Vyhnite sa nadmernému používaniu tučného písma a používaniu šikmého rezu písma (kurzíva).
• Veľkosť hlavného textu je 19 pixelov, pre menšie obrazovky 16 pixelov.
• Veľkosť písma sa povinne definuje v relatívnych jednotkách, pomocou hodnôt xx-small, x-small, small, medium, large, x-large a xx-large alebo pomocou percent, hodnôt smaller, larger a jednotiek em a ex. Veľkosť písma sa nedefinuje prostredníctvom jednotiek pt, pc, in, cm, mm a px.
• Uistite sa, že riadky textu nepresahujú 75 znakov, keďže viac znakov spraví text menej čitateľným.

19 px odsek hlavného textu. Napísaný text by mal byť zrozumiteľný, jednoznačný a krátky.

16 px odsek s podporným textom. Použite vtedy, ak potrebujete niečo dodatočne vysvetliť. Nepoužívajte na hlavný text.

<p class="govuk-body">
  19 px odsek hlavného textu. Napísaný text by mal byť zrozumiteľný, jednoznačný a krátky.
</p>

<p class="govuk-body-s">
  16 px odsek s podporným textom. Použite vtedy, ak potrebujete niečo dodatočne vysvetliť. Nepoužívajte na hlavný text.
</p>

Textové odkazy

Odkazy v hlavnom texte by mali byť zvýraznené. Ideálne:

• modrou farbou textu,
• podčiarknuté,
• inak odlíšené (nielen farebne).

Farby pre odkazy nájdete vo farebnej palete.

Samostatne stojace odkazy (bez okolitého textu) by sa nemali končiť bodkou.

Text každého odkazu by mal byť stručný a výstižný. Malo by byť z neho zrejmé, čo obsahuje, bez ohľadu na ostatný okolitý text. Pre jednoznačnú identifikáciu odkazu použite atribút „title“ prvku <a>. Nepoužívajte odkazy v tvare „kliknite tu“, „sem“, „celý text článku“ bez toho, aby bol text odkazu doplnený atribútom „title“ prvku <a> s doplňujúcou informáciou.

Na stránke uvádzajte len tie telefónne čísla, o ktorých s istotou viete, že ich aktivovaním je možné priamo na dané číslo telefonovať (napr. prostredníctvom mobilného telefónu).

19 px odkaz bez obklopujúceho textu

19 px odkaz v hlavnom texte. Za textovou linkou pokračuje textový odsek.

Späť

<p>
  <a class="govuk-link" href="#" title="19 px odkaz bez obklopujúceho textu">19 px odkaz bez obklopujúceho textu</a>
</p>

<p>
  <a class="govuk-link" href="#" title="19 px odkaz v hlavnom texte">19 px odkaz v hlavnom texte</a>. Za textovou linkou pokračuje textový odsek.
</p>

<a class="govuk-link link-back" href="#" title="Späť">Späť</a>

Použite triedu govuk-link--no-visited-state, kde nie je potrebné rozlišovať medzi navštívenými a nenavštívenými stavmi, napríklad pri odkazovaní na stránky s často meniacim sa obsahom, ako je napríklad panel administrátorského rozhrania.

odkaz bez stavu navštívenia

<a href="#" class="govuk-link govuk-link--no-visited-state" title="odkaz bez stavu navštívenia">odkaz bez stavu navštívenia</a>

Externé odkazy

Ak ide o externý odkaz na mimovládny web, uveďte to jasne v texte odkazu. Napríklad „prečítajte si radu pri písaní textu odkazu od [názov organizácie]“. Nie je potrebné explicitne tvrdiť, že odkazujete na externý web. Nepoužívajte ikonu externého odkazu.

Otváranie odkazov v novej karte

Neotvárajte odkazy na novej karte alebo v novom okne. Môže to byť dezorientujúce - a môže to spôsobiť problémy s prístupnosťou pre ľudí, ktorí nemôžu vizuálne vnímať otvorenie novej karty.

Ak potrebujete odkaz, ktorý sa má otvoriť na novej karte, napríklad ak chcete zabrániť používateľovi v strate informácií, ktoré zadal do formulára, zahrňte do odkazu slová „otvára sa na novej karte“. Na iných miestach nie je potrebné hovoriť „karta alebo okno“, pretože otvorenie na novej karte je predvoleným správaním väčšiny prehľadávačov.

Zahrňte rel="noreferrer noopener" spolu s target="_blank", aby ste znížili riziko reverzného tabnabbingu. Nasledujúci príklad ukazuje, ako to urobiť v jazyku HTML.

odkaz otvarajúci sa v novom okne

<a href="#" class="govuk-link" rel="noreferrer noopener" target="_blank" title="odkaz otvarajúci sa v novom okne">odkaz otvarajúci sa v novom okne</a>

Ak spolu zobrazujete veľa odkazov a chcete ušetriť miesto a vyhnúť sa opakovaniu, zvážte vykonanie oboch nasledujúcich krokov:

• pridanie textu pred odkazy „Nasledujúce odkazy sa otvárajú na novej karte“,
• vrátane <span class="govuk-visually-hidden">(opens in new tab)</span> ako súčasť textu odkazu, takže časť textu odkazu je vizuálne skrytá, ale stále prístupná pre screen readers.

Odkazy na tmavom pozadí

Použite triedu govuk-link--inverse na zobrazenie bielych odkazov na tmavom pozadí - napríklad v hlavičkách, vlastných komponentoch a vzorkách s tmavším pozadím.

Zaistite, aby všetci používatelia videli odkazy - biele odkazy a farba pozadia musia mať kontrastný pomer minimálne 4.5:1.

odkaz pre tmavé pozadie

            
<a href="#" class="govuk-link govuk-link--inverse" title="odkaz pre tmavé pozadie">odkaz pre tmavé pozadie</a>

Odkazy bez podčiarknutia

Na odstránenie podčiarknutí z odkazov použite triedu govuk-link--no-underline.

Urobte to iba v prípade ak z kontextu vyplýva, že text je odkazom, a to aj bez podčiarknutia.

Napríklad odkazy v hlavičke alebo na bočnej navigácii nemusia vyžadovať podčiarknutie. Používatelia pochopia, že ide o odkazy podľa toho, kde sa nachádzajú.

odkaz bez podčiarknutia

<a href="#" class="govuk-link govuk-link--no-underline" title="odkaz bez podčiarknutia">odkaz bez podčiarknutia</a>

Zoznamy

• Vymenúvacie zoznamy sú uvedené vetou zakončenou dvojbodkou, pričom každý riadok zoznamu začína malým písmenom a je ukončený čiarkou. Posledný bod zoznamu je ukončený bodkou.
• Alternatívou k tomu môže byť taká verzia, že každý bod zoznamu bude začínať veľkým písmenom a ukončí sa bodkou.

• prvý bod vymenúvacieho zoznamu,
• druhý bod vymenúvacieho zoznamu,
• tretí bod v poradí,
• štvrtý bod.

1. Prvý bod vymenúvacieho zoznamu
2. Druhý bod vymenúvacieho zoznamu
3. Tretí bod v poradí
4. Štvrtý bod.

<ul class="govuk-list govuk-list--bullet">
  <li>prvý bod vymenúvacieho zoznamu,</li>
  <li>druhý bod vymenúvacieho zoznamu,</li>
  <li>tretí bod v poradí,</li>
  <li>štvrtý bod.</li>
</ul>

<ol class="govuk-list govuk-list--number">
  <li>Prvý bod vymenúvacieho zoznamu</li>
  <li>Druhý bod vymenúvacieho zoznamu</li>
  <li>Tretí bod v poradí</li>
  <li>Štvrtý bod.</li>
</ol>

<ul class="govuk-list">
  <li><a class="govuk-link" href="#" title="Súvisiaci odkaz">Súvisiaci odkaz</a></li>
  <li><a class="govuk-link" href="#" title="Súvisiaci odkaz">Súvisiaci odkaz</a></li>
  <li><a class="govuk-link" href="#" title="Súvisiaci odkaz">Súvisiaci odkaz</a></li>
</ul>

Vsadený text

Pre upriamenie pozornosti na dôležitý obsah stránky je vhodné používať ohraničený vsadený text.

V prípade nedoplnenia žiadosti bude vaše konanie zastavené.

<div class="govuk-inset-text">
  V prípade nedoplnenia žiadosti bude vaše konanie zastavené.
</div>

Dôležité oznamy a text s právnym dopadom

V prípade dôležitého textu s možným právnym následkom (napríklad pokuta alebo trest odňatia slobody) použite tučné písmo s ikonou výkričníka.

Upozornenie Ak sa nezaregistrujete, môžete dostať pokutu až do výšky 5 000 €.

<div class="govuk-warning-text">
  <span class="govuk-warning-text__icon" aria-hidden="true">!</span>
  <strong class="govuk-warning-text__text">
    <span class="govuk-warning-text__assistive">Upozornenie</span>
    Ak sa nezaregistrujete, môžete dostať pokutu až do výšky 5 000 €.
  </strong>
</div>

Skrytý text (zobrazenie na požiadanie)

Tento prvok sa používa na uľahčenie prezerania obsahu stránky tak, že v prípade potreby zobrazíte doplnkové kontextové informácie. Dbajte na to, aby minimálne rozmery klikateľnej plochy boli 30 x 30 pixelov.

Kliknite na “Pomoc s národnosťou” pre ukážku.

Pomoc s národnosťou

Ak si nie ste istí, akú máte národnosť, skúste sa pozrieť na váš úradný dokument ako pas alebo občiansky preukaz.

<details class="govuk-details" data-module="govuk-details">
  <summary class="govuk-details__summary">
    <span class="govuk-details__summary-text">
      Pomoc s národnosťou
    </span>
  </summary>
  <div class="govuk-details__text">
    Ak si nie ste istí, akú máte národnosť, skúste sa pozrieť na váš úradný dokument ako pas alebo občiansky preukaz.
  </div>
</details>

Ak používate HTML5 elementy, budete potrebovať knižnicu pre staršie prehliadače.

Uistite sa, že váš zdrojový kód zodpovedá príkladu vyššie.