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:

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:

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: