Argumenty za dostępnością podnosi się zwykle na gruncie prawnym albo etycznym. W handlu internetowym jest trzeci, który mocniej ląduje na spotkaniu planistycznym: koszyk, którego klient nie potrafi dokończyć, to przychód, za którego pozyskanie już zapłaciłeś, a potem upuściłeś go na ostatnim kroku.
Oto błędy, które wprost blokują zakup, mniej więcej w kolejności, w jakiej to robią.
1. Pola formularza bez etykiety
Wzorzec „tekst podpowiedzi zamiast etykiety” wciąż jest wszędzie i zawodzi podwójnie: etykieta znika, gdy klient zacznie pisać, a czytnikowi ekranu nigdy nie została udostępniona jako etykieta.
W formularzu koszyka z dwunastoma polami ktoś, kto przy dziewiątym straci orientację, nie zaczyna od nowa. Wychodzi.
- róbUżywaj widocznej `<label for="…">` przy każdym polu. Etykiety pływające są w porządku, o ile element label jest prawdziwy.
- róbDodaj tokeny `autocomplete` — `email`, `given-name`, `address-line1`, `postal-code`, `cc-number`. Autouzupełnianie to największa redukcja wysiłku, jaką możesz zaoferować.
- róbNigdy nie ustawiaj `autocomplete="off"` w koszyku. To nie jest zabezpieczenie.
2. Błędy pokazywane samą czerwienią
Czerwona ramka nie mówi nic czytnikowi ekranu i niewiele jednemu na dwunastu mężczyzn z zaburzeniem widzenia barw. Jeśli jedynym sygnałem błędnego numeru karty jest zmiana koloru, klient utyka na stronie, która wygląda dobrze, i dalej nie przejdzie.
- róbUmieść błąd tekstem obok pola i powiąż go przez `aria-describedby`.
- róbUstaw `aria-invalid="true"` na polu.
- róbPowiedz, co byłoby poprawne: „Numer karty ma 16 cyfr”, a nie „Nieprawidłowy”.
- róbPrzenieś fokus do pierwszego błędu albo do podsumowania na górze formularza, które linkuje do każdego z nich.
3. Własne listy wyboru i kalendarze
Natywne `<select>` i `<input type="date">` są dostępne za darmo, a na telefonie lepsze niż prawie wszystko, co zbudujesz. Zastąpienie ich zupą `div`-ów to najczęstszy sposób, żeby koszyk stał się nieużywalny z klawiatury.
Jeśli własna kontrolka jest naprawdę konieczna — na przykład wybór kraju z wyszukiwaniem — zaimplementuj porządnie wzorzec ARIA combobox, razem z obsługą strzałek, i przetestuj go klawiaturą przed wdrożeniem.
4. Kontrast tam, gdzie liczy się najbardziej
To w drobnym druku kontrast zawodzi: terminy dostawy, wiersze z podatkiem, pole zgody na regulamin, suma. Czyli dokładnie to, co klient musi przeczytać, zanim się zobowiąże.
Osobnym winowajcą jest wyłączony stan przycisku płatności. Wyszarzony do granicy nieczytelności nie pozwala rozstrzygnąć, czy jest wyłączony, czy strona jest zepsuta.
5. Wygasanie bez ostrzeżenia
Limity sesji w koszyku karzą każdego, kto jest wolniejszy — korzysta z czytnika ekranu, przełącza się na powiększenie albo po prostu idzie po kartę do drugiego pokoju. Ostrzeż przed wygaśnięciem i zaproponuj przedłużenie jednym kliknięciem.
Co zrobić w tym tygodniu
Nie potrzebujesz pełnego audytu, żeby ruszyć z miejsca. Przeskanuj cztery strony, na których dzieje się transakcja, napraw to, co wróci, a potem przejdź je klawiaturą.
- róbSkanuj: stronę produktu, koszyk, kasę, potwierdzenie zamówienia.
- róbNapraw etykiety, teksty błędów i kontrast — to większość powyższej listy.
- róbDokończ zakup samą klawiaturą. Jeśli nie potrafisz, część twoich klientów też nie.
- róbUstaw te cztery strony na codzienne skanowanie, żeby aktualizacja szablonu po cichu tego nie cofnęła.
Pytania
- Czy dostępność faktycznie wpływa na konwersję?
- Mechanizm jest prosty: kto nie potrafi wypełnić formularza, nie kończy zakupu. Mniej więcej jedna na sześć osób ma niepełnosprawność, a powyższe poprawki — prawdziwe etykiety, autouzupełnianie, czytelne komunikaty błędów — mierzalnie zmniejszają opór dla wszystkich, nie tylko dla osób z technologiami asystującymi.
- Nasz sklep działa na platformie hostowanej. Ile możemy zmienić?
- Więcej, niż się wydaje. Etykiety, teksty błędów, kontrast i tokeny `autocomplete` siedzą w szablonie, który kontrolujesz. Czego często nie zmienisz, to zewnętrzny koszyk — wtedy zgodność dostawcy jest pytaniem zakupowym i warto je zadać na piśmie.
Czytaj dalej