Szkoła w Czarnym Borze
Strona szkoły i przedszkola, która zmienia oprawę graficzną razem z porą roku, a jednocześnie spełnia wymogi dostępności cyfrowej obowiązujące instytucje publiczne.
- Klient
- Gminny Zespół Szkolno-Przedszkolny w Czarnym Borze
- Branża
- Edukacja, sektor publiczny
- Zakres
- Projekt, kod, wdrożenie, dostępność
- Stack
- Autorski sCMS
- Status
- Wdrożone, online
Wyzwanie
Instytucje publiczne w Polsce muszą spełniać ustawę o dostępności cyfrowej, czyli standard WCAG na poziomie AA. To twardy wymóg prawny, a nie dodatek.
Z drugiej strony strona szkoły i przedszkola ma być ciepła i żywa, ma mówić językiem dzieci i rodziców, a nie językiem urzędu. Wyzwaniem było połączenie tych dwóch światów, formalnych wymogów dostępności i lekkiej, przyjaznej formy.
Rozwiązanie
Zaprojektowałem i napisałem stronę od zera na własnym systemie sCMS, bez WordPressa i bez wtyczek. Pełna kontrola nad kodem oznacza, że dostępność jest wbudowana w stronę, a nie doklejona zewnętrznym widgetem.
- Motyw sezonowy, oprawa graficzna przełącza się automatycznie razem z porą roku.
- Dostępność w kodzie, semantyczny HTML, kontrast, obsługa klawiatury i czytelny fokus.
- Prosta nawigacja, aktualności, rekrutacja, dokumenty, plan lekcji, rozkład jazdy, kontakt i BIP.
Dostępność
Strona celuje w standard WCAG 2.1 na poziomie AA, zgodnie z polską ustawą o dostępności cyfrowej, a deklaracja dostępności jest opublikowana zgodnie z wymogami.
- Dodatkowo wdrożyłem wybrane kryteria z nowszego WCAG 2.2.
- 2.5.8 Target Size, minimalny rozmiar celu dotykowego dla przycisków i odnośników.
- 2.4.11 Focus Not Obscured, element z fokusem nigdy nie jest zasłonięty przez inne elementy interfejsu.
Efekt
Placówka dostała stronę, która jest jednocześnie zgodna z prawem, szybka i przyjazna. Rodzice znajdują potrzebne informacje w kilka sekund, a szkoła nie musi się martwić o aktualizacje wtyczek ani o ryzyko, że kolejny audyt wykaże braki w dostępności.
Technologie
- Autorski sCMS
- HTML5
- CSS3
- JavaScript
- WCAG 2.1 AA
- WCAG 2.2 (2.5.8, 2.4.11)
- Responsive