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.

<div class="notice">
  <i class="icon icon-important">
    <span class="visually-hidden">Upozornenie</span>
  </i>
  <strong class="bold-small">
    Ak sa nezaregistrujete, môžete dostať pokutu až do výšky 5&nbsp;000&nbsp;€.
  </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="example example-images">
  <div class="grid-row">
    <div class="column-one-half">
      <img src="/public/images/examples/3by2.jpg" alt="3:2">
    </div>
    <div class="column-one-half">
      <img src="/public/images/examples/beskydy.jpg" alt="">
    </div>
  </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>.

Príklady

• Stránka s príkladom: Ikony na stránke