Co zbudowałem
Strona liceum im. Melchiora Wańkowicza ma wersję polską i angielską oraz panel z ustawieniami dostępności: większy tekst, wysoki kontrast i czytelniejsze fonty. Przy tej stronie pracuję w zespole Pesi od października 2025, a od lipca 2026 piszę jej front-end od nowa. Refaktor robię na osobnej gałęzi, bo szkoła cały czas dosyła zmiany do obecnej wersji. Strona miała sporo do poprawy w wyglądzie i działaniu – na szerokich ekranach się rozjeżdżała, a wiele komponentów mogło być jednym. Żeby nie zakopać się w kodzie, przepisuję ją etapami, sekcja po sekcji. Zacząłem od palety kolorów opartej na logo, a przy każdej sekcji sprawdzam WCAG. W trybie wysokiego kontrastu zostaje czarne tło, bo tak ustaliliśmy, ale na żółto są tylko linki i przyciski, a reszta tekstu jest biała – tak, jak zalecają wytyczne dostępności. Chcę, żeby szkoła dostała stronę, o którą zadbałem najlepiej, jak potrafię. Porównania poniżej pokazują kod i wygląd, które zastałem – stan z 14.10.2025.
Co zmieniam
- Dostępność według WCAG 2.2 – cel to poziom AAA, minimum AA: skalowanie tekstu do 200%, kontrast, obsługa z klawiatury, widoczny focus i rozmiar klikalnych elementów
- Jeden widok na stronę zamiast osobnych kopii dla języka angielskiego – teksty, adresy i dane kontaktowe w plikach językowych
- Kolory przez tokeny – zero kolorów wpisanych na sztywno, dzięki czemu tryb wysokiego kontrastu działa na całej stronie
- Rozmiary w rem, własne fonty bez zewnętrznych serwerów i jeden komponent ikon
- Alpine.js zamiast mieszanki z Vue – stara wersja używała naraz Alpine.js i Vue, często na tej samej stronie: nagłówek, stopka, formularze i kalendarz były komponentami Vue osadzanymi w widokach Blade. Interakcje przeniosłem do Alpine.js i zwykłego JavaScriptu, a Vue zostało w jednej sekcji (125 → 1 komponentów Vue). Strony bez tej sekcji w ogóle nie pobierają Vue
- Tailwind CSS v4 z konfiguracją w CSS i wspólna szerokość treści dla widoków Blade i komponentów Vue
