Rychlost a spolehlivost webové stránky pro A-technology

Rychlost a spolehlivost webové stránky pro A-technology

Jedním z našich spokojených zákazníků je i A-technology. Realizovali jsme pro ně kompletně nový návrh webové stránky – od grafického návrhu, přes šablonu a plugin na míru, až po plně funkční web. Přečtěte si, jak jsme postupovali při tvorbě webové stránky, jaké funkcionality jsme vytvořili a jak jsme dosáhli rychlost a spolehlivost jejich webové stránky.

A-technology 

Společnost A-technology již od roku 2006 realizuje řešení systémů vytápění a chlazení při výstavbě a provozu komerčních a obytných budov. Nabízejí také systémy technologického ohřevu a chlazení jako například solární systémy, klimatizace, či podlahové vytápění.

Pro A-technology jsme vytvořili nový návrh webové stránky a spolu s ním jsme do webu zakomponovali různé zajímavé funkcionality dle požadavků klienta.

Jak jsme postupovali při tvorbě webové stránky?

  1. Nejdůležitější je komunikace s klientem. V první řadě jsme si společně ujasnili představu a vydefinovali si, co klient požaduje.
  2. Náš grafik Jarda vytvořil wireframy kde definoval konkrétní prvky, které bude webová stránka obsahovat. Následně dodal grafický návrh klientovi, který jsme společně prodiskutovali.
  3. Následovala samotná tvorba šablony a pluginu na míru dle požadavků klienta, o kterou se postarali developeři ja (Daniel) a Zbyněk.
  4. Po vytvoření stránky byla stará webová stránka nahrazena novou – rychlejší a spolehlivější.
  5. Postupně jsme přidávali další funkcionality a dodávali nové změny klientovi.

Jaké funkcionality jsme dělali pro A-technology?

  • Komunikace s externím servisem pro objednávku servisu

Zajistili jsme okamžité řešení požadavků klientů díky napojení formuláře přímo na dodavatele. Dodavatel dostane vyplněný formulář, přímo do jeho interního systému HELIOS přes API, díky čemuž může automaticky poskytnout žádaný servis klientovi, bez zbytečných prostojů a zároveň si může pracovník servisu naplánovat efektivně pracovní den bez zbytečně najetých kilometrů.

  • Automatické vyplňování adresy

Součástí formuláře je i automatické vyplnění adresy na základě zvoleného místa na mapě ve formulářích, což ušetří čas.

  • Výpočet času čtení článku

Každá aktualita obsahuje informaci o tom, kolik času zabere čtení článku. Díky této funkcionalitě čtenář může očekávat, jak dlouho bude na stránce a v konečném důsledku to může přispět ke snížení míry opouštění stránky čtenářem.

  • Prezentační stránky

Jde o tradičnější, ale velmi důležité funkcionality jako reference, používané technologie, informační stránky či blog.

  • Kalkulačka

Vypočítá předběžnou cenu objednávky v € a CZK na základě technologií, které by dle zákazníka služba měla obsahovat. Tato funkcionalita se pro klienta momentálně připravuje.

Rychlá a spolehlivá webová stránka

Rychlost

  • Používáme pouze nutné minimum javascriptu.
  • Stylování (css) je v šabloně rozděleno tak, aby načetlo jen to, co je potřebné pro danou stránku.
  • Lazy load médií – načítání obrázků atd. neblokuje prohlížeč a postupně se donačítavají, aby byla webová stránka co nejdříve interaktivní.
  • Tvoříme kód s důrazem na výkon stránky.
  • Využíváme co nejméně pluginů třetích stran, které běží při načítání stránky.
  • Používáme caching, který výrazně urychluje načítání stránek.
Rychlost webu A-technology 94 % na počítači

Spolehlivost

  • Při tvorbě webových stránek používáme pouze ověřené a otestované pluginy. O většinu funkcionalit se starají developeři, čímž se limituje závislost na třetích stranách. Případné problémy proto můžeme řešit přímo.
  • Všechny pluginy jsou pravidelně updatované kvůli opravám chyb a bezpečnostním dírám.
  • Před tím, než cokoli přidáme na produkční server, to otestujeme na stagingu.
  • Pravidelně monitorujeme stav serverů.

Možnost přidání funkcí na základě požadavku klienta

Na modifikovatelnost a rozšiřitelnost myslíme u všech nových funkcionalit. Vytvořili jsme custom plugin a šablonu na Sage, které mají přehlednou strukturu umožňující pokračovat dále ve vývoji. Jednoduše můžeme přidávat nové funkce, protože počítáme s tím, že klient může kdykoli požadovat jakoukoliv změnu.

Přístupnost stránky

Také pro A – Technology jsme vytvořili webovou stránku tak, aby splňovala všechna kritéria.Web jsme udělali co nejvíc přístupný, optimalizovaný pro mobily, který je rychlý, bezpečný a spolehlivý. Pokud máte i vy zájem o takovou webovou stránku, neváhejte se na nás obrátit.

Sdílej na:

Další články:

Nenechte si nic uniknout!

Přihlaste se k odebírání Newsletteru, ve kterém zasíláme nejzajímavější tipy pro úspěšné webové stránky.

Proč mít v týmu webdesignera

Proč mít v týmu webdesignera

Vlastní podnikání znáte nejlépe. Podělte se o něj s webovým designérem, který vám navrhne design a za svou prací si stojí. Vždy ví co dělá. 

Kvalitní designer se vám vyplatí

Jsme si vědomi, že svůj business znáte nejlépe vy sami. Ale jak ho nejlépe prezentovat ve webovém prostředí, to ví lépe přeci jen designer. Web je specifický prostor a dobrý designer tento prostor zná, ví jak se v něm lidé pohybují, jak čtou informace, jak se rozhodují, na co jsou zvyklí. A na tomto základě navrhne váš design.

