Gdy przyklejone elementy zasłaniają przyciski, klient może widzieć stronę i nadal nie mieć dostępu do potrzebnej akcji. Stały nagłówek, dolny pasek oraz otwarty widżet osobno mieszczą się w projekcie, lecz razem zajmują miejsce przeznaczone na zadanie. Sprawdź konkretny przycisk w rzeczywistym przebiegu zamiast oceniać jedynie początkowy ekran. To ważne także przy konwersji na urządzeniach mobilnych, ale problem może wystąpić również na komputerze po powiększeniu widoku lub podczas obsługi klawiaturą.
Wybierz akcję, której klient nie może wykonać
Punktem wyjścia jest potrzebna akcja, na przykład „Kontynuuj” po wyborze wariantu, a nie lista wszystkich stałych elementów strony. Zapisz ekran, stan zadania i miejsce przycisku w momencie, gdy powinien być dostępny. Ustal, czy problem dotyczy zobaczenia, wybrania czy odczytania etykiety. Przycisk widoczny częściowo może nadal reagować na kursor, ale klient nie powinien musieć zgadywać jego treści ani szukać niewielkiego odkrytego fragmentu.
Jeżeli zgłoszenie opisuje „nie da się przejść dalej”, odtwórz drogę do tego stanu i sprawdź, czy akcja jest aktywna. Nie uznawaj każdej nieudanej próby za kolizję, bo przyczyną może być wymagany wybór lub błąd zadania. Zanotuj również, czy zasłaniający element występuje zawsze, czy pojawia się po przewinięciu, otwarciu widżetu albo zmianie orientacji. Te różnice pozwalają ograniczyć zadanie do konkretnego układu zamiast przebudowywać całą stronę bez potwierdzenia problemu.
Zrób mapę elementów zajmujących stałe miejsce
Mapa powinna obejmować elementy utrzymujące pozycję względem ekranu lub pozostające przyklejone podczas przewijania. Zapisz nagłówek, dolny pasek akcji, pływający przycisk kontaktu i rozwinięte okno, jeśli występują w badanym stanie. Dla każdego wskaż krawędź, zajmowany obszar i moment pojawienia. Nie opieraj analizy na samym numerze warstwy, ponieważ przeniesienie przycisku ponad okno może odsłonić go kosztem zasłonięcia treści potrzebnej do podjęcia decyzji.
Sprawdź elementy po zakończeniu ładowania i po rozpoczęciu zadania, bo widżet lub pasek może zostać dołączony później. Zachowaj aktywne warunki istotne dla problemu, zamiast zwijać wszystkie okna przed zrobieniem zrzutu. Przy ocenie kontaktu wykorzystaj temat dostępności ścieżek kontaktu. Celem jest jednoczesna możliwość wykonania zadania i skorzystania z kontaktu, a nie odsłonięcie jednego przycisku przez całkowite usunięcie potrzebnego kanału.
Sprawdź macierz szerokości, powiększenia i stanu
Macierz pozwala celowo zmienić warunki, w których układ może się zderzyć. Wybierz obsługiwany wąski ekran, typowy komputer, potrzebny poziom powiększenia oraz stan otwartego i zwiniętego widżetu. Tabela pokazuje przykładowe próby dla jednej akcji, bez ustalania uniwersalnych rozmiarów dla każdej strony. Zapisz wynik każdej próby wraz ze stanem zadania, aby osoba poprawiająca układ mogła odtworzyć kolizję bez szukania jej na przypadkowym ekranie.
Przesuń tabelę w bok, aby zobaczyć wszystkie kolumny.
| Warunek | Możliwa kolizja | Próba |
|---|---|---|
| Wąski ekran | Dolny pasek zajmuje miejsce przycisku | Przewiń do końca sekcji i sprawdź dostęp |
| Powiększenie widoku | Nagłówek zakrywa górną część treści | Przejdź do przycisku po zmianie powiększenia |
| Nawigacja klawiaturą | Fokus trafia pod stały element | Obserwuj całą drogę Tab do akcji |
| Otwarty widżet | Okno zasłania przycisk obok krawędzi | Porównaj stan otwarty i zwinięty |
Na telefonie sprawdź również sytuację z otwartą klawiaturą ekranową, jeśli przed przyciskiem klient wpisuje dane. Dostępny obszar może wtedy zmienić się w trakcie zadania, chociaż początkowy widok wyglądał poprawnie. Przetestuj możliwość przewinięcia przycisku ponad dolny pasek, bez zakładania, że wystarczy dalszy ruch palcem. Jeżeli strona nie ma miejsca na takie przewinięcie, zapisz to jako konkretny brak dostępnej przestrzeni, a nie ogólną ocenę „mobile wygląda źle”.
Przejdź klawiaturą do elementu z fokusem
Kontrola klawiaturą polega na przejściu do akcji w naturalnej kolejności, a nie ustawieniu kursora na widocznym przycisku. Obserwuj, czy po uzyskaniu fokusu element jest widoczny i czy strona przewija się do właściwej pozycji. Stały nagłówek może zakryć kontrolkę, do której przeglądarka właśnie przesunęła ekran. Użytkownik słyszący lub znający nazwę akcji nadal potrzebuje widocznego miejsca pracy, dlatego sam fakt działania klawisza Enter nie rozwiązuje kolizji.
Zapisz, czy zasłonięcie jest pełne czy częściowe i który element je powoduje. W3C F110 opisuje pełne zasłonięcie elementu z fokusem przez przyklejony nagłówek lub stopkę; nie przypisuj tego samego rozstrzygnięcia każdemu nachodzącemu pikselowi. Częściowo zasłonięta etykieta lub miejsce wyboru może nadal być realnym problemem do poprawy. Ocena konkretnego kryterium i użyteczność zadania powinny mieć jasno opisany dowód, zamiast wynikać z ogólnego wrażenia autora zrzutu.
Technika W3C F110 dotyczy sytuacji, gdy element z fokusem jest całkowicie zasłonięty przez przyklejony nagłówek lub stopkę. Częściowa kolizja też wymaga oceny użyteczności, ale nie jest automatycznie tym samym opisanym przypadkiem niespełnienia kryterium.
Połącz nagranie chwili z manualnym odtworzeniem
Dostępne nagranie może pokazać moment, w którym otwarte okno i pasek spotkały się z przyciskiem. Zaznacz poprzedni krok, pojawienie się elementu i dalsze próby klienta, bez przypisywania mu zamiaru na podstawie samych ruchów. Zrzut z tej chwili ułatwia wskazanie kolizji, ale nie dowodzi zachowania wszystkich rozmiarów ekranu. Potwierdź stan w kontrolowanej próbie z odpowiednią szerokością oraz aktywnymi elementami, zanim zlecisz poprawkę.
Wykorzystuj zasady analizy nagrań sesji i pamiętaj o zakresie rejestracji. W analityce Meetlead obejrzyj dostępne przebiegi, lecz kontrolę fokusu i pełnego zasłonięcia przeprowadź również ręcznie. Sam zapis ekranu nie zastępuje sprawdzenia nawigacji klawiaturą. Nie próbuj ocenić zgodności całej witryny z wymaganiami dostępności na podstawie jednego nagrania jednej osoby, gdy badana kwestia dotyczy określonej akcji i konkretnego warunku układu.
Wybierz poprawkę usuwającą konkretną kolizję
Poprawka może zmienić pozycję pływającego elementu, zapewnić miejsce pod dolnym paskiem albo dopasować przewijanie do stałego nagłówka. Wybór zależy od faktycznego układu i ważności treści, dlatego nie podawaj jednej wartości odstępu dla wszystkich stron. Opisz efekt: „Przy otwartym panelu kontaktu przycisk Kontynuuj pozostaje widoczny i dostępny po dojściu klawiaturą”. Techniczny sposób realizacji uzgodnij z właścicielem interfejsu i istniejącymi zasadami projektu.
Nie naprawiaj jednego ekranu przez przypadkową zmianę kolejności warstw bez sprawdzenia pozostałych kontrolek. Po przesunięciu okna upewnij się, że można nadal je zamknąć i skorzystać z potrzebnej akcji w środku. Po dodaniu przestrzeni sprawdź koniec treści i brak niepotrzebnego pustego obszaru w innych stanach. Powtórz macierz dla tej samej akcji, aby ocena poprawki odnosiła się do pierwotnej kolizji, a nie tylko nowego, wygodnego zrzutu ekranu.
Sprawdź odzyskanie zadania po zmianie
Końcowa próba ma potwierdzić, że klient może wykonać wcześniej zasłoniętą akcję i rozpoznać jej rezultat. Sama widoczność etykiety nie wystarcza, jeśli inny element nadal przechwytuje wybór albo fokus trafia w niewłaściwe miejsce. Przejdź drogę z otwartym oraz zwiniętym oknem i sprawdź wąski ekran. Zapisz moment zakończenia zadania, bez zamieniania odsłoniętego przycisku w dowód biznesowej konwersji, której aplikacja jeszcze nie potwierdziła.
Niektóre kolizje ujawniają się na rzadziej odwiedzanych ekranach, na przykład po błędnym odnośniku. Przy okazji oceny takich miejsc sprawdź powrót do zadania ze strony 404, gdzie potrzebny odsyłacz również powinien pozostać dostępny. Lista odtworzonych warunków i wynik końcowej próby wystarczą do zamknięcia ograniczonej poprawki. Zachowaj ten opis przy zadaniu, aby kolejna zmiana stałego paska nie przywróciła wcześniej usuniętej kolizji.
Pytania o zasłonięte przyciski
Czy wystarczy zmniejszyć widżet? Czasem, ale dopiero po sprawdzeniu, co faktycznie zasłania akcję. Problem może wynikać z dolnego paska, nagłówka albo braku miejsca na przewinięcie.
Przesunięcie lub zmiana układu może być właściwsza niż zmniejszenie okna. Po zmianie sprawdź także użyteczność kontrolek wewnątrz widżetu.
Czy częściowo widoczny przycisk jest bezproblemowy? Nie można tak założyć. Klient musi rozpoznać etykietę i wykonać działanie, również z klawiaturą.
Ocenę pełnego zasłonięcia według konkretnego kryterium rozdziel od innych problemów użyteczności. Zapisz obserwację i potrzebny rezultat zamiast kończyć analizę stwierdzeniem, że kawałek przycisku wciąż widać.
