Prípadová štúdia: aj veľká škola s množstvom aktivít môže mať prehľadný web

Prípadová štúdia: aj veľká škola s množstvom aktivít môže mať prehľadný web

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

Kde bolo tam bolo… 

…v Trutnove 6 základných škôl. Potrebujú sa voči sebe vymedziť, odlíšiť sa a priatiahnuť pozornosť. Základná škola Trutnov 2 Mládežnícka na to pred časom išla cestou farebného, ​​graficky výrazného a veľmi obsiahleho webu. Škola Mládežnícka je progresívna a úspešná, s množstvom aktivít. Okrem bežných vecí, ako je družina a školský klub, ponúka záujmové krúžky a kurzy v klube Eldorádo. Vo veľkej miere sa zameriava na športové aktivity a moderné digitálne technológie. Škola je tiež zapojená do medzinárodných projektov (Erasmus +, E-Twinning) a žiaci sa zúčastňujú zručnostných, vedomostných a výtvarných súťaží.

To všetko prispelo k tomu, že sa zo školského webu časom stal len málo prehľadný labyrint, kde sa návštevník ľahko stratil. Na úvodnej stránke užívateľ nevedel na čo má skôr kliknúť. Ak web dobre nepoznal, tak sa strácal v tom, kde hľadané informácie asi tak môžu byť. Súvisiace informácie boli tiež často krát na viacerých miestach. Naopak niektoré boli na rôznych miestach v rôznych navigáciách viackrát. Vedenie školy sa preto rozhodlo pre zmenu. Impulzom bol aj zákon č. 99/2019 Zb. o prístupnosti internetových stránok a mobilných aplikácií. Neriešili sme ale len prístupnosť, vzali sme to od základu.

Ako sme pomohli

Naša práca prebiehala v 3 etapách:

  1. vykonali sme analýzu pôvodného webu
  2. navrhli sme zmenu štruktúry a novú grafickú podobu
  3. preniesli sme a výrazne upravili kľúčový obsah z pôvodného webu do nového

Zhodnotenie pôvodných stránok

Základom našej práce bolo prejsť web a zistiť, čo sa kde skrýva. Identifikovali sme celý rad nedostatkov.

Komplikovaná navigácia

  • Web obsahoval niekoľko na sebe nezávislých menu
  • Top bar – prihlásenie do žiackej knižky, emailu, do webu
  • Odkazy na zdieľanie – RSS, Youtube, Facebook
  • Navigácia v záhlaví stránky
  • Hlavná navigácia v postrannom panely, ktorá mala až 3 úrovne  – na úvodnej stránke sa mení na štvorce na začiatku stránky
  • Menu Projekty – viditeľné len na úvodnej strane

Nekonzistencia

  • Poloha hlavného menu bola na inom mieste na úvodnej stránke ako na ostatných stranách
  • Pri niekoľkých stránkach sa najskôr vypísali Novinky a až pod nimi bol obsah stránky, pri väčšine to bolo naopak
  • Niektoré odkazy z menu smerovali rovno mimo web školy