Kvalitní design
Designer se vyplatí

Na internetu je dnes nekonečné množství informací a uživatelé je velmi rychle třídí. Informace, které neprojdou třídicím procesem upadají v zapomnění. Pojďme se podívat na to, s čím vám může designer pomoci. 

Hierarchie a struktura

Obsah je pro úspěch webu naprosto zásadní a je základním kamenem úspěchu vašeho webu. Pokud ho máte, udělejte si fajfku, ale jedeme dál. Dobrý obsah je zapotřebí správně prezentovat. Něco jiného funguje v tiskovém letáku, či na osobní schůzce a něco jiného funguje na webu. 

Mezi největší problémy patří především:

  • Snaha prezentovat všechny informace najednou a hned.
  • Chybějící hierarchie obsahu.
  • Chybějící propojení informací v rámci webu. 

Když mi klient na schůzce tvrdí, že všechno je stejně důležité a všechno nejvíc, zeptám se ho, jaká služba tvoří většinu jeho obratu (viz. Paretovo pravidlo). Po chvíli ticha jsme konečně na stejné lodi (a ne každý ve svém malém člunu). Ne vždy je to takto jednoduché, ale nyní toto přirovnání splňuje svůj ilustrativní účel. 

Logická struktura webu
Logická struktura webu

Jak již bylo řečeno, designer ví, jak se uživatelé na webu chovají. Na tomto základě vám pomůže vymyslet logickou strukturu webu, a jeho jednotlivých stran tak, aby se uživatelům web dobře používal. 

Proces tvorby je následující:

  1. Brief neboli zadání – Designer se seznámí s vaší firmou, jejími službami, produkty a hodnotami.
  2. Informační architektura – V této fázi vzniká struktura stránek a informací, které chcete prezentovat na webu.
  3. Wireframe, neboli drátěný model – Už víme, jaké stránky web bude mít. Drátěný model poté definuje všechny konkrétní prvky, které se na webu budou vyskytovat. 

Na první pohled se to tak nemusí zdát, ale tento proces vám ušetří peníze. Při tvorbě webu není nic časově a finančně náročnějšího, než změna a korekce struktury, které se řeší až během tvorby grafického designu nebo kódování. 

Grafický design

Design na míru, přináší dvě hlavní výhody. 

Pokud je váš web vizuálně jedinečný a nezaměnitelný, uživatelé si ho lépe zapamatují

Jedinečný web
Jedinečný web

Návštěvníci si web spojí s vaší firmou a službou, poté si ve správnou chvíli na něj vzpomenou. Pokud postavíte web, například na šabloně, je potřeba počítat s tím, že je ,,tam venku” pravděpodobně plno dalších webů, které jsou tomu vašemu velmi podobné!

Webová stránka, jejíž design a vizuální obsah není generický, vzbuzuje u uživatelů větší důvěru

Pro úspěch vašeho webu je důvěryhodnost naprosto zásadní. Ta je jedním z hlavních rozhodovacích parametrů. Obecně jsou data na internetu často anonymní. Uživatelé si chtějí ověřit, že vám mohou věřit a také že nic neskrýváte. I taková jednoduchá věc, jako fotka kontaktní osoby, okamžitě zvyšuje důvěru. 

Je dobré se vyhnout fotografiím, které na první pohled nejsou autentické, například koupené ve fotobance. A když už to jinak nejde, designer vám pomůže vybrat ty vhodné. Poradí vám jaké prvky zlepší důvěryhodnost vašeho webu.

Přístupnost webu

Existuje řada principů a norem, které pomáhají zlepšit uživatelům jejich cestu k informacím na webu. 

Normy přístupnosti webu, zajišťují jeho použitelnost pro uživatele s nejrůznějšími omezeními. Mezi taková omezení mohou patřit například vady zraku ale dále také konkrétní situace, jako například čtení informací na mobilním zařízení, za silného slunečního svitu. 

Mezi základní parametry přístupnosti patří:

  • Dostatečná velikost fontů;
  • dostatečný kontrast mezi obsahem a pozadím;
  • obrázky na webu disponují alternativní texty;
  • a tak dále a tak dále… .

Oči mám v pořádku, ale když svítí slunce, valnou většinu textu na mobilu nepřečtu. Designer zajistí, aby váš web byl přístupný. Více o přístupném webu si můžete přečíst v článku Přístupný web je výhodný pro všechny. 

Přístupný web je výhodný
Přístupný web je výhodný

Závěrem

Toto je stručný výpis toho, s čím vám pomůže designer. Kdo to myslí v online prostoru vážně, měl by využít služeb webového designéra. Díky osvědčeným principům a dobrému grafickému designu se váš web stane silným obchodním nástrojem. Napište nám a rádi vám pomůžeme.

Sdílej na:

Další články:

Nenechte si nic uniknout!

Přihlaste se k odebírání Newsletteru, ve kterém zasíláme nejzajímavější tipy pro úspěšné webové stránky.

Přístupný web je výhodný pro všechny

Přístupný web je výhodný pro všechny

Proč máte web?

Cílem není mít web – ale web, který funguje. Web má za vás pracovat. Poskytovat informace, bavit, prodávat, učit… Lidé chodí na web kvůli informacím a obsahu. Proto je třeba uživatelům vyjít vstříc.

Příklad pro školy: Rodiče dětí vám nebudou telefonovat, kolik se platí za obědy a kdy se mají platit, pokud tyto informace snadno najdou na webu školy. (Jak jsme pomohli například škole v Trutnově?)

