Ekspertyza · Design UI/UX
Pracujemy z tokenami kolorów z obliczonym współczynnikiem kontrastu, wzorcami klawiatury sprawdzanymi element po elemencie oraz animacjami, które zatrzymują się zgodnie z preferencją systemu. Sprawdzamy narzędziem, na rzeczywistych stronach, i publikujemy też to, co nie przeszło.
Już zbudowaneSistemul rulează pe site-ul acesta și se poate inspecta. Tokenul `--muted: #666b65` obține între 4,72:1 și 5,45:1 pe cele șapte fundaluri ale sitului — recalculat de noi cu formula de luminanță din WCAG, nu preluat dintr-un instrument. Opt culori scrise direct în foaia de stil produceau 2,88–4,49:1; le-am găsit cu axe-core 4.10.2 rulat pe zece pagini live și le-am înlocuit cu tokenul, iar corectura e deja în foaia servită de producție. A doua implementare verificabilă: mecanismul de oprire a animațiilor — 38 de elemente animate la infinit pe pagina de start, toate acoperite de un buton de pauză, plus regula globală care anulează animațiile la `prefers-reduced-motion: reduce`.
Większość „systemów projektowych” to paleta i lista komponentów. Nasz zaczyna się od czegoś bardziej nudnego i bardziej użytecznego: każdy kolor tekstu ma obliczony współczynnik kontrastu względem każdego tła, na którym rzeczywiście występuje. Nie „wygląda dobrze”, tylko liczba. Token tekstu drugorzędnego na tej stronie, `--muted: #666b65`, daje od 4,72:1 do 5,45:1 na siedmiu używanych tłach. Wymagany próg dla małego tekstu to 4,5:1.
Liczba ta nie wzięła się z dobrego wychowania. Uruchomiliśmy axe-core 4.10.2 na dziesięciu stronach własnego serwisu i jedyną systematycznie naruszaną regułą WCAG był kontrast: od 31 do 43 węzłów na stronę, z czego 31 pochodziło z nagłówka i stopki, więc mnożyły się na wszystkich 147 adresach. Osiem kolorów wpisanych bezpośrednio w arkuszu stylów dawało od 2,88:1 do 4,49:1. Najgorszy, przy 10 px i 3,72:1, był dokładnie wiersz z linkami prawnymi — trasa, na którą trafia ktoś, gdy chce skorzystać ze swojego prawa.
Druga część systemu to ruch, traktowany jak funkcja, a nie dekoracja. Na stronie startowej jest 38 elementów animowanych bez końca. Wszystkie są objęte przyciskiem pauzy: po naciśnięciu przechodzą w stan zatrzymany, etykieta się zmienia, a stan jest ogłaszany czytnikom ekranu. Niezależnie od tego globalna reguła anuluje każdą animację i przejście, gdy system żąda ograniczenia ruchu, zatrzymuje płynne przewijanie i ukrywa nawet przycisk pauzy, który staje się zbędny. Sprawdziliśmy też klasyczną pułapkę — animację, która startuje od niemal zerowej nieprzezroczystości i sprawia, że treść pozostaje niewidoczna po anulowaniu: tutaj jej nie ma.
Reszta to dyscyplina: widoczny wskaźnik fokusu o szerokości 2 px, stosowany tylko podczas nawigacji klawiaturą; przechodzenie strzałkami w grupach zakładek, zgodnie z zalecanym wzorcem; formularze z błędami ogłaszanymi jako alert i potwierdzeniami ogłaszanymi jako stan. I zasada, której trzymamy się mocno: to, czego nie mogliśmy zweryfikować, zapisujemy jako nieweryfikowane. Własny audyt ma sekcję ograniczeń narzędzia, a dwa znalezione tam defekty są nadal otwarte — poniżej, z nazwami.
Co obejmuje
Paleta mieści się w bloku 14 zmiennych, a tekst pomocniczy korzysta z jednego tokena: `--muted: #666b65`. Współczynniki, przeliczone według wzoru względnej luminancji z WCAG na siedmiu tłach serwisu: 5,45:1 na białym, 5,15, 5,11, 5,03, 5,02, 4,79 i 4,72. Tekst główny, `--ink: #181a19`, daje 17,49:1 na białym; zielony akcent `#355c46`, 7,58:1. Gdy kolor nie osiąga progu, zmienia się token, a nie prowadzi dyskusji na spotkaniu.
Grupa zakładek na stronie startowej korzysta z ruchomego indeksu tabulacji: tylko aktywna zakładka jest dostępna klawiszem Tab, pozostałe są wyłączone z kolejności, a strzałki w lewo/prawo, Home i End przenoszą fokus, z anulowanym domyślnym zachowaniem klawisza. To wzorzec z zalecanych praktyk dla dostępnych komponentów, wdrożony, nie cytowany. W podstawowych komponentach serwisu są 21 etykiet dostępnych, 7 stanów wciśnięty/niewciśnięty, 3 powiązania między tytułem a regionem, 2 stany zaznaczenia, 2 regiony ogłaszające zmiany i 2 powiązania między komendą a panelem, którym steruje.
Na stronie startowej jest 38 elementów animowanych bez końca, uruchamianych automatycznie, trwających ponad pięć sekund — dokładnie sytuacja objęta kryterium „Pauza, zatrzymanie, ukrycie”. Wszystkie 38 są objęte przyciskami pauzy: po naciśnięciu animacje przechodzą w stan zatrzymany, a stan przycisku się zmienia. Niezależnie od tego, przy `prefers-reduced-motion: reduce` globalna reguła anuluje każdą animację i przejście, zatrzymuje płynne przewijanie, usuwa przesunięcie przy najechaniu myszą i ukrywa przycisk pauzy. W głównym arkuszu są siedem takich bloków, plus jeden w arkuszu bazowym.
Solidny obrys 2 px, w zieleni akcentowej, z odstępem 5 px, stosowany przez `:focus-visible` — więc pojawia się przy nawigacji klawiaturą, a nie po kliknięciu myszą. Zweryfikowane w przeglądarce, element po elemencie, w nagłówku i przy pierwszych kontrolkach w treści: cztery różne elementy, ten sam obrys. Nigdzie w arkuszu stylów nie ma usuniętego obrysu bez zamiennika.
W formularzu kontaktowym serwisu etykiety są przypisane do pól, błąd jest oznaczony jako alert, a potwierdzenie jako stan — więc czytniki ekranu ogłaszają je bez szukania przez użytkownika. Pułapka dla botów jest ukryta poprawnie: rodzic bez wyświetlania, oznaczony jako ukryty dla technologii wspomagających i usunięty z kolejności tabulacji. Własny audyt potwierdza, że reguły etykietowania, nazwy dla selektorów i autouzupełniania przechodzą wszystkie.
Uruchamiamy axe-core 4.10.2 na działającej stronie, nie w środowisku testowym, na próbie dziesięciu stron obejmujących różne wzorce: stronę startową, katalog, stronę produktu, indeks usług, stronę usługi, macierz rozwiązań, kombinację z macierzy, kontakt, cennik, artykuł i dokument prawny. Surowy wynik zapisuje się na stronie, z liczbą węzłów, a nie streszcza w „zgodne” .
Z tego samego audytu: przy szerokości 320 px komenda w nagłówku i przycisk menu wychodzą poza ekran o 22 px i strona przewija się poziomo — arytmetyka to 362 px treści w kontenerze o szerokości 280 px. W dokumentach prawnych linki w tekście nie odróżniają się od otaczającego tekstu niczym poza kolorem, a stosunek akcentu do tekstu głównego wynosi 1,01:1, więc podkreślenie jest obowiązkowe. Oba są otwarte, z zapisanym sposobem naprawy. Publikujemy je, ponieważ kupująca lub kupujący, która lub który wymaga dostępności, zasługuje na to, by zobaczyć, jak wygląda prawdziwa lista usterek.
Strona nie ma ciemnego motywu. Blok tokenów jest zadeklarowany dla trzech selektorów, które otrzymują identyczne wartości, a w kodzie nie ma żadnej reguły dla preferencji schematu systemu. Sprawdzone w przeglądarce z emulowanym ciemnym schematem: strona pozostaje biała. Użyteczna konsekwencja: wszystkie zmierzone współczynniki kontrastu są ważne w obu schematach. Nieprzyjemna konsekwencja: przełącznik motywu jest martwym kodem z punktu widzenia koloru. Prawdziwy ciemny motyw oznacza pełny ponowny pomiar kontrastu, a nie kopiowanie wartości.
Jedna rodzina dla nagłówków i tekstu, z dostosowaną na poziomie interlinią między literami — ciaśniejszą przy dużych nagłówkach, `-0,055em` na poziomach jeden i dwa, `-0,035em` na poziomie trzecim — oraz wagą 500 dla nagłówków. Akapity korzystają z wyrównywania wierszy, żeby nie zostawało pojedyncze słowo na ostatnim wierszu. Kontener ma maksymalną szerokość 1240 px z marginesami 48 px, a przyciski mają wszędzie tę samą wysokość wiersza. To reguły zapisane w arkuszu stylów, więc obowiązują także po naszym odejściu.
Jak to wygląda
Pierwsza dostawa to lista rzeczy, które ludzie faktycznie przychodzą robić, w kolejności częstotliwości, wraz z miejscem, gdzie dziś się zatrzymują. Bez niej każdy nowy ekran jest preferencją estetyczną. Z nią każda późniejsza decyzja ma kryterium.
Ustala się kolory, tła, na których faktycznie się pojawiają, oraz obliczony współczynnik każdej pary. Dostarczamy tabelę par wraz z ich współczynnikami. To znacznie tańsze niż odkrycie na końcu, że wybranej palety nie da się używać dla małego tekstu.
Każdy interaktywny komponent otrzymuje w tym samym commicie wygląd i zachowanie: co dzieje się po Tab, po strzałkach, po Escape, co jest ogłaszane i jak. Wzorzec klawiatury dodany później to przepisanie, a nie uzupełnienie.
Uruchamiamy narzędzie na próbce obejmującej różne wzorce i dostarczamy surowe wyjście, a nie podsumowanie. Każde ustalenie otrzymuje miejsce w kodzie, naruszony kriterium, proponowaną poprawkę i kryterium weryfikacji po poprawce — na przykład: liczba węzłów kontrastu musi spaść do zera na stronie zawierającej tylko nagłówek i stopkę.
Przekazujemy tokeny, komponenty, dokument audytu i listę tego, czego nie udało się zweryfikować, wraz z powodem. Na tej stronie lista obejmuje aktywację z klawiatury i emulację preferencji zmniejszonego ruchu w przeglądarce — oba ograniczenia narzędzia, oba zapisane tak, jak są.
Dane
Pytania, które zadaje każdy, kto ma inspektora ochrony danych — postawione tutaj, zanim on je zada.
Przykład
Sytuacja
Własna strona, niedawno przerobiona, z już istniejącym systemem tokenów. Nikt niczego nie zgłaszał. Pytanie nie brzmiało „czy wygląda dobrze?”, tylko „co mówi narzędzie, które nie ma opinii?”.
Co zbudowaliśmy
Wstrzyknęliśmy axe-core 4.10.2 na stronę live i uruchomiliśmy go na dziesięciu stronach wybranych pod kątem różnych wzorców. Jedyną systematycznie naruszaną regułą WCAG był kontrast. Zgrupowaliśmy węzły według pary tekst–tło, przeliczyliśmy każdy współczynnik wzorem luminancji względnej ze standardu — żeby nie opierać się na jednym narzędziu — i wyszukaliśmy każdy kolor w arkuszu stylów. Osiem wartości wpisanych bezpośrednio w kod powodowało wszystkie stałe błędy: 3,89:1 na 25 linkach w stopce, 2,88:1 na numerach kroków, 3,72:1 na wierszu z linkami prawnymi i jeszcze pięć między 3,99 a 4,49. Odpowiedni token już istniał; problem polegał na tym, że osiem reguł go omijało.
Co z tego wyszło
Osiem wartości zostało zastąpionych tokenem, a token dostosowano tak, aby przechodził próg na wszystkich siedmiu tłach serwisu. Sprawdzone dwukrotnie: w repozytorium nie ma już żadnego z ośmiu kolorów, a arkusz stylów serwowany dziś przez produkcję zawiera wyłącznie token. Przeliczone niezależnie: 4,72:1 w najgorszym przypadku i 5,45:1 na białym. Reszta audytu potwierdziła to, co już było poprawne — wskaźnik fokusu, wzorzec klawiaturowy w grupach zakładek, etykiety i stany w formularzu, pełne pokrycie animacji przyciskami pauzy.
Czego nie mówi ten przypadek
Dwa ustalenia pozostały otwarte i są zapisane dokładnie tak: przy szerokości 320 px nagłówek wychodzi poza ekran o 22 px, a w dokumentach prawnych linki w tekście odróżniają się tylko kolorem, przy współczynniku 1,01:1 względem otaczającego tekstu — sam kolor nie wystarcza, potrzebne jest podkreślenie. I ograniczenie metody: narzędzie automatyczne obejmuje część kryteriów. Aktywacja z klawiatury nie mogła zostać przetestowana dostępnymi narzędziami i jest oznaczona jako niezweryfikowana, niezaliczona.
Pytania
To znaczy liczby, nie przymiotniki. Tekst pomocniczy na tej stronie korzysta z jednego tokena, `#666b65`, który daje od 4,72:1 do 5,45:1 na siedmiu tłach, na których występuje — wymagany próg dla małego tekstu to 4,5:1. Fokus to obrys 2 px, który pojawia się tylko przy nawigacji klawiaturą. Ruch ma przycisk zatrzymania i całkowicie wyłącza się przy preferencji ograniczonego ruchu w systemie. Każde z tych stwierdzeń ma swoje miejsce w kodzie i sposób weryfikacji.
axe-core 4.10.2, uruchomiony na stronie live, na dziesięciu stronach pokrywających różne wzorce — strona główna, katalog, strona produktu, indeks i strona usługi, macierz rozwiązań i jej kombinacja, kontakt, cennik, artykuł, dokument prawny. Surowy wynik z liczbą węzłów na stronę trafia do dokumentu. Na tym dalej ręcznie przeliczamy współczynniki kontrastu wzorem ze standardu, żeby nie opierać się na jednym narzędziu. I zapisujemy wprost, czego nie udało się sprawdzić.
W momencie audytu jedyną systematycznie naruszaną regułą był kontrast: od 31 do 43 węzłów na stronę, z czego 31 z nagłówka i stopki, czyli pomnożone przez wszystkie 147 adresów. Osiem kolorów wpisanych bezpośrednio w arkusz stylów dawało od 2,88 do 4,49:1; najgorszy, przy 10 px i 3,72:1, był wiersz z linkami prawnymi. Wszystkie osiem są teraz zastąpione tokenem, a poprawka znajduje się w arkuszu serwowanym przez produkcję. Zostają otwarte dwie rzeczy: przy 320 px nagłówek wychodzi poza ekran o 22 px, a w dokumentach prawnych linki w tekście nie odróżniają się niczym poza kolorem, przy współczynniku 1,01:1 względem otaczającego tekstu. Obie mają zapisane poprawki.
Bo inaczej „dostępny” to słowo bez kosztu. Każda osoba może napisać, że spełnia standard; niewiele osób pokazuje listę niezgodności, z liczbą węzłów i linią w arkuszu stylów. Jeśli będziemy pracować razem, otrzymasz taki sam rodzaj listy o swojej stronie — włącznie z częściami, które nie są dla nas korzystne. Taniej jest dowiedzieć się od nas.
Nie, i mówię to, bo da się to zweryfikować: blok tokenów jest zadeklarowany dla trzech selektorów, które otrzymują identyczne wartości, a w kodzie nie ma żadnej reguły dla preferencji schematu. Emulując ciemny schemat w przeglądarce, strona pozostaje biała. Dobra wiadomość jest taka, że wszystkie zmierzone stosunki kontrastu są ważne w obu schematach. Do rozwiązania pozostaje to, że przełącznik motywu, który nie zmienia kolorów, to martwy kod. Prawdziwy ciemny motyw oznacza pełny ponowny pomiar kontrastu — nie przenosi się on z jasnego.
Mogą, i dlatego mają dwa wyjścia. Pierwsze: każdy element animowany w nieskończoność jest objęty przyciskiem pauzy — na stronie głównej sprawdziliśmy, że wszystkie 38 jest objętych, zero nieobjętych. Drugie: przy preferencji ograniczonego ruchu w systemie globalna reguła anuluje każdą animację i przejście, zatrzymuje płynne przewijanie i ukrywa nawet przycisk pauzy. Sprawdziliśmy też klasyczną pułapkę: jeśli animacja zaczyna się od opacity prawie zero i zostaje anulowana, treść może pozostać niewidoczna. Tutaj tak się nie dzieje, ponieważ elementy nie mają obniżonej bazowej opacity.
Dostarczamy tokeny i komponenty w kodzie. System projektowy, który zostaje w narzędziu do projektowania, eroduje przy pierwszej sytuacji awaryjnej: ktoś wpisuje kolor bezpośrednio w komponencie, bo „tak wygląda tu lepiej”, a po sześciu miesiącach masz osiem równoległych kolorów, które nie przechodzą weryfikacji. Dokładnie to stało się też u nas, jest to udokumentowane wyżej, i dlatego token jest jedynym źródłem prawdy dla koloru tekstu drugorzędnego.
Kilku konkretnych rzeczy, zapisanych tak jak są w audycie. Aktywacja z klawiatury: użyty panel przeglądarki nie powoduje domyślnej aktywacji — naciśnięcie Enter na przycisku nie generuje kliknięcia — więc nie raportujemy wniosków dotyczących Enter i Space. Emulacja preferencji ograniczonego ruchu: nie udało się jej włączyć w przeglądarce, więc reguła została zweryfikowana w źródle, a ręczny test z włączoną preferencją pozostaje zalecany. I metryki odczuwalnego ładowania nie były dostępne w narzędziu, więc są oznaczone jako niemierzone, a nie oszacowane.
Nie, i żadna uczciwa osoba nie powinna tego robić na podstawie narzędzia automatycznego. Narzędzie obejmuje część kryteriów; reszta wymaga ręcznej weryfikacji, a niektóre wymagają prawdziwych użytkowników. To, co gwarantujemy, to metoda: zadeklarowana próbka, zadeklarowane narzędzie i wersja, opublikowany surowy wynik, niezależnie przeliczone współczynniki, naprawa z kryterium weryfikacji oraz jawna lista tego, czego nie udało się zweryfikować. Certyfikat bez tej listy nic nie mówi.
14 z nich to kod i pliki z naszych repozytoriów. Nie publikujemy ich nazw ani numerów linii: razem, na jednej stronie, opisałoby to zbyt dokładnie, jak zbudowane są systemy, które nie należą tylko do nas. Przechodzimy je razem z Tobą, w repozytorium, na życzenie — weryfikacja pozostaje możliwa, tylko odbywa się w rozmowie.
Opowiedz nam o swoim procesie. Wspólnie ustalimy, co warto zbudować, co da się połączyć i jak sprawdzimy wynik.