(M.8) Výběr a umístění obrázků

Obrázky mohou webové stránky příjemně oživit a mohou napomoci lepšímu porozumění informacím. Špatně použití obrázků (ať už jejich výběr nebo nesprávný způsob použití a zveřejnění) se však může pro některé návštěvníky webu naopak stát bariérou.

Volba velikosti a umístění obrázků

Při uvažování o obrázcích přemýšlejte nejen o estetické stránce věci, ale také o tom, jaký bude mít obrázek vliv na použitelnost stránky na různých typech zařízení (počítač, tablet, mobilní telefon apod.).

Informace zakryté obrázky

Nevhodná velikost, umístění či nastavení pozice obrázků může v některých případech přístup k informacím na webu komplikovat.

Příkladem je situace, kdy při určitém zvětšení nebo orientaci stránky obrázek překryje část textu nebo stránky. Uživatel se tak nedostane k požadovaným informacím, případně nemá přístup k některým akcím či ovládacím prvkům. Protože webové stránky se dnes čtou nejen na obrazovce počítače, ale také na mobilních zařízeních, která mají nejrůznější rozlišení či orientaci, je při kontrole webu nebo stránky nutné věnovat pozornost tomu, zda jsou obrázky správně vloženy a nastaveny a zda nezakrývají text nebo jeho části, zejména navigaci nebo ovládací prvky webu či formuláře.

Nevhodná velikost nebo nevhodné umístění obrázku

Pokud jsou obrázky příliš velké a zakrývají celou viditelnou část stránky (nebo její podstatnou část) a informace jsou zároveň umístěny až pod obrázkem, může to pro uživatele být matoucí nebo obtěžující:

Uživatel po načtení stránky většinou očekává alespoň nějaké textové informace. Nemusí ho napadnout rolovat směrem dolů, protože obrázek může považovat např. za okno s reklamou, případně se může domnívat, že došlo k nějaké chybě a načetla se mu jen část požadované stránky.

Pokud uživatel potřebuje procházet více stránek na webu, kde je na každé stránce obrázek a teprve rolováním dolů se dostane k potřebné informaci, může toto rolování vnímat jako obtěžující a nepříjemné.

Velké obrázky mohou zpomalit načítání stránek.

Text ve formě obrázků

Jednou z překážek přístupnosti je prezentace textových informací formou obrázku. Pokud je to možné, „obrázkovému textu“ se raději vyhněte, protože pro návštěvníky webu, kteří používají odečítač obrazovky, jsou obrázky jako takové neviditelné. Také pro ty, kdo si webovou stránku z různých důvodů potřebují zvětšit, mohou být tyto obrázkové texty velkou komplikací (viz též Možnost zvětšení obsahu stránky). Na rozdíl od běžného textu je totiž text ve formě obrázku při určitém stupni zvětšení rozostřený (tzv. pixelizovaný).

Na obr. 1 vidíte ukázku rozostření obrázkového textu, ke kterému dojde při zvětšení obrázku/stránky.
Obr. 1: Rozostření textu ve formě obrázku při zvětšení stránky
Obr. 1: Rozostření textu ve formě obrázku při zvětšení stránky (zdroj: archiv autorky)

Výběr obrázků

Používejte obrázky vhodné pro danou cílovou skupinu. Jiné obrázky jsou vhodné pro děti, jiné pro odborný článek, jiné pro pozvánku na akci nebo instruktážní letáček.

Je vhodné používat jednotný styl obrázků. Např. pokud chceme ve výňatku z knihovního řádu použít piktogramy, měly by tyto piktogramy být ve stejném stylu. Pokud by byly obrázky různé (např. pokud je v jednom textu případě použita černobílá ikona pro jednu instrukci a barevná fotografie pro jinou), uživateli to nejen nepomáhá v rychlejší orientaci v informacích, ale může to naopak být rušivé a zavádějící (viz obr. 2).
Obr. 2: Nevhodná kombinace dvou nesourodých ikon
Obr. 2: Nevhodná kombinace dvou nesourodých ikon (zdroj: Iconfinder a archiv autorky)

Má-li obrázek ilustrovat text nebo myšlenku, měl by být jasný a srozumitelný a mělo by na něm být pokud možno jen to, co je smyslem sdělení. Např. pokud má být obrázek ilustrací čtenáře, měla by na něm být pouze čtoucí osoba a ne už další objekty.
Příklad správně vybrané ilustrace vidíte na obr. 3 vlevo. Z obrázku je na první pohled jasně patrné, že jde o čtoucí ženu. Na pravé straně obrázku vidíme sice také čtoucí ženu, ale postava je příliš malá a jsou kolem ní další objekty. Uživatel se na obrázku musí nejdříve zorientovat a na první pohled mu nemusí být jasné, o co na něm vlastně jde.
Obr. 3: Vhodně a nevhodně vybraný ilustrační obrázek
Obr. 3: Vhodně a nevhodně vybraný ilustrační obrázek (zdroj: Pixabay, získáno 2020-05-14)

Proč je správný výběr obrázků důležitý Vhodné obrázky mohou pomoci v pochopení informace lidem, kteří mají nějaký problém s vnímáním informací. Jsou to např.: lidé s mentálním postižením; lidé s poruchami učení nebo soustředění; lidé, pro které čeština není mateřským jazykem (např. cizinci, příslušníci národnostních menšin nebo neslyšící, pro něž je mateřským jazykem český znakový jazyk).