Příklad pro e-shop: Nemusíte mít informační telefonní linku, pokud zákazníci na webu snadno najdou informace o vrácení zboží.

Přístupný web je výhodný pro všechny

Lidé jsou různí. Víte, že:

  • 9 % mužů je barvoslepá (žen jen 0,4 %) [1],
  • více než polovina světové populace bude do roku 2050 krátkozraká [2],
  • 10 % populace trpí DYS [3],
  • 26 % populace je v rozmezí 50-70 let?

Ale třeba také, že:

  • 67% uživatelů si prohlíží internet z mobilu nebo tabletu a tento podíl stále roste [4],
  • hlasové ovládání je nastupující trend.

Jak se pozná přístupný web

Na první pohled? Nijak. Přístupnost tvůrce nijak zásadně neomezuje. Vytvoření úžasného a přístupného webu si nijak neodporuje.

Přístupnost má velký dopad na uživatelskou zkušenost (UX) [5]. Přístupný web nahrává přehlednosti, umožňuje zákazníkovi rychle najít informace a rychle se na webu zorientovat. Přístupný web je také bezpečný o čem si můžete přečíst v mém rozhovoru pro NÚKIB – Proč mít přístupný a bezpečný web?

“Proč mít přístupný web?” “Protože na to, že je váš web bez bariér, si nikdy nikdo stěžovat nebude.” Radek Pavlíček [6]

Příklad 1: Kontrastní barvy a vhodná velikost písma usnadňuje používání webu z malých obrazovek nebo v přesvětlené místnosti.

Příklad 2: Alternativní texty k obrázkům jsou výhodné pro uživatele s pomalým připojením k internetu.

Příklad 3: Přepis audia do textu nebo titulky u videa jsou skvělí pomocníci pro uživatele, kteří jsou v hlučném prostředí a nemají k dispozici sluchátka.

Nejčastější problémy webů

Je mnoho způsobů, jak házet uživatelům klacky pod nohy. Někdy z těch klacků vzniká nepřekonatelná bariéra.

Házení klacků pod nohy, Mladý hlasatel, IV. ročník, leden 1939
Mladý hlasatel, IV. ročník, leden 1939

Pro všechny uživatele:

  • orientace na webu je nepřehledná a web má složitou strukturu, texty jsou komplikované a nezáživné,
  • popisky formulářů nejsou dost informativní, nefunguje automatické vyplňování, na webu chybí vyhledávání,
  • na webu nečekaně vyskakují okna,
  • texty odkazů nejsou smysluplné nebo dostatečně popisné.

Pro uživatele mobilů:

  • web není plně responsivní,
  • klikatelné prvky jsou příliš malé nebo moc u sebe,
  • písmo je málo kontrastní (není vidět na slunci).

Pro seniory, slabozraké, krátkozraké:

  • písmo není kontrastní,
  • nevhodné parametry fontu (velikost, čitelnost písma), odkazy nejsou dostatečně odlišené a viditelné.

Pro dyslektiky:

  • při zvětšení písma se ztrácí část obsahu nebo vzniknou dlouhé řádky, které jsou špatně čitelné,
  • celé odstavce jsou psané kapitálkami (mimo nadpisů).

Pro lidi s poruchou pozornosti:

  • web obsahuje hýbající se nebo blikající prvky, které strhávají pozornost od vlastního obsahu,
  • na pozadí webu hraje zvuk, který se nedá vypnout.

Pro čtečky a hlasové ovládání:

  • chybí přeskakovací odkazy a definované oblasti stránky (záhlaví, zápatí, hlavní a vedlejší obsah atd.),
  • navigace není konzistentní (je v rámci webu na různých místech, mění se obsah apod.),
  • nadpisy a další sémantické bloky (seznamy atd.) jsou použité špatně, obrázky nemají alternativní popisky,
  • přiložené dokumenty nemají textovou vrstvu, videa nemají titulky nebo textový přepis,
  • na webu jsou bezprostředně za sebou duplicitní odkazy.

Pro uživatele z klávesnice:

  • web není plně ovladatelný z klávesnice,
  • zaměření (focus) klikatelných prvků není viditelné nebo je málo kontrastní.

Výzva na závěr

Neberte požadavky na přístupnost webu jako omezení. A už vůbec ne jako překážku, kterou je potřeba jen nějak obejít. Berte přístupný web jako výzvu. Výsledek stojí zato. Na první pohled možná nepostřehnete rozdíly, ale pro mnoho lidí to bude změna zásadní.

Zdroje

[1] https://cs.wikipedia.org/wiki/Barvoslepost

[2] https://zpravy.aktualne.cz/zahranici/lidstvu-hrozi-slepota-do-roku-2050- rapidne-pribude-zrakove-p/r~2d96ad18784711e7986b0025900fea04/

[3] https://www.learningsuccessblog.com/what-dyslexia-infographic

[4] https://www.netmonitor.cz/sites/default/files/prilohy/Cesi_Online_2020_Infogra fika_SPIR.pdf

[5] https://uxdesign.cc/website-accessibility-and-ux-how-are-they-related- c3693f81cbc0

[6] https://poslepu.cz/proc-mit-pristupny-web/

Sdílej na:

Další články:

Nenechte si nic uniknout!

Přihlaste se k odebírání Newsletteru, ve kterém zasíláme nejzajímavější tipy pro úspěšné webové stránky.

Případová studie: I velká škola se spoustou aktivit může mít přehledný web

Případová studie: i velká škola se spoustou aktivit může mít přehledný web

logo - Základní škola Mládežnická 536, Trutnov

Bylo nebylo… 

