Webové komponenty

Ikony a obrázky

Odporúčame nepoužívať zbytočné grafické prvky. Ikony a obrázky by sa mali používať iba vtedy, keď ich používateľ naozaj potrebuje.

Obsah:

Ikony

• Používajte len bežne používané ikony zo zoznamu dostupných ikon Nevytvárajte vlastné ikony, ak to nie je nutné.
• Ak predsa len potrebujete použiť menej používané ikony, uistite sa, že sú pre používateľov zrozumiteľné, napríklad používateľským prieskumom. Ak použijete ikony, ktoré sú menej používané, je nutné k nim pridať viditeľný sprievodný text. Sprievodný text je odporúčaný pri všetkých ikonách.
• Každá ikona by mala v HTML kóde stránky obsahovať popisný text “title”.
• Pre obrázky a ikony odporúčame poskytovať textový ekvivalent v atribúte “alt”. Pokiaľ obrázok alebo ikona neobsahuje významovú hodnotu, v atribúte uveďte prázdnu hodnotu.
• Nie je správne skrývať nejasnú funkčnosť za ikonami, namiesto toho použite textovú linku s krátkym vysvetlením.

Dostupné ikony

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) odporúčame použiť tučné písmo s ikonou výkričníka.

Warning 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">Warning</span>
    Ak sa nezaregistrujete, môžete dostať pokutu až do výšky 5 000 €.
  </strong>
</div>

Obrázky

• Ak sú na stránke potrebné obrázky, mali by byť orientované na šírku a v pomere strán 3:2.
• Nepoužívajte obrázky ako náhradu textu. Výnimkou sú obrázky s grafmi alebo schémami, ktoré nie sú textom plne nahraditeľné.

<div class="govuk-grid-row">
    <div class="govuk-grid-column-one-half">
        <img src="/public/assets/images/examples/3by2.jpg" alt="3:2">
    </div>
    <div class="govuk-grid-column-one-half">
        <img src="/public/assets/images/examples/beskydy.jpg" alt="">
    </div>
</div>

Obrázkové odkazy

• Odkaz z obrázku by ste mali výstižne označiť zmenou kurzora.
• Obrázkový odkaz je vhodné doplniť aj popisným textom tak, aby bol jasný cieľ odkazu. Pokiaľ to nie je možné, je pre jednoznačnú identifikáciu odkazu potrebné použiť atribút title prvku <a>.