{"id":38463,"date":"2019-10-31T22:23:52","date_gmt":"2019-10-31T19:23:52","guid":{"rendered":"https:\/\/prohoster.info\/blog\/po-napravleniyu-k-dostupnosti\/"},"modified":"2019-10-31T22:23:52","modified_gmt":"2019-10-31T19:23:52","slug":"po-napravleniyu-k-dostupnosti","status":"publish","type":"post","link":"https:\/\/prohoster.info\/pl\/blog\/news\/po-napravleniyu-k-dostupnosti","title":{"rendered":"W kierunku dost\u0119pno\u015bci","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"

\"W
\n
\nPi\u0105tek to koniec dnia roboczego. Z\u0142e wiadomo\u015bci zawsze przychodz\u0105 w pi\u0105tek pod koniec dnia roboczego.<\/p>\n

Zamierzasz opu\u015bci\u0107 biuro, a tu \u201ed\u017awi\u0119k\u201d nowy e-mail w sprawie kolejnej reorganizacji w\u0142a\u015bnie dotar\u0142.<\/p>\n

Dzi\u0119kuj\u0119 xxxx, yyy od dzisiaj b\u0119dziesz raportowa\u0107 zzzz.
\n\u2026
\nI zesp\u00f3\u0142 Hugh zapewni dost\u0119pno\u015b\u0107 naszych produkt\u00f3w dla os\u00f3b z niepe\u0142nosprawno\u015bciami.<\/i>\n<\/p><\/blockquote>\n

O nie! Za co zas\u0142u\u017cy\u0142em na to? Chc\u0105, \u017cebym odszed\u0142? Nastaw si\u0119 na niewdzi\u0119czn\u0105 ci\u0119\u017ck\u0105 prac\u0119 i pr\u00f3buj naprawi\u0107 b\u0142\u0119dy innych ludzi. To na pewno b\u0119dzie pora\u017cka...<\/p>\n

Taka by\u0142a dost\u0119pno\u015b\u0107 kilka lat temu. Niekt\u00f3rzy nieszcz\u0119\u015bnicy dostawali prac\u0119 polegaj\u0105c\u0105 na \u201eoczyszczaniu\u201d interfejsu u\u017cytkownika, aby spr\u00f3bowa\u0107 uczyni\u0107 go dost\u0119pnym dla os\u00f3b z niepe\u0142nosprawno\u015bciami.
\n<\/a><\/noindex>
\nTo, co to tak naprawd\u0119 oznacza\u0142o, by\u0142o do\u015b\u0107 niejasne \u2013 prawdopodobnie, je\u015bli mog\u0142e\u015b zobaczy\u0107 wska\u017anik fokusu i porusza\u0107 si\u0119 po polach za pomoc\u0105 klawisza tabulacji, mie\u0107 jaki\u015b tekst alternatywny i kilka opis\u00f3w p\u00f3l, uznano by to za to, \u017ce twoja aplikacja jest dost\u0119pna...<\/p>\n

Ale nagle \u201eb\u0142\u0119dy\u201d zacz\u0119\u0142y mno\u017cy\u0107 si\u0119 jak lawina.<\/p>\n

R\u00f3\u017cne ekranowe czytniki (ang.<\/i> Screen Readers) i przegl\u0105darki zachowywa\u0142y si\u0119 zupe\u0142nie inaczej.<\/p>\n

U\u017cytkownicy skar\u017cyli si\u0119, \u017ce aplikacja nie nadaje si\u0119 do u\u017cytku.<\/p>\n

Gdy tylko b\u0142\u0105d by\u0142 naprawiany w jednym miejscu, pojawia\u0142 si\u0119 inny w innym.<\/p>\n

A po prostu zmiana i naprawianie b\u0142\u0119d\u00f3w interfejsu u\u017cytkownika wymaga\u0142o tytanicznych wysi\u0142k\u00f3w.<\/p>\n

By\u0142em tam. Prze\u017cy\u0142em, ale nie \u201eodnie\u015bli\u015bmy sukcesu\u201d \u2013 technicznie oczy\u015bcili\u015bmy wiele, dodali\u015bmy wiele opis\u00f3w p\u00f3l, r\u00f3l i osi\u0105gn\u0119li\u015bmy jaki\u015b poziom zgodno\u015bci z wymaganiami, ale nikt nie by\u0142 zadowolony. U\u017cytkownicy wci\u0105\u017c skar\u017cyli si\u0119, \u017ce nie mog\u0105 si\u0119 porusza\u0107 w aplikacji. Mened\u017cer i tak narzeka\u0142 na ci\u0105g\u0142y nap\u0142yw b\u0142\u0119d\u00f3w. In\u017cynierowie skar\u017cyli si\u0119 na niew\u0142a\u015bciwe sformu\u0142owanie zadania, bez jasno okre\u015blonego \u201ew\u0142a\u015bciwego\u201d rozwi\u0105zania, kt\u00f3re dzia\u0142a\u0142oby w ka\u017cdych okoliczno\u015bciach.<\/p>\n

Na mojej drodze do zrozumienia dost\u0119pno\u015bci napotyka\u0142em niekt\u00f3re wyra\u017anie odkrywcze momenty.
\nMo\u017cliwe, \u017ce pierwszym krokiem by\u0142o zrozumienie, \u017ce dodawanie funkcjonalno\u015bci dost\u0119pno\u015bci do gotowego produktu jest trudne. A jeszcze trudniej jest przekona\u0107 mened\u017cer\u00f3w, \u017ce jest to niezwykle skomplikowane! To nie polega tylko na dodaniu kilku znacznik\u00f3w, aby interfejs u\u017cytkownika dzia\u0142a\u0142 doskonale. Nie, to niemo\u017cliwe zako\u0144czy\u0107 w trzy tygodnie, nawet trzy miesi\u0105ce to za ma\u0142o.
\nM\u00f3j kolejny moment prawdy nasta\u0142, gdy na w\u0142asne oczy zobaczy\u0142em, w jaki spos\u00f3b niewidomi u\u017cytkownicy korzystaj\u0105 z naszej aplikacji. To TAK r\u00f3\u017cni si\u0119 od przegl\u0105dania komunikat\u00f3w o b\u0142\u0119dach.<\/p>\n

B\u0119d\u0119 do tego wraca\u0107 wci\u0105\u017c i wci\u0105\u017c, ale prawie wszystkie nasze \u201eza\u0142o\u017cenia\u201d dotycz\u0105ce tego, jak ludzie korzystaj\u0105 z naszej aplikacji, by\u0142y b\u0142\u0119dne.<\/p>\n

Nawigacja po skomplikowanym interfejsie u\u017cytkownika przy u\u017cyciu klawiszy Tab\/Shift+Tab<\/code> \u2013 to fatalne! Potrzebujemy czego\u015b lepszego. Skr\u00f3ty klawiszowe, nag\u0142\u00f3wki.<\/p>\n

Utrata fokusu przy zmianie UI to chyba nie du\u017cy problem? Pomy\u015blmy jeszcze raz \u2013 to potwornie myli.<\/p>\n

Kontynuowa\u0142em i przez jaki\u015b czas pracowa\u0142em nad r\u00f3\u017cnymi projektami, a nast\u0119pnie rozpocz\u0119li\u015bmy nowy projekt, ze skomplikowanym interfejsem u\u017cytkownika i wyra\u017anym zadaniem, aby tym razem zapewni\u0107 odpowiedni\u0105 dost\u0119pno\u015b\u0107.<\/p>\n

Zatem zrobili\u015bmy krok wstecz i zastanowili\u015bmy si\u0119, jak mo\u017cemy to zrealizowa\u0107 inaczej i osi\u0105gn\u0105\u0107 sukces, tak aby sam proces pracy by\u0142 interesuj\u0105cy!<\/p>\n

Do\u015b\u0107 szybko doszli\u015bmy do kilku wniosk\u00f3w:<\/p>\n

    \n
  1. Nie chcieli\u015bmy, aby osoby opracowuj\u0105ce interfejs u\u017cytkownika zajmowa\u0142y si\u0119 oznaczeniami aria\/rolami i oczywi\u015bcie struktur\u0105 HTML komponent\u00f3w. Musieli\u015bmy zapewni\u0107 im odpowiednie komponenty, w kt\u00f3rych dost\u0119pno\u015b\u0107 jest implementowana od razu.<\/li>\n
  2. Dost\u0119pno\u015b\u0107 == U\u017cyteczno\u015b\u0107 \u2013 czyli to nie tylko techniczne zadanie. Musieli\u015bmy zmieni\u0107 ca\u0142y proces projektowania i upewni\u0107 si\u0119, \u017ce dost\u0119pno\u015b\u0107 jest brana pod uwag\u0119 i omawiana przed rozpocz\u0119ciem projektowania interfejsu u\u017cytkownika. Nale\u017cy z g\u00f3ry pomy\u015ble\u0107, jak u\u017cytkownicy mog\u0105 odkry\u0107 jak\u0105kolwiek funkcjonalno\u015b\u0107, jak b\u0119d\u0105 si\u0119 porusza\u0107 i jak b\u0119dzie dzia\u0142a\u0107 \u201eprawy przycisk myszy\u201d z klawiatury. Dost\u0119pno\u015b\u0107 powinna by\u0107 integraln\u0105 cz\u0119\u015bci\u0105 procesu projektowania \u2013 dla niekt\u00f3rych u\u017cytkownik\u00f3w to co\u015b znacznie wi\u0119cej ni\u017c tylko wygl\u0105d aplikacji.<\/li>\n
  3. Od samego pocz\u0105tku chcieli\u015bmy uzyska\u0107 opinie od os\u00f3b niewidomych i innych u\u017cytkownik\u00f3w z ograniczeniami o prostocie korzystania z aplikacji.<\/li>\n
  4. Potrzebowali\u015bmy naprawd\u0119 dobrych sposob\u00f3w na wy\u0142apywanie regresji dost\u0119pno\u015bci.<\/li>\n<\/ol>\n

    \nC\u00f3\u017c, z in\u017cynieryjnego punktu widzenia, pierwsza cz\u0119\u015b\u0107 brzmia\u0142a do\u015b\u0107 zabawnie \u2013 opracowywanie architektury i wdra\u017canie biblioteki komponent\u00f3w. I rzeczywi\u015bcie tak by\u0142o.<\/p>\n

    Spogl\u0105daj\u0105c wstecz, rozwa\u017caj\u0105c przyk\u0142ady ARIA<\/a><\/noindex> \u0438 \u0437\u0430\u0434\u0443\u043c\u044b\u0432\u0430\u044f\u0441\u044c \u043e\u0431 \u044d\u0442\u043e\u043c \u043a\u0430\u043a \u043e \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0435 \u0434\u0438\u0437\u0430\u0439\u043d\u0430, \u0430 \u043d\u0435 \u043e \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0435 \u00ab\u043f\u0440\u0438\u0441\u043f\u043e\u0441\u0430\u0431\u043b\u0438\u0432\u0430\u0442\u044c\u0441\u044f\u00bb, \u043c\u044b \u0432\u0432\u0435\u043b\u0438 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0430\u0431\u0441\u0442\u0440\u0430\u043a\u0446\u0438\u0438. \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0438\u043c\u0435\u0435\u0442 ‘\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443’ (\u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 HTML-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432) \u0438 ‘\u041f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435’ (\u043a\u0430\u043a \u043e\u043d \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0443\u0435\u0442 \u0441 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u043c). \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u043d\u044b\u0445 \u043d\u0438\u0436\u0435 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u0430\u0445 \u043c\u044b \u0438\u043c\u0435\u0435\u043c \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043d\u0435\u0443\u043f\u043e\u0440\u044f\u0434\u043e\u0447\u0435\u043d\u043d\u044b\u0439 \u0441\u043f\u0438\u0441\u043e\u043a. \u041f\u0440\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0438 \u00ab\u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u044f\u00bb \u043a \u0441\u043f\u0438\u0441\u043a\u0443 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u0440\u043e\u043b\u0438, \u0447\u0442\u043e\u0431\u044b \u043e\u043d \u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u043b \u043a\u0430\u043a \u0441\u043f\u0438\u0441\u043e\u043a. \u0410\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e \u0434\u0435\u043b\u0430\u0435\u043c \u0434\u043b\u044f \u043c\u0435\u043d\u044e.<\/p>\n

    \"W
    \n
    \nW\u0142a\u015bciwie dodawane s\u0105 tutaj nie tylko role, ale tak\u017ce obs\u0142ugiwacze zdarze\u0144 do nawigacji za pomoc\u0105 klawiatury.<\/p>\n

    Wygl\u0105da to ju\u017c znacznie lepiej. Gdyby\u015bmy mogli uzyska\u0107 czyste rozdzielenie mi\u0119dzy nimi, nie by\u0142oby wa\u017cne, jak zosta\u0142a stworzona struktura, mogliby\u015bmy zastosowa\u0107 do niej zachowania (Behaviours) i uzyska\u0107 odpowiedni\u0105 dost\u0119pno\u015b\u0107.<\/p>\n

    W dzia\u0142aniu mo\u017cna to zobaczy\u0107 pod adresem https:\/\/stardust-ui.github.io\/react\/<\/a><\/noindex> \u2013 biblioteka UX React<\/a><\/noindex>, kt\u00f3ra jest projektowana i wdra\u017cana z my\u015bl\u0105 o dost\u0119pno\u015bci od samego pocz\u0105tku.<\/p>\n

    Druga cz\u0119\u015b\u0107 \u2013 zmiana podej\u015bcia i proces\u00f3w wok\u00f3\u0142 projektowania pocz\u0105tkowo mnie przera\u017ca\u0142a: skromni in\u017cynierowie, pr\u00f3buj\u0105cy wprowadzi\u0107 zmiany organizacyjne, nie zawsze ko\u0144cz\u0105 si\u0119 dobrze, ale okaza\u0142o si\u0119 to jedn\u0105 z najbardziej interesuj\u0105cych dziedzin, w kt\u00f3rych wnie\u015bli\u015bmy znacz\u0105cy wk\u0142ad w proces. Kr\u00f3tko m\u00f3wi\u0105c, mieli\u015bmy nast\u0119puj\u0105cy proces: nowa funkcjonalno\u015b\u0107 by\u0142a rozwijana przez jeden zesp\u00f3\u0142, nast\u0119pnie nasza grupa kierownicza analizowa\u0142a\/iterowa\u0142a t\u0119 propozycj\u0119, a nast\u0119pnie, po zatwierdzeniu, zazwyczaj projekt by\u0142 przekazywany zespo\u0142owi in\u017cynier\u00f3w. W tym przypadku zesp\u00f3\u0142 in\u017cynier\u00f3w faktycznie \u201ew\u0142a\u015bcicielem\u201d funkcjonalno\u015bci dost\u0119pno\u015bci, poniewa\u017c musia\u0142 rozwi\u0105za\u0107 wszystkie zwi\u0105zane z tym problemy.<\/p>\n

    Na pocz\u0105tku by\u0142a to do\u015b\u0107 trudna praca \u2013 wyja\u015bni\u0107, \u017ce dost\u0119pno\u015b\u0107 i u\u017cyteczno\u015b\u0107 s\u0105 ze sob\u0105 nierozerwalnie zwi\u0105zane i \u017ce trzeba to uwzgl\u0119dni\u0107 ju\u017c na etapie projektowania, inaczej prowadzi\u0142o to do du\u017cych zmian i redefinicji niekt\u00f3rych r\u00f3l. Niemniej jednak, przy wsparciu kierownictwa i kluczowych graczy, przekazali\u015bmy t\u0119 ide\u0119 i zacz\u0119li\u015bmy j\u0105 wprowadza\u0107, aby projekty przechodzi\u0142y kontrol\u0119 dost\u0119pno\u015bci i u\u017cyteczno\u015bci, zanim zostan\u0105 przedstawione kierownictwu.<\/p>\n

    Opinie te by\u0142y niezwykle cenne dla wszystkich \u2013 to by\u0142o fantastyczne, jako \u0107wiczenie w wymianie wiedzy\/informacji na temat tego, jak u\u017cytkownicy wchodz\u0105 w interakcj\u0119 z aplikacjami webowymi, identyfikowali\u015bmy liczne problemy interfejsu u\u017cytkownika, zanim zosta\u0142y one zbudowane, zespo\u0142y deweloperskie maj\u0105 obecnie znacznie lepsze specyfikacje nie tylko wizualnych, ale tak\u017ce behawioralnych aspekt\u00f3w projektu. Prawdziwe dyskusje to weso\u0142e, energiczne, pasjonuj\u0105ce rozmowy na temat aspekt\u00f3w technicznych i interakcji.<\/p>\n

    Mogliby\u015bmy wykona\u0107 t\u0119 prac\u0119 jeszcze lepiej, gdyby na tych (lub p\u00f3\u017aniejszych) spotkaniach z nami byli niewidomi u\u017cytkownicy oraz osoby z niepe\u0142nosprawno\u015bciami \u2013 by\u0142o to trudne do zorganizowania, ale teraz rzeczywi\u015bcie wsp\u00f3\u0142pracujemy zar\u00f3wno z lokalnymi organizacjami dla niewidomych, jak i firmami, kt\u00f3re oferuj\u0105 zewn\u0119trzne testowanie w celu sprawdzenia przep\u0142ywu realizacji na wczesnych etapach rozwoju \u2013 zar\u00f3wno na poziomie komponent\u00f3w, jak i na poziomie przep\u0142ywu realizacji.<\/p>\n

    Teraz in\u017cynierowie maj\u0105 do\u015b\u0107 szczeg\u00f3\u0142owe specyfikacje, dost\u0119pne komponenty, kt\u00f3re mog\u0105 wykorzysta\u0107 do wdro\u017cenia, i spos\u00f3b weryfikacji przep\u0142ywu realizacji. Cz\u0119\u015bciowo, do\u015bwiadczenie nauczy\u0142o nas, czego ci\u0105gle pomijali\u015bmy \u2013 jak mo\u017cemy zapobiega\u0107 regresji. Podobnie, ludzie mog\u0105 korzysta\u0107 z test\u00f3w integracyjnych lub end-to-end, aby sprawdzi\u0107 funkcjonalno\u015bci, kt\u00f3re s\u0105 nam potrzebne do wykrywania zmian w interakcjach i przep\u0142ywach realizacji \u2013 zar\u00f3wno wizualnych, jak i behawioralnych.<\/p>\n

    Definiowanie regresji wizualnej to do\u015b\u0107 okre\u015blone zadanie, niewiele mo\u017cna doda\u0107 do tego procesu, z wyj\u0105tkiem mo\u017ce sprawdzenia, czy fokus jest widoczny podczas nawigacji za pomoc\u0105 klawiatury. Bardziej interesuj\u0105ce s\u0105 dwie stosunkowo nowe technologie dotycz\u0105ce dost\u0119pno\u015bci.<\/p>\n

      \n
    1. Accessibility Insights<\/a><\/noindex> to zestaw narz\u0119dzi, kt\u00f3re mog\u0105 dzia\u0142a\u0107 zar\u00f3wno w przegl\u0105darce, jak i w ramach cyklu kompilacji\/testowania, w celu identyfikacji problem\u00f3w.<\/li>\n
    2. Sprawdzanie poprawno\u015bci dzia\u0142ania program\u00f3w czytaj\u0105cych z ekranu by\u0142o szczeg\u00f3lnie trudnym zadaniem. Wraz z wprowadzeniem dost\u0119pu do Accessibility DOM<\/b>, w ko\u0144cu uzyskali\u015bmy mo\u017cliwo\u015b\u0107 wykonywania zrzut\u00f3w aplikacji z perspektywy dost\u0119pno\u015bci, bardzo podobnych do tych, kt\u00f3re wykonujemy dla test\u00f3w wizualnych, i ich sprawdzania pod k\u0105tem regresji.<\/li>\n<\/ol>\n

      \nZatem, w drugiej cz\u0119\u015bci historii \u2013 przeszli\u015bmy od edytowania kodu HTML do pracy na wy\u017cszym poziomie abstrakcji, zmienili\u015bmy proces projektowania i wprowadzili\u015bmy dok\u0142adne testowanie. Nowe procesy, nowe technologie i nowe poziomy abstrakcji ca\u0142kowicie zmieni\u0142y wyobra\u017cenie o dost\u0119pno\u015bci i tym, co oznacza praca w tej dziedzinie.
      \nAle to dopiero pocz\u0105tek.<\/p>\n

      Nast\u0119pne \u201ezrozumienie\u201d polega na tym, \u017ce niewidomi u\u017cytkownicy nap\u0119dzaj\u0105 zaawansowane technologie \u2013 to oni czerpi\u0105 najwi\u0119ksze korzy\u015bci nie tylko z zmian, kt\u00f3re opisali\u015bmy wcze\u015bniej, ale tak\u017ce z tego, \u017ce nowe podej\u015bcia i pomys\u0142y staj\u0105 si\u0119 mo\u017cliwe dzi\u0119ki ML\/AI. Na przyk\u0142ad technologia Immersive Reader umo\u017cliwia u\u017cytkownikom \u0142atwiejsze i bardziej zrozumia\u0142e przedstawianie tekstu. Mo\u017ce by\u0107 czytana na g\u0142os, struktura zdania jest dzielona graficznie, a nawet znaczenia s\u0142\u00f3w s\u0105 wy\u015bwietlane graficznie. To ca\u0142kowicie nie pasuje do starego rozumienia \u201euczyni\u0107 to dost\u0119pnym\u201d \u2013 to funkcjonalno\u015b\u0107 u\u017cyteczno\u015bci, kt\u00f3ra pomo\u017ce wszystkim.<\/p>\n

      Z ML\/AI pojawiaj\u0105 si\u0119 zupe\u0142nie nowe sposoby interakcji i pracy, i cieszymy si\u0119, \u017ce mo\u017cemy by\u0107 cz\u0119\u015bci\u0105 nast\u0119pnych etap\u00f3w tej nowatorskiej drogi. Innowacje s\u0105 wynikiem zmiany my\u015blenia \u2013 ludzko\u015b\u0107 istnieje od tysi\u0105cleci, maszyny od setek lat, strony internetowe kilka dziesi\u0105tek lat, a smartfony jeszcze kr\u00f3cej, technologia musi dostosowa\u0107 si\u0119 do ludzi, a nie odwrotnie.<\/p>\n

      P.S. Artyku\u0142 zosta\u0142 przet\u0142umaczony z niewielkimi odchyleniami od orygina\u0142u. Jako wsp\u00f3\u0142autor tego artyku\u0142u uzgodni\u0142em te odchylenia z Hughem.<\/p>\n

      Tylko zarejestrowani u\u017cytkownicy mog\u0105 bra\u0107 udzia\u0142 w ankiecie. Zaloguj si\u0119<\/a><\/noindex>, prosz\u0119.<\/p>\n

      Czy po\u015bwi\u0119casz uwag\u0119 dost\u0119pno\u015bci swoich aplikacji?<\/h2>\n