…v Trutnově 6 základních škol. Potřebují se vůči sobě vymezit, odlišit se a přitáhnout pozornost. Základní škola Trutnov 2 Mládežnická na to před časem šla cestou barevného, graficky výrazného a velmi obsáhlého webu. 
Škola Mládežnická je progresivní a úspěšná, se spoustou aktivit. Kromě běžných věcí, jako je družina a školní klub, nabízí zájmové kroužky a kurzy v klubu Eldorádo. Velmi se zaměřuje na sportovní aktivity a moderní digitální technologie. Škola je také zapojena do mezinárodních projektů (Erasmus+, E-Twinning) a žáci se účastní dovednostních, vědomostních a výtvarných soutěží.

To všechno přispělo k tomu, že se ze školního webu časem stal jen málo přehledný labyrint, kde se návštěvník lehce ztratil. Na úvodní stránce uživatel nevěděl na co dříve kliknout. Pokud web dobře neznal, musel tápat, kde hledané informace asi tak můžou být. Související informace byly také často na více místech. Naopak některé byly na různých místech v různých navigacích vícekrát.
Vedení školy se proto rozhodlo pro změnu. Impulzem byl i zákon č. 99/2019 Sb. o přístupnosti internetových stránek a mobilních aplikací. Neřešili jsme ale jen přístupnost, vzali jsme to z gruntu.

Jak jsme pomohli

Naše práce probíhala ve 3 etapách:

  1. provedli jsme analýzu původního webu
  2. navrhli jsme změnu struktury a novou grafickou podobu
  3. přenesli jsme a výrazně upravili klíčový obsah z původního webu do nového

Zhodnocení původních stránek

Základem naší práce bylo projít web a zjistit, kde se co ukrývá. Identifikovali jsme celou řadu nedostatků.

Komplikovaná navigace

  • Web obsahoval několik na sobě nezávislých menu
  • Top bar – přihlášení do žákovské knížky, emailu, do webu
  • Odkazy na sdílení – RSS, Youtube, Facebook
  • Navigace v záhlaví stránky
  • Hlavní navigace v postranním panelu, která měla až 3 úrovně  – na úvodní stránce se mění na čtverce na začátku stránky
  • Menu Projekty – viditelné pouze na úvodní straně

Nekonzistence

  • Poloha hlavního menu byla na jiném místě na úvodní stránce než na ostatních stranách 
  • U několika stránek se nejprve vypsaly Novinky a až pod nimi byl obsah stránky, u většiny to bylo naopak
  • Některé odkazy z menu směřovaly rovnou mimo web školy

Nepřehlednost či neúplnost stránek

  • Nebylo jasné co kde hledat, navigace se obsahem překrývaly, podobné informace byly ve více menu
  • Jiný obsah (např. projekty) byl naopak rozdělen do více menu
  • Podobné informace byly rozdělené do několika stránek – uživatel musel zbytečně proklikávat web, než se dostal k požadované informaci
  • Některé stránky připomínaly “omalovánky” – vícebarevné texty byly použity tak, že nebylo jasné, jaká informace je na stránce nejdůležitější
  • Podtržení textu bylo použito jak pro odlišení odkazů, tak pro pouhé zvýraznění textu
  • Důležité informace (např. Konkrétní opatření pro školu vzhledem ke COVID-19) byly uvedeny pouze v PDF souborech, nikoli v textové podobě přímo na webu
  • Zcela chyběly „Povinně zveřejňované informace” dle zákona č. 106/1999, Sb.

Nepřístupný obsah (prohřešky proti WCAG 2.1)

  • Chyběly odkazy pro rychlý přechod na hlavní obsah (kritérium 2.4.1 úrovně A)
  • Některé položky menu nebyly přístupné z klávesnice (kritérium 2.1.1 úrovně A)
  • Použité barvy textu a pozadí nebyly dostatečně kontrastní (kritérium 1.4.3 úrovně AA). První úroveň postranního menu (pokud měla rozbalené podmenu) měla bílou barvu textu na bílém pozadí – text nebyl vůbec vidět 
  • Část informací byla zbytečně vložená do tabulek, které způsobovaly problémy při responzivním zobrazením na mobilu (kritérium 1.4.10 úrovně AA)
  • Text odkazu byl pouze webová adresa bez vysvětlení, kam odkaz vede (kritérium 2.4.4 úrovně A)
  • Rotující obsah (tzv. Carousel) na úvodní straně strhával pozornost od ostatního obsahu webu a nebylo možné ho zastavit (kritérium 2.2.2 úrovně A)
  • Některé nadpisy nebyly ve skutečnosti nadpisy, ale jen stejně naformátovaný text, seznamy nebyly skutečnými seznamy (kritéria 1.3.1 úrovně A a 2.4.6 úrovně AA)
  • V článcích byly použité mezery pro formátování a odsazení textu (kritérium 1.3.2 úrovně A) 
  • Špatné zalomení textu vzniklé většinou špatným překopírováním z textového editoru (např. příspěvek TRUTNOVSKÉHO DRAKA ovládly domácí týmy) (kritérium 1.3.2 úrovně A)
  • Uvádění zkrácených slov a zkratek, které jsou pro nezasvěcené nesrozumitelné, např. GaP, ŽP apod. (kritérium 3.1.4 úrovně AAA)

No a výsledek?

“Největší přínos nového webu? Přehlednost, jednoduchost, snadná orientace.” Mgr. Zdeněk Géc, ředitel školy

  • Web je plně přístupný v souladu s kritérii WCAG 2.1 na úrovni AA (a tím pádem i zákona 99/2019, Sb.). Přístupnost byla tak jako vždy ověřena organizací SONS.
Osvědčení o přístupnosti webu  https://zsmltu.cz v úrovni AA od organizace SONS
Osvědčení o přístupnosti webu https://zsmltu.cz v úrovni AA od organizace SONS
  • Na stránkách zůstala jen jedna navigace, která má pouze 2 úrovně. Původních 79 nabídek menu se zúžilo na 22.
  • Vizuální styl se sjednotil napříč celým webem.
  • Informace jsou vždy jen na jednom místě. Je tak jednodušší jejich aktualizace a snáze se hledají.
  • Stránky s podobným obsahem jsme sjednotili do jedné (Družina, Projekty, Školní klub Chobotnice…) .
  • Maximum informací je vloženo jako text přímo na stránkách, místo původních externích dokumentů, obrázků s textem apod.
  • Novinky z dané rubriky vypsány i na příslušné stránce (COVID-19, Družina, Chobotnice, Eldorádo, Sport).
  • V neposlední řadě se zásadně zrychlilo načítání webu, a to jak na počítači, tak na mobilu.

Pro nový web byl použit redakční systém WordPress a naše šablona Accessible School Theme. Tuto šablonu jsme vytvářeli s tím, aby bez problémů plnila požadavky přístupnosti webu dle specifikace WCAG 2.1. Původně panovaly obavy, zda takovýto “moloch” dokáže šablona obsloužit – šablona ale obstála bez ztráty kytičky. Na žádné technické problémy jsme nenarazili a mohli jsme se proto soustředit na optimalizaci obsahu a struktury.

Co říci závěrem?

Jste také velká škola? Potřebujete Váš web nejen upravit, aby splňoval kritéria přístupnosti, ale konečně z roští vyšlechtit růži? Ozvěte se nám. Nebojíme se výzev. Každý projekt řešíme individuálně a s citem.

Sdílej na:

Další články:

Nenechte si nic uniknout!

Přihlaste se k odebírání Newsletteru, ve kterém zasíláme nejzajímavější tipy pro úspěšné webové stránky.

Proč mít přístupný a bezpečný web?

Proč mít přístupný a bezpečný web?

Naše kolegyně Mishka byla oslovena pracovnicí z NÚKIB Petrou Sobkovou o rozhovor pro právě probíhající Festival bezpečného internetu. Mishka u nás pracuje na tvorbě plně přístupných stránek pro MŠ, ZŠ a SŠ a Petra se jí zeptala proč takové stránky mít a proč mít dobře zabezpečen web. Zde si jej můžete přečíst:

V roce 2019 vstoupil do našeho právního řádu nový zákon č. 99/2019 Sb. o přístupnosti internetových stránek a mobilních aplikací, upravující přístupnost webu a aplikací ve veřejném sektoru. Povinnost mít přístupný web se dotkla řady organizací veřejné správy a mimo jiné také škol a školských zařízení. Ty jsou podle zákona rovněž povinným subjektem, ovšem pouze „(…) jde-li o obsah internetových stránek, který je vysoká škola, škola nebo školské zařízení povinna zveřejňovat na svých internetových stránkách podle jiného právního předpisu v rámci výkonu působnosti v oblasti veřejné správy na úseku školství, vědy, výzkumu, vývoje, inovací, jiné tvůrčí činnosti a péče o děti a mládež nebo podle zákona o svobodném přístupu k informacím.“[1] V praxi to znamená rekonstrukci těch částí webu, které ukládá zákonná povinnost. Pro řadu ředitelů se stala tato právní úprava impulsem pro kompletní rekonstrukci stránek školy. Pokud patříte mezi ty, kteří zvažují, zda se přestavby webových stránek z jakéhokoliv důvodu pustit, přečtěte si rozhovor s paní Mgr. Michaelou Vrankovou, programátorkou a specialistkou na problematiku přístupnosti webových stránek. Dozvíte se, co to vlastně přístupnost znamená, jaké jsou její výhody a nevýhody, a jak souvisí přístupnost s bezpečností.

Přístupné webové stránky: Základní škola a Mateřská škola Deblín
Přístupné webové stránky: Základní škola a Mateřská škola Deblín

Co je to přístupnost webu?

Řešení přístupnosti webů a internetových aplikací je postaveno na čtyřech principech. Zaprvé, uživatelé musí být schopni obsah webu vnímat kompletně bez ohledu na to, jestli mají třeba vadu zraku. Dále musí být uživatelé schopni web ovládat. Informace a ovládání musí být srozumitelné. A konečně, obsah musí být “zobrazitelný” na různých typech zařízení. Přístupný web je prostě takový, který neklade žádnému uživateli překážky.

Proč vlastně přístupnost řešit, když ji zákon ukládá zatím pouze v omezené míře, a některým subjektům vůbec?

Pro někoho může být důvodem požadavek zákona, pro jiného komerční výhoda. Já přístupnost řeším proto, že mi to dává smysl. A hlavně proto, že nemám argumenty, proč ji neřešit. Zajímavé je, že tato problematika je tlačena zezdola. Metodika WCAG (pozn. Web Content Accessibility Guidelines 2.0) vznikla před lety na základě spolupráce vývojářů a uživatelů. Až následně ji uchopily vlády a zakotvily požadavky do zákonů.

S přístupností ale přichází náklady navíc, nebo ne?

Jak se to vezme. Každý web představuje náklady navíc (například proti klasické úřední desce). Na druhou stranu, weby vytváříme proto, aby pracovaly za nás. Pokud web pracuje správně, nemáme například přetížený sekretariát školy telefonickými dotazy, které si rodiče jednoduše najdou na webu.

Přístupné webové stránky: MŠ Hrušovany u Brna
Přístupné webové stránky: MŠ Hrušovany u Brna