Nepriehľadnosť či neúplnosť stránok

  • Nebolo jasné čo kde hľadať, navigácie sa obsahom prekrývali, podobné informácie boli vo viacerých menu
  • Iný obsah (napr. projekty) bol naopak rozdelený do viacerých menu
  • Podobné informácie boli rozdelené do niekoľkých stránok – užívateľ musel zbytočne preklikávať web, kým sa dostal k požadovanej informácii
  • Niektoré stránky pripomínali “omaľovánky” – viacfarebné texty boli použité tak, že nebolo jasné, aká informácia je na stránke najdôležitejšia
  • Dôležité informácie (napr. Konkrétne opatrenia pre školu vzhľadom ku COVID-19) boli uvedené len v PDF súboroch, nie v textovej podobe priamo na webe
  • Úplne chýbali “Povinne zverejňované informácie” podľa zákona č. 106/1999 Zb.

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

  • Chýbali odkazy pre rýchly prechod na hlavný obsah (kritérium 2.4.1 úrovne A)
  • Niektoré položky menu neboli prístupné z klávesnice (kritérium 2.1.1 úrovne A)
  • Použité farby textu a pozadia neboli dostatočne kontrastné (kritérium 1.4.3 úrovne AA). Prvá úroveň postranného menu (ak mala rozbalené podmenu) mala bielu farbu textu na bielom pozadí – text nebolo vôbec vidieť
  • Časť informácií bola zbytočne vložená do tabuliek, ktoré spôsobovali problémy pri responzívnom zobrazení na mobile (kritérium 1.4.10 úrovne AA)
  • Text odkazu bol iba webová adresa bez vysvetlenia, kam odkaz vedie (kritérium 2.4.4 úrovne A)
  • Rotujúci obsah (tzv. Carousel) na úvodnej strane strhával pozornosť od ostatného obsahu webu a nebolo možné ho zastaviť (kritérium 2.2.2 úrovne A)
  • Niektoré nadpisy neboli v skutočnosti nadpisy, ale len rovnako naformátovaný text, zoznamy neboli skutočnými zoznamami (kritériá 1.3.1 úrovne A a 2.4.6 úrovne AA)
  • V článkoch boli použité medzery pre formátovanie a odsadenie textu (kritérium 1.3.2 úrovne A)
  • Zlé zalomenie textu vzniknuté väčšinou zlým prekopírovaním z textového editora (napr. Príspevok TRUTNOVSKÉHO DRAKA ovládli domáce tímy) (kritérium 1.3.2 úrovne A)
  • Uvádzanie skrátených slov a skratiek, ktoré sú pre nezasvätených nezrozumiteľné, napr. GaP, ŽP a pod. (Kritérium 3.1.4 úrovne AAA)

No a výsledok?

“Najväčší prínos nového webu? Prehľadnosť, jednoduchosť, ľahká orientácia.” Mgr. Zdeněk Géc, riaditeľ školy

  • Web je plne prístupný v súlade s kritériami WCAG 2.1 na úrovni AA (a tým pádom aj zákona 99/2019, Zb.). Prístupnosť bola tak ako vždy overená organizáciou SONS.
Osvedčenie o prístupnosti webu https://zsmltu.cz v úrovni AA od organizácie SONS
Osvedčenie o prístupnosti webu https://zsmltu.cz v úrovni AA od organizácie SONS
  • Na stránkach ostala len jedna navigácia, ktorá má len 2 úrovne. Pôvodných 79 ponúk menu sa zúžilo na 22.
  • Vizuálny štýl sa zjednotil naprieč celým webom.
  • Informácie sú vždy len na jednom mieste. Je tak jednoduchšia ich aktualizácia a ľahšie sa hľadajú.
  • Stránky s podobným obsahom sme zjednotili do jednej (Družina, Projekty, Školský klub Chobotnica …).
  • Maximum informácií je vložených ako text priamo na stránkach, namiesto pôvodných externých dokumentov, obrázkov s textom a pod.
  • Novinky z danej rubriky sú vypísané aj na príslušnej stránke (COVID-19, Družina, Chobotnica, Eldorádo, Šport).
  • V neposlednom rade sa zásadne zrýchlilo načítanie webu, a to ako na počítači, tak na mobile.

Pre nový web bol použitý redakčný systém WordPress a naša šablóna Accessible School Theme. Túto šablónu sme vytvárali s tým, aby bez problémov plnila požiadavky prístupnosti webu podľa špecifikácie WCAG 2.1. Pôvodne panovali obavy, či takúto rozsiahlu stránku dokáže šablóna obslúžiť – šablóna ale obstála na jednotku. Na žiadne technické problémy sme nenarazili a mohli sme sa preto sústrediť na optimalizáciu obsahu a štruktúry.

Čo povedať na záver?

Ste tiež veľká škola? Potrebujete Váš web nielen upraviť, aby spĺňal kritériá prístupnosti, ale prebudovať a vykrášliť ho? Ozvite sa nám. Nebojíme sa výziev. Každý projekt riešime individuálne a s citom.

Zdieľajte na:

Ďalšie články:

Nenechajte si nič uniknúť!

Prihláste sa k odoberaniu Newsletteru, v ktorom zasielame najzaujímavejšie tipy pre úspešné webové stránky.