Wpadki i wypadki #20

webkrytyk.pl 5 dni temu

W dzisiejszym odcinku Wpadek i wypadków przyjrzymy się temu, czemu dostępność polega na dostarczaniu odpowiadających sobie doświadczeń zamiast dokładnie takich samych.

Ten tekst zainspirowany został przez grę Clair Obscur: Expedition 33, w której jeden z bohaterów stwierdza, iż wszyscy ludzie są tacy sami, tylko inni.

Często przy tworzeniu dostępnych rozwiązań nachodzi człowieka pokusa, żeby dostarczyć wszystkim osobom korzystającym ze strony dokładnie takie samo doświadczenie. I często tego typu pokusa jest prawdziwą zmorą zarówno dla tego, kto tworzy takie rozwiązanie, jak i dla wszystkich, którzy potem są zmuszeni z niego korzystać. Niektórych doświadczeń nie da się po prostu wiernie przenieść między np. myszką a klawiaturą.

Wyobraźmy sobie, iż tworzymy slider – pole do wprowadzania danych przy pomocy pzresuwania suwaka. Działa to bardzo dobrze przy użyciu myszki, ale chcemy zapewnić podstawową dostępność i dodać obsługę przy pomocy klawiatury. Jednym z możliwych rozwiązań jest uczynienie suwaka fokusowalnym i dorobienie do tego obsługi klawiszy strzałek: strzałka w lewo zmniejszałaby wartość slidera, strzałka w prawo – zwiększała. W taki sposób działa choćby natywne pole input[type=range].

Kolejny scenariusz: przygotowujemy tablicę kanban. Jest podzielona na trzy kolumny: Do zrobienia, W toku, Zrobione. Zadania można przenosić między poszczególnymi kolumnami przy pomocy przeciągania myszką. Ale co w przypadku, gdy ktoś nie korzysta z myszki, a wyłącznie z klawiatury? Można to rozwiązać, pozwalając sfokusować każde z zadań na tablicy, a następnie przenosić przy pomocy klawiszy strzałek. To jednak nie rozwiązuje wszystkich możliwych problemów z dostępnością. Co w przypadku, gdy ktoś np. korzysta z urządzenia dotykowego, którego ekran jest źle skalibrowany i nie do końca pozwala na przeciąganie? Albo komuś zepsuła się myszka i musi korzystać z niewygodnego gładzika, na którym nie potrafi nic przeciągnąć? Wówczas przydałaby się możliwość przeniesienia przy pomocy zwykłego kliknięcia/dotknięcia. Projekty GitHuba mogą tutaj posłużyć jako przykład rozwiązania. Każdy kafelek na tablicy ma swoje własne, rozwijane menu. Wśród dostępnych w nim opcji jest także przeniesienie do wybranej kolumny tablicy.

I jeszcze jedna sytuacja: tworzymy edytor tekstu w przeglądarce. Jednym z ficzerów jest możliwość przeciągania obrazków między dowolnymi miejscami w tekście. Chcemy przenieść obrazek z samego końca na początek? Wystarczy przeciągnąć i upuścić obrazek w nowym miejscu. Ale co z osobami, które używają tylko klawiatury? Próba dorobienia przeciągania obrazka przy pomocy strzałek brzmi na dość karkołomną. Możliwym rozwiązaniem jest przenoszenie obrazka przy pomocy strzałek o jedną literkę. Naciśnięcie strzałki w lewo przeniosłoby obrazek o literkę w lewo, strzałki w prawo – o literkę w prawo. Ale korzystanie z tego do przenoszenia obrazka na większe odległości brzmi jak tortura. Nie sprawdzi się tutaj także rozwiązanie z tablicy kanbanowej. Owszem, można dodać menu kontekstowe do obrazka, ale w edytorze tekstu nie mamy tak jasno sprecyzowanych miejsc, jak w tablicy z nazwanymi kolumnami. Menu musiałoby zawierać wszystkie możliwe miejsca w tekście – czyli każdą literkę. I znów: takie rozwiązanie byłoby całkowicie nieużywalne. Jak zatem zapewnić możliwość przenoszenia takiego obrazka przy pomocy klawiatury? Otóż w większości edytorów taka możliwość istnieje w ramach zupełnie niezależnego od obrazków ficzera. A mianowicie: wycinania i wklejania. Obrazek można zaznaczyć, wyciąć przy pomocy skrótu Ctrl/Cmd + X, a następnie wkleić w odpowiednie miejsce przy pomocy skrótu Ctrl/Cmd + V. Podobnie można to zrobić na ekranie dotykowym, na którym przeciąganie obrazka w tekście jest mocno utrudnione. Zamiast skrótów klawiszowych tutaj wycinanie i wklejanie odbyłoby się prawdopodobnie przy pomocy menu kontekstowego.

I tutaj dochodzimy do sedna: doświadczenie ma być porównywalne, niekoniecznie takie same. Tak też jest stworzony standard WCAG. jeżeli przyjrzymy się wytycznej 2.5.7, dotyczącej drag&drop (przeciągania i upuszczania), to dostrzeżemy, iż ona też o tym wspomina:

Wszystkie funkcjonalności, które wykorzystują do działania ruch przeciągania można zrealizować dzięki wskaźnika jednopunktowego bez przeciągania […]

Technika dla tej wytycznej podaje przykłady. Wśród nich taki z tablicą kanban:

In a Kanban implementation for process management, tasks can be dragged horizontally from one ‘swimming lane’ to another in order to change the status of tasks (for example, to change the status of a task from “in process” to “completed”). One or several items in a lane can be selected by a single tap or click. A single pointer activation of a drop-down menu labelled “Move selected items to” offers a selection of drop targets (other lanes). A further single pointer activation over the desired menu item moves targets to the specified lane.

[W implementacji Kanbanu do zarządzania procesami zadania mogą być przeciągane poziomo z jednego „toru pływackiego” do innego, aby zmienić status zadań (np. żeby zmienić status zadania z „w trakcie” na „zrobione”). Jedno lub kilka zadań na danym torze może zostać wybranych przez pojedyncze dotknięcie lub kliknięcie. Aktywacja przy pomocy wskaźnika jednopunktowego otwiera rozwijane menu zatytułowane „Przenieś wybrane elementy do”, które pozwala wybrać miejsce przeniesienia (inne tory), Kolejne aktywowanie przy pomocy wskaźnika jednopunktowego na wybranej pozycji menu przenosi wybrane elementy do odpowiedniego toru.]

To w sumie dokładnie takie samo rozwiązanie, na jakie sami wpadliśmy! I na tym też w wielu przypadkach polega techniczna strona dostępności – na znalezieniu innego sposobu, by osiągnąć dany efekt, przy okazji omijając jakąś trudność lub ograniczenie. To tak jak w codziennym życiu. jeżeli trzeba wejść na 10. piętro, to można wbiec po schodach. Ale jeżeli przy okazji wnosi się 20 kilo żwirku dla kota, to raczej trzeba poszukać innego sposobu – takiego jak winda. Ostateczny efekt jest identyczny: dotarliśmy na 10. piętro oraz przesunęliśmy kafelek na tablicy kanban. Takie samo doświadczenie, tylko inne.

Przy okazji, dzisiaj obchodzimy Światowy Dzień Świadomości Dostępności! Z tej okazji życzę Nam wszystkim jak najbardziej dostępnej i przyjaznej wszystkim Sieci.

Idź do oryginalnego materiału