Liceum im. M. Wańkowicza – nowa wersja strony

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. 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
Tailwind CSS v4 z konfiguracją w CSS i wspólna szerokość treści dla widoków Blade i komponentów Vue

Przed i po

Przeciągnij suwak – po lewej stara strona, po prawej nowa.

Przed · zanim dołączyłem (paź 2025)Po · nowa wersja

Pomiar	Przed	Po
Pliki widoków stron	65	35
Kopie widoków dla wersji EN	31	0
Kolory wpisane na sztywno	23	0
Rozmiary wpisane w px (np. text-[15px])	353	53

Liczby z widoków Blade. Przed – kod z 14.10.2025, ostatni stan przed moimi zmianami; po – nowa wersja na osobnej gałęzi. Zrzuty z wersji lokalnych, aktualności w starej wersji pochodzą z dzisiejszej bazy.

Jak to wygląda

Zrzuty z wersji lokalnych – nowa wersja i kod z października 2025. Kliknij zrzut, żeby go powiększyć.

Podstrona z treścią – O nas
Nowa wersja – tekst 200%, nagłówek i przyciski rosną razem z treścią
Wersja z października 2025 – tekst 200% dla porównania
Formularz rekrutacyjny, krok 1 – nowa wersja
Formularz rekrutacyjny – wersja z października 2025
Strona główna – cała
Strona główna – wersja z października 2025, cała

Rozwiązania w szczegółach

Rzeczy z kodu, które najlepiej pokazują, jak pracuję.

Jeden widok na dwa języki
Stara strona miała osobną kopię widoku dla wersji angielskiej. Teraz każda strona ma jeden widok, a teksty są w plikach językowych. Sekcję można ukryć tylko w jednym języku, a brakujące tłumaczenie pokazuje tekst polski.
Wysoki kontrast przez tokeny
Tryb wysokiego kontrastu podmienia zmienne kolorów. Działa tylko wtedy, gdy żaden kolor nie jest wpisany na sztywno – dlatego wszystkie kolory przeszły na tokeny marki i skalę Tailwinda.
Tekst rośnie razem z układem
Ustawienia dostępności zmieniają rozmiar tekstu do 200%. Rozmiary, odstępy i szerokość treści są w rem, więc cały układ rośnie razem z tekstem, a linia nie robi się za długa.
Zasady dla całego zespołu
Konwencje refaktoru spisałem w jednym pliku w repozytorium – rozmiary, kolory, tłumaczenia, ikony i lista kontrolna WCAG dla każdej nowej strony.

Co zbudowałem

Co zmieniam

Przed i po

Jak to wygląda

Rozwiązania w szczegółach

Jeden widok na dwa języki

Wysoki kontrast przez tokeny

Tekst rośnie razem z układem

Zasady dla całego zespołu

Masz projekt do zrobienia?