Přístupné weby má většina z nás spojené s uživateli, kteří mají nějakou vadu zraku. Tito lidé představují jen určité procento populace. Má smysl řešit přístupnost i kvůli jiným uživatelům?

Je pravda, že o přístupnosti se začalo mluvit nejdříve v souvislosti s uživateli, kteří mají nějaké zdravotní postižení – a to nejen zrakové. Lidé se zdravotním postižením jsou často v sociální izolaci a internet jim může výrazně usnadnit život. To je třeba důvod, proč státní a veřejné organizace musí přístupnost svých webů povinně řešit ze zákona. Okruh lidí, kterým přístupné weby usnadňují život je ale mnohem širší. Přibližně 26 % obyvatel je starších 50 let a ovládání počítače jim dělá problémy. Nebo si představte, že má někdo pravou ruku v sádře a počítač ovládá jen levou. Víte jistě, že tito uživatelé nejsou vaší cílovou skupinou? A co nastupující technologie? Už více než polovina uživatelů chodí na web přes mobil, rozmáhají se hlasoví asistenti jako je Siri nebo Alexa… Chcete pro ně dělat specializovaný web? Přístupný web je z mého úhlu pohledu výhodnější pro všechny – je přehlednější, rychlejší, lépe čitelný a především bezpečnější.

Říkáte bezpečnější – jaký je tedy vztah mezi přístupností a bezpečností webů a aplikací?

Rozhodně nesouhlasím s názorem, že přístupnost a bezpečnost jdou proti sobě. Naopak, mohou a měly by jít ruku v ruce. Pěkným příkladem je třeba postupné vymýcení Flashe (pozn. zastaralá technologie, která se používala pro animace a internetové aplikace), s jeho ústupem mizí celá řada bezpečnostních problémů a zároveň je to většinou i posun správným směrem v přístupnosti. A co tím chci říct? Že bezpečnost i přístupnost je možné řešit beze zbytku, jen je potřeba nad tím od začátku přemýšlet jako o celku, a neřešit obě oblasti odděleně.

Můžete uvést příklad?

Často uváděný příklad je třeba zabezpečení formulářů proti spamu. Oblíbenou metodou je CAPTCHA, ta má ale často k přístupnosti daleko. Představte si sami sebe, že jste silně krátkozrací a máte přitom rozeznat, na kterých z 9 malinkatých obrázků je loď nebo pták. Přitom existuje řada jiných metod, jak zabezpečit formulář proti zneužití, které na uživatele nekladou žádné požadavky a ani si jich nemusí všimnout.

Přístupné webové stránky: ZŠ a MŠ Otnice
Přístupné webové stránky: ZŠ a MŠ Otnice

Souvisí přístupnost také s bezpečností samotného uživatele? Nebo se řeší především skloubení přístupnosti a bezpečnosti (ochrany) systému?

Co se týče bezpečnosti uživatelů, jde o více aspektů. Například o to, aby byl uživatel schopen web nebo aplikaci používat bez pomoci druhé osoby. Aby třeba nemusel sdělovat své přihlašovací údaje někomu jinému proto, aby se za něj do aplikace přihlásil a provedl potřebné úkony. Poskytnutí přihlašovacích údajů třetí osobě – ať už vědomě nebo nevědomě – je pak nebezpečné nejen pro samotného uživatele, ale zvyšuje i riziko nabourání celého systému. Je to navíc jen krůček ke zneužití identity, odcizení dat a někdy i finančním ztrátám. Uživatel se při práci s aplikací nebo internetovou stránkou musí cítit pohodlně a bezpečně. A to je doména přístupnosti. Jak už jsem řekla – přístupnost a bezpečnost jde ruku v ruce.

Jak při tvorbě webu postupujete konkrétně vy?

Když navrhuji weby, tak si představuji, jak by s nimi pracovala moje rodina. Osmiletá dcera s internetem teprve začíná a klikne na kde co, aniž by věděla, co se stane. Prostřední syn je silný dyslektik – potřebuje si zvětšit písmo a dlouhé texty jsou pro něho peklo. Starší syn sjíždí weby jen na mobilu, tchán si s počítačem moc nerozumí… kterého z nich mám vyloučit? Přitom to je třeba typická cílová skupina pro takový školní web – od dětí přes rodiče až k prarodičům. Musím proto vyhovět všem a přitom nechci dělat různé varianty webu (normální web, přístupný web, mobilní web atd.) Tento přístup pak promítám nejen do návrhu grafiky a uživatelského rozhraní, ale i do struktury a obsahu.

Funguje následně tento přístup v praxi?

Skvěle. Problém bývá většinou jen s obsahem, protože na ten nemám 100% vliv. Musím přesvědčit zákazníka, že má informace zpřehlednit a zjednodušit. A také, že musí dodržovat určitá pravidla při tvorbě obsahu. Navíc to není jednorázová záležitost – obsah se tvoří průběžně a na pravidla přístupnosti je tak potřeba myslet neustále.

Je něco co byste chtěla vzkázat čtenáři?

Nebojte se toho. Neberte požadavky na přístupnost webu jako omezení. A už vůbec ne jako překážku, kterou je potřeba jen nějak obejít. Berte to jako výzvu. Výsledek stojí za to. Na první pohled možná nepostřehnete rozdíly, ale pro mnoho lidí to bude změna zásadní.

Rozhovor vznikl pro účely Festivalu bezpečného internetu.

Tazatel: Mgr. Petra Sobková, NÚKIB

Odpovídá: Mgr. Michaela Vranková, ZENI

Mishka - WordPress Developer
Mishka – WordPress Developer

Medailonek expertky:

