Prípadová štúdia: web pre MŠ Hrušovany pri Brne na prístupnej šablóne

Prípadová štúdia: web pre MŠ Hrušovany pri Brne na prístupnej šablóne

Je zaujímavé, koľko ľudí si neuvedomuje, že web materskej škôlky nie je určený pre deti (ktoré väčšinou nevedia čítať, že?), ale pre rodičov, ktorí na ňom hľadajú informácie. Takže keď sa dá dohromady jedna škôlka, 3 pracoviská, spoločný web a šialený grafik, výsledok je jasný – a pritom dosť typický.

Materská škola Hrušovany sa rozhodla s tým niečo spraviť. Impulzom bola požiadavka zo zákona na prístupnosť webu, ale našťastie neostalo len pri tom. Zvíťazila myšlienka, že dobrý školský web nemusí byť nutne infantilný, ale hlavne že návštevníci musia jednoducho nájsť všetky informácie, ktoré potrebujú.

Zhodnotenie pôvodného webu

Zložité menu

  • Keď návštevník hľadal informácie v menu, musel sa preklikať až cez 4 úrovne. Stránky boli delené obsahovo a potom na jednotlivé škôlky, prípadne ďalej na triedy, napr. Základné informácie → Naše triedy → MŠ Havlíčkova → Trida Lienky alebo Kuchyňa → Pladby → MŠ Havlíčkova
  • Niektoré odkazy smerovali na stránky iba s jedným odkazom, či súborom, napr. Dokumenty → Základné informácie o ŠVP alebo Dokumenty → Školský poriadok.
Dokumenty-prevadzkovy-poriadok-povodny-web
Dokumenty – Prevádzkový poriadok, pôvodný web
  • Niektoré stránky boli uvedené niekoľko krát na viacerých miestach menu, napr. Prevádzkový poriadok jedálne bol v Kuchyňa → Prevádzkový poriadok a tiež v Základné informácie → Školné a stravné → Prevádzkový poriadok
  • Web obsahoval stránky, ktoré nemali žiadny obsah – neboli vôbec naplnené, napr. Fotogaléria → Spoločné akcie

Nevyhovujúca grafika

  • Výrazné pozadie rušilo pozornosť pri prechádzaní webu. Obrázok na pozadí bol tiež príliš veľký a výrazne spomaľoval načítavanie webu.

Nelogický obsah

  • Sekcie s podobným obsahom boli na viacerých miestach 
    • Kde nás nájdete (iba mapy s adresou)
    • Kontakty (adresa, emaily, telefóny)
  • V texte bol napríklad vypísaný kompletný text “Prihlášky k stravovaniu” s informáciou, že “Túto prihlášku nevytláčajte, bude Vám odovzdaná na stretnutí rodičov v septembri aj s prideleným variabilným symbolom.”

Nepriehľadnosť webu

  • V Aktualitách (prehľadu príspevkov) boli vypísané celé obsahy príspevkov
  • Orientácia v texte sťažovala nejednotnosť nadpisov a foriem Aktualít, napr.
    • rôzna veľkosť nadpisov,
    • niektoré nadpisy boli písané kapitálkami, iné nie,
    • celý text niektorých aktualit bol tučný apod.
  • Dôležité informácie boli na webe často len v PDF súboroch alebo ako obrázky, neboli v textovej podobe priamo na webe, napr. Jedálničky

Rozpory s požiadavkami na prístupnosť podľa WCAG 2.1

  • Web nebol responzivný
  • Chýbali odkazy pre preskočenie na hlavný obsah a ďalšie sekcie
  • Menu webu nebolo ovládateľné z klávesnice
  • Web nespĺňal požiadavky na kontrast (menu webu)
  • Informácie boli vkladané ako obrázky bez ďalších textových doplnení, napr. Deň otvorených dverí, Zápis do MŠ, Projekty, Prevádzka počas letných prázdnin, Alergény…
  • Rotujúce hviezdičky v sekciách, ktoré sa nedali zastaviť
  • Štruktúra a ovládanie nebolo konzistentné

Prínosy nového webu

Web je plne prístupný aj pre handicapovaných

Získali sme Osvedčenie o prístupnosti webu od SONS. Web spĺňa kritéria WCAG 2.1 v úrovni AA

Osvedcenie-o-pristupnosti-webu-mshrusovany.cz-SONS-CR
Osvedčenie o prístupnosti webu mshrusovany.cz, SONS-ČR
  • Technické riešenie prístupnosti zahŕňalo hlavne:
    • plne responzivný web,
    • vyladené farebné kontrasty,
    • odkazy pre preskočenie na navigáciu a hlavný obsah,
    • riešenie duplicitných odkazov,
    • prístupnosť všetkých ovládacích prvkov webu z klávesnice (vrátane menu),
    • ovládanie a orientácia na webe tak, aby bola konzistentná na všetkých stránkách, atď.
  • Bol zásadne revidovaný aj obsah:
    • maximum informácií vložených na web ako text,
    • všetky PDF dokumenty doplnené o textovú vrstvu,
    • všetky obrázky, nesúce informáciu obsahujú alternatívne popisy,
    • Informácie na stránkach sú štrukturované pomocou nadpisov viacerých úrovní.

Zjednodušená štruktúra a navigácia na stránkach

  • Menu má len 2 úrovne.
  • Štruktúra bola zmenená tak, že každé pracovisko má samostatnú položku v menu, spoločné informácie sú vložené do jednej položky.
  • Všetky dokumenty škôlky sú na jednej stránke.

Web na mobile

  • Stránky sú plne responzívne.
  • Zásadné zrýchlenie načítania.

Jednoduchosť a prehľadnosť

  • Kontakty na škôlku so pokope v zápätí každej stránky (všetky pracoviská + jedáleň).
  • Všetky informácie k jednému pracovisku sú na jednej stránke.
  • Informácie sú na webe vždy na jednom mieste – sú lepšie dohľadateľné a lepšie sa udržujú.
  • Web neobsahuje žiadne prázdne stránky.
  • Rozsiahlejšie stránky majú na začiatku “obsah” s odkazmi na jednotlivé oddiely.
  • Odkaz “Späť na začiatok” umožňuje užívateľovi prechod na začiatok stránky.
  • V prehľade Novinek je uvedený len stručný výpis príspevku s odkazom na celý text.

Jednotná grafika 

  • Grafické prvky využívajú 4 základné farby.
  • Veľkosť nadpisov je zjednotená naprieč webom.
  • Ikony noviniek (podľa danej kategórie) uľahčujú vizuálnu orientáciu.

Zhrnutie

Čo napísať záverom? Aj škôlka v obci s tritisíc obyvateľmi môže mať web, ktorý je moderný, rýchli, funkčný, prehľadný a prístupný.

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.