ANM AccessLaboratorium dostępności

ANM ACCESS LAB / ETAP 01 · DOSTĘPNOŚĆ WZROKOWA

To wciąż Twoja strona.
Ale czy każdy może z niej skorzystać?

Wyobraź sobie klienta, który chce przeczytać ofertę i kliknąć „Wyślij zapytanie”. Nie zmieniamy Twojego produktu ani treści. Zmieniamy przeszkody, które stoją między nim a klientem.

Zobacz własny przykład

To demonstracja barier interfejsu, a nie symulacja widzenia konkretnej osoby ani certyfikat WCAG.

01 / 03

Wpisz fragment swojej strony

Te same dane pojawią się po obu stronach porównania. Przykład jest przetwarzany wyłącznie w Twojej przeglądarce — niczego nie wysyłamy na serwer.

02 / 03

Ten sam projekt, inna dostępność

Wybierz przykładową barierę. Próbka po lewej celowo pokazuje błędy wizualne; wszystkie prawdziwe kontrolki laboratorium pozostają czytelne i dostępne.

Jaki problem porównujemy?

Przy niskim kontraście tekst może zlewać się z tłem, choć dla projektanta wygląda subtelnie.

Przed poprawkami

Celowo pokazana bariera

Twoja firma
POZNAJ NASZĄ OFERTĘ

Znajdź usługę, której potrzebujesz

Przejrzyj ofertę, wybierz rozwiązanie i skontaktuj się z nami. Wszystkie potrzebne informacje znajdziesz w jednym miejscu.

Wyślij zapytanie

Problem: drobny tekst i zbyt słaby kontrast utrudniają przeczytanie oferty.

Po poprawkach

Interaktywna wersja z możliwością dostosowania

Twoja firmaOferta · Kontakt
POZNAJ NASZĄ OFERTĘ

Znajdź usługę, której potrzebujesz

Przejrzyj ofertę, wybierz rozwiązanie i skontaktuj się z nami. Wszystkie potrzebne informacje znajdziesz w jednym miejscu.

Ta sama oferta. Tekst dopasowuje się do powiększenia, kolory można zmieniać, a przycisk obsłużyć klawiaturą.

03 / 03

Oddaj sterowanie użytkownikowi

Osoba słabowidząca nie potrzebuje „specjalnej wersji internetu”. Potrzebuje interfejsu, który da się dopasować do jej potrzeb.

Wielkość tekstu w poprawionej wersji

Spróbuj 200% i zobacz, czy tekst oraz przycisk pozostają widoczne bez przewijania poziomego.

Kolory i kontrast

Kontrast zwykłego tekstu: obliczanie…

Odstępy i czytelność

Na poziomie AAA kryterium 1.4.8 opisuje m.in. możliwość wyboru kolorów, szerokość bloku tekstu i odstępy. Ustawienia pokazują te zasady na przykładzie — nie zastępują testów całej aplikacji.

Możesz zmienić treść, wybrać barierę i dostosować widok po poprawkach.

OD DEMONSTRACJI DO RZECZYWISTEJ DOSTĘPNOŚCI

Sam przełącznik „AAA” niczego nie potwierdza.

Pokazujemy tu wybrane bariery wzrokowe. Zgodność strony z WCAG 2.2 AAA wymaga spełnienia wszystkich odpowiednich kryteriów A, AA i AAA w całym ocenianym zakresie — także poza wyglądem.

1.4.6 · AAAKontrast co najmniej 7:1 dla zwykłego tekstu; 4,5:1 dla dużego tekstu.
1.4.8 · AAAMożliwość dostosowania prezentacji bloków tekstu, w tym kolorów, szerokości i odstępów.
1.4.4, 1.4.10, 1.4.12 · AAPowiększanie, ponowny przepływ treści i odstępy bez utraty informacji lub funkcji.
Przed deklaracją zgodnościTesty klawiaturą, czytnikiem ekranu, w powiększeniu, na telefonie oraz audyt całego procesu.

Pełna specyfikacja WCAG 2.2 (W3C) — otwiera nową kartę · Jak osoby z niepełnosprawnością wzroku korzystają z internetu (W3C) — otwiera nową kartę