Mgr. Michaela Vranková pracuje jako vývojářka. Své weby staví na platformě WordPress, kde ale programuje vlastní šablony tak, aby zajistila jejich maximální přístupnost. Přístupnost, tedy přívětivost webu bez ohledu na věk nebo zdravotní znevýhodnění, totiž považuje za jedno ze základních kritérií moderního webu. Soustředí se především na webové stránky škol. K těm má blízko mimo jiné proto, že je sama maminkou tří dětí. Za web Základní školy Deblín dokonce získala první místo v soutěži sCOOL web 2017. Provozuje také web pristupne-stranky.cz, kde se věnuje legislativě a zároveň radí dalším programátorům, jak s přístupností pracovat. Od roku 2019 je členkou týmu Zeni, který na testování přístupnosti stránek spolupracuje s organizací SONS ČR.

Pokud vás článek zaujal, je volně stažitelný na stránkách Národního úřadu pro kybernetickou a informační bezpečnost anebo si jej můžete stáhnout z webu ZENI.


[1] Citace zákona č. 99/2019 Sb., o přístupnosti webových webových stránek a mobilních aplikací

Sdílej na:

Další články:

Nenechte si nic uniknout!

Přihlaste se k odebírání Newsletteru, ve kterém zasíláme nejzajímavější tipy pro úspěšné webové stránky.

Případová studie: Web pro MŠ Hrušovany u Brna na přístupné šabloně

Případová studie: web pro MŠ Hrušovany u Brna na přístupné šabloně

Je zajímavé, kolik lidí si neuvědomuje, že web mateřské školky není určený pro děti (které většinou neumí číst, že?), ale pro rodiče, kteří na něm hledají informace. Takže když se dá dohromady jedna školka, 3 pracoviště, společný web a šílený grafik, výsledek je jasný – a přitom dost typický.

Mateřská škola Hrušovany se rozhodla s tím něco udělat. Impulzem byl zákonný požadavek na přístupnost webu, ale naštěstí nezůstalo jen u toho. Zvítězila myšlenka, že dobrý školní web nemusí být nutně infantilní, ale hlavně že návštěvníci musí snadno najít všechny informace, které potřebují.

Zhodnocení původního webu

Složité menu

  • Když návštěvník hledal informace v menu, musel se proklikat až přes 4 úrovně. Stránky byly děleny obsahově a dále pak na jednotlivé školky, případně dále na třídy, např. Základní informace → Naše třídy → MŠ Havlíčkova → Třída Berušky nebo Kuchyň → Platby → MŠ Havlíčkova
  • Některé odkazy směřovaly na stránky s pouze jedním odkazem či souborem, např. Dokumenty → Základní informace o ŠVP nebo Dokumenty → Školní řád.
Dokumenty - Školní řád, původní web
Dokumenty – Školní řád, původní web
  • Některé stránky byly uvedeny několikrát na více místech menu, např. Provozní řád jídelny byl v Kuchyň → Provozní řád a také v Základní informace → Školné a stravné → Provozní řád
  • Web obsahoval stránky, které neměly žádný obsah – nebyly vůbec naplněné, např. Fotogalerie → Společné akce

Nevyhovující grafika

  • Výrazné pozadí rušilo pozornost při procházení webu. Obrázek na pozadí byl také příliš velký a výrazně zpomaloval načítání webu.

Nelogičnost obsahu

  • Sekce s podobným obsahem byly na více místech 
    • Kde nás najdete (pouze mapy s adresou)
    • Kontakty (adresa, emaily, telefony)
  • V textu byl například vypsaný kompletní text “Přihlášky ke stravování” s informací, že “Tuto přihlášku netiskněte, bude Vám předána na schůzce rodičů v srpnu i s  přiděleným variabilním symbolem.“

Nepřehlednost webu

  • V Aktualitách (přehledu příspěvků) byly vypsány celé obsahy příspěvků
  • Orientaci v textu znesnadňovala nejednotnost nadpisů a forem Aktualit, např. 
    • různá velikost nadpisů,
    • některé nadpisy byly psány kapitálkami, jiné ne,
    • celý text některých aktuality byl tučný apod.
  • Důležité informace byly na webu často pouze v PDF souborech nebo jako obrázky, nikoli v textové podobě přímo na webu, např. Jídelníčky

Rozpory s požadavky na přístupnost podle WCAG 2.1

  • Web nebyl responzivní
  • Chyběly odkazy pro přeskočení na hlavní obsah a další sekce
  • Menu webu nebylo ovladatelné z klávesnice
  • Web nesplňoval požadavky na kontrast (menu webu)
  • Informace byly vkládány jako obrázky bez dalších textových doplnění, např. Den otevřených dveří, Zápis do MŠ, Projekty, Provoz o letních prázdninách, Alergeny…
  • Rotující hvězdičky u sekcí, které nešlo zastavit
  • Struktura a ovládání nebylo konzistentní

Přínosy nového webu

Web je plně přístupný i pro handicapované

Získali jsme Osvědčení o přístupnosti webu od SONS. Web splňuje kritéria WCAG 2.1 v úrovni AA

Osvědčení o přístupnosti webu mshrusovany.cz, SONS ČR
Osvědčení o přístupnosti webu mshrusovany.cz, SONS ČR
  • Technické řešení přístupnosti zahrnovalo především:
    • plně responzivní web,
    • vyladěné barevné kontrasty,
    • odkazy pro přeskočení na navigaci a hlavní obsah,
    • řešení duplicitních odkazů,
    • přístupnost všech ovládacích prvků webu z klávesnice (vč. menu),
    • ovládání a orientace na webu tak, aby byla konzistentní na všech stránkách, atd.
  • Byl zásadně revidován i obsah:
    • maximum informací vloženo na web jako text,
    • všechny PDF dokumenty doplněny o textovou vrstvu,
    • všechny obrázky nesoucí informaci obsahují alternativní popisy,
    • Informace na stránkách jsou strukturované pomocí nadpisů více úrovní.

