{"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\/ro\/blog\/news\/po-napravleniyu-k-dostupnosti","title":{"rendered":"\u00cen direc\u021bia accesibilit\u0103\u021bii","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"

\"\u00cen
\n
\nVinerea este sf\u00e2r\u0219itul zilei de lucru. Ve\u0219tile proaste vin \u00eentotdeauna vineri, aproape de finalul zilei de munc\u0103.<\/p>\n

Te preg\u0103te\u0219ti s\u0103 p\u0103r\u0103se\u0219ti biroul c\u00e2nd un nou e-mail cu privire la o nou\u0103 reorganizare tocmai a sosit.<\/p>\n

Mul\u021bumesc xxxx, yyy, \u00eencep\u00e2nd de ast\u0103zi vei raporta la zzzz.
\n\u2026
\n\u0218i echipa lui Hugh va asigura accesibilitatea produselor noastre pentru persoanele cu dizabilit\u0103\u021bi.<\/i>\n<\/p><\/blockquote>\n

Oh, nu! Ce am f\u0103cut s\u0103 merit asta? Vor ca eu s\u0103 plec? M\u0103 preg\u0103tesc pentru o munc\u0103 grea, nerecunoscut\u0103, \u00eencerc\u00e2nd s\u0103 corectez gre\u0219elile altora. Asta va fi cu siguran\u021b\u0103 un e\u0219ec...<\/p>\n

A\u0219a era accesibilitatea cu c\u00e2\u021biva ani \u00een urm\u0103. C\u00e2\u021biva s\u0103raci au ob\u021binut un loc de munc\u0103 pentru a \"cur\u0103\u021ba\" interfa\u021ba utilizatorului, \u00eencerc\u00e2nd s\u0103 o fac\u0103 accesibil\u0103 persoanelor cu dizabilit\u0103\u021bi.
\n<\/a><\/noindex>
\nCeea ce aceasta \u00eensemna, de fapt, era destul de vag \u2013 probabil dac\u0103 puteai vedea indicatorul de focus \u0219i s\u0103 navighezi prin c\u00e2mpuri folosind tasta Tab, s\u0103 ai un text alternativ \u0219i c\u00e2teva descrieri pentru c\u00e2mpuri, aceasta ar fi fost considerat\u0103 accesibilitate pentru aplica\u021bia ta...<\/p>\n

Dar, brusc, \u201ebug-urile\u201d au \u00eenceput s\u0103 apar\u0103 cu o vitez\u0103 uluitoare.<\/p>\n

Diferite cititoare de ecran (englez\u0103.<\/i> Screen Readers) \u0219i browsere se comportau complet diferit.<\/p>\n

Utilizatorii s-au pl\u00e2ns c\u0103 aplica\u021bia nu este utilizabil\u0103.<\/p>\n

De \u00eendat\u0103 ce o eroare era corectat\u0103 \u00eentr-un loc, ap\u0103rea alta \u00een alt\u0103 parte.<\/p>\n

\u0218i a schimba \u0219i corecta erorile interfe\u021bei utilizatorului necesit\u0103 eforturi titanice.<\/p>\n

Am fost acolo. Am supravie\u021buit, dar nu am \u201e\u00eenaintat\u201d \u2013 din punct de vedere tehnic am cur\u0103\u021bat mult, am ad\u0103ugat multe descrieri pentru c\u00e2mpuri, roluri \u0219i am atins un anumit nivel de conformitate, dar nimeni nu a fost fericit. Utilizatorii se pl\u00e2ngeau \u00een continuare c\u0103 nu se pot descurca \u00een aplica\u021bie. Managerul se pl\u00e2ngea de un flux constant de erori. Inginerii se pl\u00e2ngeau de o sarcin\u0103 de lucru neclar\u0103, f\u0103r\u0103 o \u201esolu\u021bie corect\u0103\u201d bine definit\u0103 care s\u0103 func\u021bioneze \u00een toate cazurile.<\/p>\n

Pe drumul meu c\u0103tre \u00een\u021belegerea accesibilit\u0103\u021bii, am \u00eent\u00e2lnit momente evident revelatoare.
\nPoate c\u0103 primul pas a fost \u00een\u021belegerea c\u0103 ad\u0103ugarea func\u021bionalit\u0103\u021bii de accesibilitate peste un produs deja finalizat este complicat\u0103. \u0218i este \u0219i mai greu s\u0103 convingi managerii c\u0103 este incredibil de dificile! Nu, nu este vorba doar de \u201ead\u0103ugat c\u00e2teva etichete\u201d \u0219i interfa\u021ba utilizatorului va func\u021biona perfect. Nu, nu se poate \u00eencheia \u00een trei s\u0103pt\u0103m\u00e2ni, nici m\u0103car trei luni nu sunt suficiente.
\nUrm\u0103torul meu moment de adev\u0103r a venit atunci c\u00e2nd am v\u0103zut cu ochii mei cum utilizatorii nev\u0103z\u0103tori folosesc de fapt aplica\u021bia noastr\u0103. Este COMPLET diferit de a vizualiza mesajele de eroare.<\/p>\n

M\u0103 voi \u00eentoarce la asta din nou \u0219i din nou, dar aproape toate \u201epresupunerile\u201d noastre despre cum oamenii au folosit aplica\u021bia noastr\u0103 au fost gre\u0219ite.<\/p>\n

Navigarea printr-o interfa\u021b\u0103 complex\u0103 folosind tastele Tab\/Shift+Tab<\/code> \u2013 este o mizerie! Trebuie s\u0103 existe ceva mai bun. Combin\u0103ri de taste, titluri.<\/p>\n

Pierderea focului atunci c\u00e2nd se schimb\u0103 UI nu este o problem\u0103 mare, nu-i a\u0219a? S\u0103 ne g\u00e2ndim din nou \u2013 este extrem de confuz.<\/p>\n

Am continuat, am lucrat o vreme la diferite proiecte \u0219i apoi am \u00eenceput un nou proiect, cu o interfa\u021b\u0103 complex\u0103 \u0219i o sarcin\u0103 clar\u0103 de a ob\u021bine \u00een sf\u00e2r\u0219it accesibilitatea corect\u0103.<\/p>\n

A\u0219adar, am f\u0103cut un pas \u00eenapoi \u0219i am privit cum putem realiza acest lucru diferit \u0219i cu succes, \u0219i cum procesul de lucru poate fi amuzant!<\/p>\n

Destul de repede am ajuns la unele concluzii:<\/p>\n

    \n
  1. Nu ne-am dorit ca persoanele care dezvolt\u0103 interfa\u021ba utilizatorului s\u0103 se chinuie cu etichete aria\/roluri \u0219i, desigur, cu structura HTML a componentelor. Trebuia s\u0103 le asigur\u0103m componente corecte, \u00een care accesibilitatea era implementat\u0103 din cutie.<\/li>\n
  2. Accesibilitate == U\u0219urin\u021ba utiliz\u0103rii \u2013 adic\u0103 nu este doar o sarcin\u0103 tehnic\u0103. Trebuia s\u0103 schimb\u0103m \u00eentregul proces de proiectare \u0219i s\u0103 ne asigur\u0103m c\u0103 accesibilitatea este luat\u0103 \u00een considerare \u0219i discutat\u0103 \u00eenainte de a \u00eencepe proiectarea interfe\u021bei utilizatorului. Trebuie s\u0103 g\u00e2ndim din timp cum utilizatorii pot descoperi orice func\u021bionalitate, cum se vor deplasa \u0219i cum va func\u021biona \u201eclic dreapta\u201d cu tastatura. Accesibilitatea trebuie s\u0103 fie o parte integrant\u0103 a procesului de design \u2013 pentru unii utilizatori, este mult mai mult dec\u00e2t aspectul aplica\u021biei.<\/li>\n
  3. De la \u00eenceput, am dorit s\u0103 ob\u021binem feedback de la persoanele nev\u0103z\u0103toare \u0219i alte persoane cu dizabilit\u0103\u021bi cu privire la u\u0219urin\u021ba de utilizare a aplica\u021biei.<\/li>\n
  4. Aveam nevoie de metode cu adev\u0103rat bune pentru a detecta regresiile \u00een accesibilitate.<\/li>\n<\/ol>\n

    \nEi bine, din punct de vedere ingineresc, prima parte suna destul de distractiv \u2013 dezvoltarea arhitecturii \u0219i implementarea bibliotecii de componente. \u0218i \u00eentr-adev\u0103r a fost.<\/p>\n

    F\u0103c\u00e2nd un pas \u00eenapoi, examin\u00e2nd exemplele ARIA<\/a><\/noindex> \u0218i g\u00e2ndindu-ne la aceasta ca la o problem\u0103 de design, nu ca la o problem\u0103 de \u201eadaptare\u201d, am introdus c\u00e2teva abstrac\u021bii. Componenta are o 'Structur\u0103' (compus\u0103 din elemente HTML) \u0219i un 'Comportament' (cum interac\u021bioneaz\u0103 cu utilizatorul). De exemplu, \u00een fragmentele de mai jos avem o simpl\u0103 list\u0103 neordonat\u0103. Atunci c\u00e2nd ad\u0103ug\u0103m \u201ecomportament\u201d listei, se adaug\u0103 rolurile corespunz\u0103toare pentru ca aceasta s\u0103 func\u021bioneze ca o list\u0103. Facem acela\u0219i lucru \u0219i pentru meniu.<\/p>\n

    \"\u00cen
    \n
    \nDe fapt, aici se adaug\u0103 nu doar roluri, ci \u0219i handleri de evenimente pentru navigarea prin tastatur\u0103.<\/p>\n

    Acum arat\u0103 mult mai ordonat. Dac\u0103 am putea ob\u021bine o separare clar\u0103 \u00eentre ele, nu ar mai conta cum a fost creat\u0103 structura, am putea aplica comportamentele (Behaviours) \u0219i am ob\u021bine accesibilitate corect\u0103.<\/p>\n

    Aceasta poate fi v\u0103zut\u0103 \u00een ac\u021biune la https:\/\/stardust-ui.github.io\/react\/<\/a><\/noindex> \u2013 biblioteca UX React<\/a><\/noindex>, care este proiectat\u0103 \u0219i implementat\u0103 av\u00e2nd \u00een vedere accesibilitatea \u00eenc\u0103 de la \u00eenceput.<\/p>\n

    A doua parte \u2013 schimbarea abord\u0103rii \u0219i proceselor \u00een jurul designului m-a speriat ini\u021bial: inginerii modesti care \u00eencearc\u0103 s\u0103 impun\u0103 schimb\u0103ri organiza\u021bionale nu se termin\u0103 \u00eentotdeauna bine, \u00eens\u0103 aceasta s-a dovedit a fi una dintre cele mai interesante domenii \u00een care am avut un impact semnificativ asupra procesului. Pe scurt, aveam urm\u0103torul proces: noua func\u021bionalitate era dezvoltat\u0103 de o echip\u0103, ulterior grupul nostru de lideri analiza\/itera propunerea, iar apoi, dup\u0103 aprobat, designul era de obicei transferat echipei de ingineri. \u00cen acest caz, echipa de ingineri 'de\u021binea' de fapt func\u021bionalitatea de accesibilitate, deoarece trebuia s\u0103 rezolve toate problemele asociate.<\/p>\n

    La \u00eenceput, aceasta a fost o munc\u0103 destul de dificil\u0103 \u2013 s\u0103 explic\u0103m c\u0103 accesibilitatea \u0219i utilizabilitatea sunt inseparabile \u0219i c\u0103 acest lucru trebuie realizat \u00eenc\u0103 din faza de proiectare, altfel conduce la modific\u0103ri semnificative \u0219i redefinirea unor roluri. Cu toate acestea, cu sprijinul conducerii \u0219i al juc\u0103torilor cheie, am transmis aceast\u0103 idee \u0219i am pus-o \u00een aplicare, astfel \u00eenc\u00e2t designurile s\u0103 fie verificate pentru accesibilitate \u0219i utilizabilitate \u00eenainte de a fi prezentate conducerii.<\/p>\n

    \u0218i aceste feedback-uri au fost extrem de valoroase pentru to\u021bi \u2013 a fost fantastic, ca un exerci\u021biu de schimb de cuno\u0219tin\u021be\/informare despre modul \u00een care utilizatorii interac\u021bioneaz\u0103 cu aplica\u021biile web, am identificat numeroase zone problematice ale interfe\u021bei utilizatorului \u00eenainte de a fi construite, iar echipele de dezvoltare au acum specifica\u021bii mult mai bune, nu doar vizuale, ci \u0219i comportamentale. Discu\u021biile reale sunt discu\u021bii vesele, energice \u0219i pasionate despre aspectele tehnice \u0219i interac\u021biuni.<\/p>\n

    Am putea face aceast\u0103 munc\u0103 \u0219i mai bine, dac\u0103 \u00een aceste (sau viitoarele) \u00eent\u00e2lniri cu noi ar fi utilizatori nev\u0103z\u0103tori \u0219i utilizatori cu dizabilit\u0103\u021bi \u2013 a fost greu de organizat, dar acum colabor\u0103m cu organiza\u021bii locale de nev\u0103z\u0103tori, precum \u0219i cu companii care ofer\u0103 testare extern\u0103 pentru verificarea fluxului de execu\u021bie \u00een stadiile timpurii de dezvoltare \u2013 at\u00e2t la nivel de component\u0103, c\u00e2t \u0219i la nivel de flux de execu\u021bie.<\/p>\n

    Acum, inginerii au specifica\u021bii destul de detaliate, componente accesibile pe care le pot utiliza pentru implementare \u0219i o modalitate de a verifica fluxul de execu\u021bie. Par\u021bial, experien\u021ba ne-a \u00eenv\u0103\u021bat ce am omis constant \u2013 cum putem opri regresia. \u00cen mod similar, oamenii pot folosi teste de integrare sau teste end-to-end pentru a verifica func\u021bionalit\u0103\u021bile de care avem nevoie pentru a detecta modific\u0103rile \u00een interac\u021biuni \u0219i fluxuri de execu\u021bie \u2013 at\u00e2t vizuale, c\u00e2t \u0219i comportamentale.<\/p>\n

    Definirea regresiei vizuale este o sarcin\u0103 destul de specific\u0103, foarte pu\u021bin se poate ad\u0103uga la acest proces, \u00een afar\u0103 de, poate, verificarea dac\u0103 este vizibil\u0103 centrarea \u00een timpul navig\u0103rii cu ajutorul tastaturii. Dou\u0103 tehnologii relativ noi pentru a lucra cu accesibilitatea sunt mai interesante.<\/p>\n

      \n
    1. Accessibility Insights<\/a><\/noindex> este un set de instrumente care pot fi utilizate at\u00e2t \u00een browser, c\u00e2t \u0219i \u00een cadrul ciclului de construc\u021bie\/testare, pentru a identifica problemele.<\/li>\n
    2. Verificarea func\u021bionalit\u0103\u021bii software-ului de citire a ecranului a fost o sarcin\u0103 deosebit de dificil\u0103. Odat\u0103 cu introducerea accesului la Accessibility DOM<\/b>, am ob\u021binut \u00een sf\u00e2r\u0219it posibilitatea de a face capturi ale aplica\u021biei din punct de vedere al accesibilit\u0103\u021bii, foarte asem\u0103n\u0103toare cu modul \u00een care le facem pentru testele vizuale, \u0219i de a le verifica pentru regresie.<\/li>\n<\/ol>\n

      \nA\u0219adar, \u00een a doua parte a povestirii \u2013 am trecut de la modificarea codului HTML la lucrul la un nivel de abstractizare mai \u00eenalt, am schimbat procesul de dezvoltare a designului \u0219i am implementat testarea riguroas\u0103. Procese noi, tehnologii noi \u0219i noi niveluri de abstractizare au schimbat complet percep\u021bia despre accesibilitate \u0219i despre ce \u00eenseamn\u0103 s\u0103 lucrezi \u00een acest domeniu.
      \nDar acesta este doar \u00eenceputul.<\/p>\n

      Urm\u0103toarea \"\u00een\u021belegere\" este c\u0103 utilizatorii cu deficien\u021be de vedere promoveaz\u0103 tehnologii de v\u00e2rf \u2013 ei sunt cei care beneficiaz\u0103 cel mai mult nu doar de modific\u0103rile descrise anterior, ci \u0219i de faptul c\u0103 noi abord\u0103ri \u0219i idei devin posibile cu ajutorul ML\/AI. De exemplu, tehnologia Immersive Reader permite utilizatorilor s\u0103 prezinte textul mai simplu \u0219i mai clar. Acesta poate fi citit cu voce tare, structura propozi\u021biei este \u00eemp\u0103r\u021bit\u0103 gramatical, iar chiar \u0219i semnifica\u021biile cuvintelor sunt afi\u0219ate grafic. Aceasta nu se \u00eencadreaz\u0103 deloc \u00een vechea \u00een\u021belegere de \"a-l face accesibil\" \u2013 este o func\u021bie de utilizare care va ajuta pe toat\u0103 lumea.<\/p>\n

      Cu ML\/AI apar modalit\u0103\u021bi complet noi de interac\u021bionare \u0219i lucru, \u0219i suntem \u00eenc\u00e2nta\u021bi s\u0103 facem parte din etapele urm\u0103toare ale acestui parcurs inovator. Inova\u021biile sunt dictate de schimbarea g\u00e2ndirii \u2013 umanitatea a existat de mii de ani, ma\u0219inile de sute de ani, site-urile web de c\u00e2teva zeci de ani, iar smartphone-urile \u0219i mai pu\u021bin, tehnologia trebuie s\u0103 se adapteze la oameni, nu invers.<\/p>\n

      P.S. Articolul a fost tradus cu unele abateri minore de la original. Fiind coautor al acestui articol, am convenit asupra acestor abateri cu Hugh.<\/p>\n

      Numai utilizatorii \u00eenregistra\u021bi pot participa la sondaj. Conecta\u021bi-v\u0103<\/a><\/noindex>, v\u0103 rug\u0103m.<\/p>\n

      Acorda\u021bi aten\u021bie accesibilit\u0103\u021bii aplica\u021biilor dumneavoastr\u0103?<\/h2>\n