Zoey uwielbia przeglądać Internet. Lubią gubić się w połączonej sieci pełnej informacji, rozwijając kawałki wiedzy, które są godne zakładki. Ale nie lubią przeglądać dużych ilości tekstu. Wolą obrazki. Dużo ich. Przeglądają zdjęcia swoich ukochanych na Facebooku, zanim w ogóle pomyślą o przeczytaniu ich biografii. Ich tęsknota za memami i wizualizacjami jest nieporównywalna z nikim na tej planecie, a ich historie na Instagramie to odzwierciedlają. Są one po prostu, wiesz, mocno związane z ich wizualną naturą ucznia. I nie ma w tym nic złego.
Ale świat nie ma w sobie tylko Zoey. Jest Trung-Anh, jest Sewon, jest Nayon, jest Venkatesh, jest Zeqiu, jest Dinko, jest Sade, jest Ivan i jest Mohammed. Według WHO, co najmniej około 29% (2,2 miliarda) światowej populacji (7,7 miliarda) ma jakąś formę upośledzenia wzroku, czyli co najmniej 3 osoby z wyżej wymienionej listy. Hmm, więc, umm … teraz, gdy wiemy, że 29% populacji może nie być w stanie zobaczyć treści wizualnych, co robimy? Czy nadal pozostajemy przy dosłownej interpretacji cytatu Freda Barnarda „Obraz wart jest tysiąca słów”? Śmiem twierdzić, że nie. Nie zawsze.
Często zadawanym ciekawym pytaniem jest – jak osoby z dysfunkcją wzroku korzystają z komputera? Po pierwsze, myślę, że ważne jest, aby zrozumieć, że posiadanie upośledzenia wzroku nie jest synonimem bycia niewidomym. Tak więc, jeśli widzimy kogoś używającego białej laski, błędem byłoby zakładać, że jest on całkowicie niewidomy. Jeśli chodzi o korzystanie z komputera, w zależności od poziomu widzenia, osoba taka może używać czytników ekranu do odczytywania treści na ekranie. Niektóre popularne czytniki ekranu to JAWS, NVDA (darmowy i open-source) oraz VoiceOver (wbudowany w urządzenia Apple).
Stan świata
Wspaniale! Mamy więc sposób, w jaki użytkownicy czytników ekranu mogą wchodzić w interakcję ze swoimi komputerami lub urządzeniami mobilnymi. Ale jak czytnik ekranu może czytać zdjęcia swoich ukochanych? Albo memy? Albo wykresy/wizualizacje? Jedną z możliwych odpowiedzi jest to, że powinniśmy dokonać postępu medycznego, aby wyleczyć ich wzrok lub cokolwiek podobnego, aby mieli osobistego opiekuna/przyjaciela/rodzinę, która może im wyjaśnić, co jest na ekranie. Inną możliwą odpowiedzią jest zbudowanie świata, w którym będą mogli zrobić to sami. Jeśli Twoja odpowiedź była bliższa tej pierwszej, to najwyraźniej potrzebujesz edukacji i zapoznania się z koncepcjami społecznego modelu niepełnosprawności.
Obrazy
Skupmy się na obrazach. Aby czytnik ekranowy był w stanie odczytać obraz, musi wiedzieć, czego on dotyczy, a następnie przedstawić go użytkownikowi w znaczący sposób. Na przykład, rozważmy obraz rodziny bawiącej się ze swoimi bliźniakami Huskies (Go Huskies!). Użytkownik, który nie czyta na ekranie, może łatwo zorientować się, co dzieje się na obrazie – nie tylko to, co dzieje się na pierwszym planie, ale także to, co dzieje się w tle. Na przykład, Jialin, jeden z członków rodziny ma na sobie koszulkę z napisem „100% human”. Czy czytnik ekranu może w całości wyodrębnić tę scenę? Aby to zrobić, czytniki ekranu polegają na deweloperach lub autorach treści, aby dostarczyć tekst alternatywny dla obrazów za pomocą atrybutu „alt”, który został wprowadzony w 1995 roku jako część HTML 2.0 (jeśli nie wiesz, czym jest atrybut alt lub jakie ma znaczenie, ten artykuł zawiera świetny przegląd atrybutu alt). Element HTML img wygląda wtedy tak:
<img src="image1.jpg" alt="This is an image of two Huskies" />Więc, czytnik ekranu będzie teraz czytał „Obraz, To jest obraz dwóch Huskies”.
Pozostawienie atrybutu alt pustego lub dostarczenie bezsensownego tekstu takiego jak „Obraz 1”, jak możesz sobie wyobrazić, nie jest zbyt pomocne. Nawet z alternatywnym tekstem „To jest obraz dwóch Huskies”, przekazywana informacja nie jest w żaden sposób zbliżona do tego, co ktoś nie używający czytnika ekranu byłby w stanie wydobyć, jak na przykład tekst na koszulce Jialina. Dodatkowo, czytnik ekranu już informuje o treści jako o „obrazie” lub „grafice”, co sprawia, że „To jest obraz” jest zbędnym tekstem. Wszystko to przy założeniu, że obrazek zamieszczany jest przez użytkownika, który ma dostęp do kodu umożliwiającego wprowadzenie tekstu alternatywnego.
A co z miejscami takimi jak platformy społecznościowe, gdzie obrazki zamieszczane są przez użytkowników, którzy w ogóle nie mają dostępu do kodu. Facebook, w 2016 roku, ponad dekadę po jego uruchomieniu, zaczął zatrudniać sztuczną inteligencję, aby dodać automatycznie generowany tekst alternatywny do obrazów, i pozwolił użytkownikom edytować ten tekst, jeśli zajdzie taka potrzeba. Instagram poszedł w jego ślady i wdrożył tę funkcję w zeszłym roku, 8 lat po swojej premierze. Pytania jednak pozostają te same – jak dużo informacji powinien zawierać tekst alternatywny? Czy wystarczy podstawowy, wysokopoziomowy opis? Czy decydując o tym, co zaprezentować użytkownikom czytników ekranu, zakładamy i generalizujemy to, czego użytkownicy czytników ekranu szukają w obrazie? Jeśli obraz jest wart tysiąca słów, to, metaforycznie, czy tekst alternatywny nie powinien być tysiącem słów?
GIF-y i animowane obrazy
Leo ma silną grę memów i jest ekspertem w znajdowaniu kocich GIF-ów na każdą okazję. Biorąc pod uwagę, że GIF powstaje przez połączenie kilku różnych obrazków w taki sposób, że efekt końcowy sprawia wrażenie bardzo krótkiego filmiku, czy mamy do czynienia z tymi samymi problemami, co w przypadku zdjęć? Gorzej. Jako deweloper, z pewnością możesz (i powinieneś) dodać tekst alternatywny podobny do tego, jak robimy to w przypadku obrazów (GIF to w końcu plik graficzny). Jednak na platformach społecznościowych, w zależności od tego, jak GIF jest przetwarzany przez daną platformę, jest on albo renderowany przy użyciu elementu img bez atrybutu alt, albo przy użyciu elementu video. Element video w ogóle nie obsługuje atrybutu alt.
Więc, wszystkie te widżety GIF, których używaliśmy do umieszczania animowanych memów na Facebooku i Instagramie, te które sprawiają, że jesteśmy fajni i w ogóle, są niedostępne dla użytkowników czytników ekranu. Tutaj naszym celem nie jest powstrzymanie Leo przed publikowaniem GIF-ów (bo, miau), ale zapewnienie, że takie treści są dostępne dla wszystkich, a nie tylko dla podzbioru populacji.
Wykresy i wizualizacje
Wszystko to i nawet nie dotarliśmy jeszcze do „trudnych rzeczy”. Przedstawiamy wykresy i interaktywne wizualizacje. Yisu i Xuhai są totalnymi nerdami wizualizacji i jak każdy badacz wierzą, że wykresy i wizualizacje są niezwykle cenne; rzadko zdarza się praca naukowa, w której nie ma przynajmniej jednego wykresu lub wizualizacji. Wykres przekazuje bardzo wizualną wiedzę i jest zazwyczaj osadzany na stronie internetowej przy użyciu jednej z trzech głównych technik:
- jako obraz dla zawartości statycznej.
- jako element HTML
canvaslub wykresy SVG (uaktualnienie z obrazu w różnych aspektach) dla zawartości statycznej. - i/lub jako interaktywna wizualizacja przy użyciu bibliotek JavaScript (które zazwyczaj wykorzystują HTML
canvaslub SVG jako mechanizm bazowy), aby służyć dynamicznej zawartości i pozwolić użytkownikom na interakcję z wykresem.
Gdy jest używany jako obraz, te same względy mają zastosowanie, jak omówiliśmy powyżej, z dodatkową złożonością prezentacji informacji naukowych. Co powinien zawierać tekst alternatywny? Czy powinien on przedstawiać ogólny zarys wykresu? Czy powinien zawierać statystyki takie jak średnia, średnia, mediana, tryb, itd. A jeśli tak, to jakie? Jak dużo informacji to za mało, a jak dużo to za dużo? To są trudne pytania.
Sama canvas w HTML jest eksponowana jako bitmapa i bez implementacji odpowiedniej zawartości awaryjnej stanowi kilka wyzwań związanych z dostępnością. Jednakże, istnieje kilka technik, aby uczynić je dostępnymi i są tylko wyszukiwanie w Google z dala. Ale oczywiście, deweloperzy są odpowiedzialni za znajomość tych technik i wdrożenie ich do swojej pracy – coś, co widziałem, że poprawia się z czasem, ale nie wstrzymywałbym oddechu. Wręcz przeciwnie, SVG jest zachęcany do tworzenia dostępnych wykresów, ponieważ zgodnie ze specyfikacją W3C, elementy potomne są dostępne dla Accessibility API. Jednak wsparcie dla przeglądarek wciąż jest dopracowywane, a w pełni dostępny wykres SVG wymaga wysiłku i przynajmniej podstawowej wiedzy na temat SVG, co po raz kolejny jest odpowiedzialnością, która spada na barki programistów.
Aby rozwiązać niektóre z tych problemów, stworzyłem evoGraphs – wtyczkę jQuery do tworzenia dostępnych wykresów, która zdobyła nagrodę Delegata za wyzwanie dostępności na konferencji W4A w 2015 roku. Co prawda, nie odpowiada ona na wszystkie wyróżnione pytania dotyczące złożoności prezentacji informacji naukowej. Stąd, dostępne wykresy są aktywnym obszarem eksploracji dla mnie i innych badaczy.
Jako interaktywna wizualizacja (taka jak ChartJS, Google Charts i D3), reprezentacja dynamicznie aktualizowanych informacji jest podchwytliwa. Większość użytkowników czytników ekranu nie używa urządzeń wskazujących (takich jak mysz, gładzik, itp.), a większość interakcji jest albo ograniczona do lub jest bardziej praktycznie użyteczna, gdy najechanie na pewne elementy jest wyzwalane. Bez takich interakcji, cel interaktywnych wizualizacji dla użytkownika czytnika ekranu staje się mglisty i prawdopodobnie, bez odpowiedniego rozważenia, zrozumienie zawartości może stać się bardziej skomplikowane.
Dodatkowo, wiele nowoczesnych bibliotek graficznych pozwala na dynamiczną modyfikację zawartości. Przekazywanie informacji do czytników ekranu, gdy zawartość jest modyfikowana, może być obsługiwane przez prawidłowe użycie atrybutów ARIA, które stały się zaleceniem W3C w 2014 roku i są szczerze bogiem. Ale, podobnie jak w przypadku SVG, stabilne wsparcie przeglądarek dla wszystkich funkcji ARIA jest wciąż w toku, zwłaszcza gdy są one używane wewnątrz SVG. Odpowiednie szkolenie programistów jest nadal potrzebne, aby w pełni wykorzystać to, co ARIA ma do zaoferowania.
The Path Forward
Od kiedy Tim Berners-Lee stworzył World Wide Web, do dzisiaj, technologia drastycznie się rozwinęła. Niestety, to samo nie może być powiedziane o dostępności tych technologii. Zanim dana technologia stanie się dostępna dla osób niepełnosprawnych, świat zdążył już przejść do bardziej zaawansowanych technologii. Tak więc gra w nadrabianie zaległości nigdy się nie kończy. I nie skończy się – chyba że dostępność stanie się podstawowym czynnikiem w rozwoju nowszych technologii.
Ale nie cała nadzieja jest stracona. Poczyniliśmy i nadal czynimy wielkie postępy w dziedzinie dostępności stron internetowych, zarówno w badaniach akademickich, jak i w produktach przemysłowych. Studenci i nowi programiści są uczeni koncepcji dostępności i technik, które czynią sieć bardziej dostępną. Idąc dalej, przewiduję zrobienie kroku wstecz i zastanowienie się nad dostosowaniem oprogramowania do potrzeb użytkowników, w przeciwieństwie do oczekiwania, że to użytkownicy dostosują się do oprogramowania. Na przykład, czy nadal zakładamy, jakie informacje użytkownik czytnika ekranu chciałby wydobyć z obrazu, czy też budujemy narzędzia, które uczą się więcej o użytkowniku i prezentują informacje, które użytkownik woli odbierać? Według mnie, przyszłość odchodzi od generalizacji i zbliża się do personalizacji – World Wide Web, która jest naprawdę zorientowana na użytkownika.
- „Vision Impairment and Blindness.” Światowa Organizacja Zdrowia, World Health Organization, https://www.who.int/news-room/fact-sheets/detail/blindness-and-visual-impairment. Accessed 20 Oct. 2019.
- „A Picture’s Worth: D. H. Hepting, Ph.D.” A Picture’s Worth | D. H. H. Hepting, Ph.D., http://www2.cs.uregina.ca/~hepting/projects/pictures-worth.
- Materiały HTML 2.0, https://www.w3.org/MarkUp/html-spec.
- Sharif, Ather, and Babak Forouraghi. „evoGraphs-A jQuery plugin to create web-accessible graphs”. 2018 15th IEEE Annual Consumer Communications & Networking Conference (CCNC). IEEE, 2018.
- „WAI-ARIA Overview.” Web Accessibility Initiative (WAI), https://www.w3.org/WAI/standards-guidelines/aria.
.