Zjednodušená struktura a navigace na stránkách

  • Menu má pouze 2 úrovně.
  • Struktura byla změněna tak, že každé pracoviště má samostatnou položku v menu, společné informace jsou vloženy do jedné položky.
  • Všechny dokumenty školky jsou na jedné stránce.

Web na mobilu

  • Stránky jsou plně responzivní.
  • Zásadní zrychlení načítání.

Jednoduchost a přehlednost

  • Kontakty na školku jsou pohromadě v zápatí každé stránky (všechny pracoviště + jídelna).
  • Všechny informace k jednomu pracovišti jsou na jedné stránce.
  • Informace jsou na webu vždy na jednom místě – jsou lépe dohledatelné a lépe se udržují.
  • Web neobsahuje žádné prázdné stránky.
  • Rozsáhlejší stránky mají na začátku “obsah” s odkazy na jednotlivé oddíly.
  • Odkaz “Zpět na začátek” umožňuje uživateli přechod na začátek stránky.
  • V přehledu Novinek je uveden pouze stručný výpis příspěvku s odkazem na celý text.

Jednotná grafika 

  • Grafické prvky využívají 4 základní barvy.
  • Velikost nadpisů je sjednocena napříč webem.
  • Ikony novinek (podle dané kategorie) usnadňují vizuální orientaci.

Shrnutí

Co napsat závěrem? I školka v obci s třemi tisíci obyvatel může mít web, který je moderní, rychlý, funkční, přehledný a přístupný.

Sdílej na:

Další články:

Nenechte si nic uniknout!

Přihlaste se k odebírání Newsletteru, ve kterém zasíláme nejzajímavější tipy pro úspěšné webové stránky.

Případová studie: Přístupný web pro ZŠ a MŠ Otnice

Přístupný web pro ZŠ a MŠ Otnice

Od září letošního roku musí všechny weby základních škol splňovat tzv. pravidla přístupnosti. Jde o to, aby byl web použitelný a přístupný i pro osoby se zdravotním znevýhodněním, např. nevidomé a slabozraké nebo neslyšící.

Naše řešení pro školy založené na platformě WordPress jsme v nedávné době implementovali na web základní a mateřské školy v Otnicích www.zsotnice.cz.

U dosavadních stránek jsme identifikovali z hlediska přístupnosti i prosté uživatelské přívětivosti tyto problémy:

  • Komplikovaná navigace webu:
    • web obsahoval 2 navigace (menu), které se obsahem překrývaly,
    • jedno z menu mělo 3 úrovně.
  • Úvodní karusel(automaticky rotující obsah stránek), který strhával pozornost od ostatních informací (tento prvek je brán jako nepřístupný obsah).
  • Složitost webu:
    • v přehledu příspěvků byl vypsán celý obsah příspěvků, kvůli některým příspěvkům musel uživatel odrolovat i několik stránek,
    • web obsahoval stránky, které neměly žádný obsah (nebyly naplněné),
    • na stránkách byly informace, které na web nepatří – osobní informace, např. seznam žáků, kteří zaplatili za lyžařský kurz, atd.,
    • podobné informace byly rozdělené do několika stránek – uživatel musel zbytečně proklikávat web, než se dostal k požadované informaci.
  • Nepřehlednost webu:
    • důležité informace byly na webu pouze v PDF souborech, nikoli v textové podobě přímo na webu, např. Kroužky, Organizace školního roku, Platby stravného, Školkovné,
    • některé odkazy na stránkách byly uvedeny pouze URL adresou odkazu, nebylo přesně jasné, na jaký obsah se uživatel dostane, např. Důležité zdroje u volby povolání,
    • položky menu měly několik barev bez evidentního účelu.
  • Nepřístupný obsah:
    • chyběly přeskakovací odkazy,
    • menu webu nebylo ovladatelné z klávesnice,
    • web nesplňoval požadavek kontrastních barev,
    • malé písmo webu,
    • web nebyl responzivní – na mobilu byl prakticky nepoužitelný,
    • při procházení webu z klávesnice nebylo zřejmé na kterém odkazu se uživatel nachází,
    • soubory ke stažení byly uvedeny názvem souboru, nikoli popisem obsahu.

Co tedy nový web z naší produkce škole v Otnicích vlastně přinesl?

  1. Zjednodušení navigace webu – pouze 1 menu se 2 úrovněmi a jednotnou barvou.
  2. Zjednodušení webu:
    • stránky s podobným obsahem sloučeny do jedné,
    • maximum informací vloženo na web přímo v textech,
    • informace na webu jsou vždy na jednom místě – lépe dohledatelné a lépe se udržují,
    • odstraněny prázdné stránky.
  3. Zrychlení webu.
  4. Responzivní web.
  5. Kontakty na školu přímo v záhlaví a zápatí každé stránky.
  6. Jednoduché vkládání obsahu na web.
  7. Web je v souladu s pravidly přístupnosti.

Rádi jsme pomohli s řešením požadavku přístupnosti webových stránek Základní a mateřské školy v Otnicích. Děkujeme vedení školy za spolupráci a přejeme, ať nové stránky www.zsotnice.cz slouží ke spokojenosti školy, rodičů i žáků.

Sdílej na:

Další články:

Nenechte si nic uniknout!

Přihlaste se k odebírání Newsletteru, ve kterém zasíláme nejzajímavější tipy pro úspěšné webové stránky.