{"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\/sk\/blog\/news\/po-napravleniyu-k-dostupnosti","title":{"rendered":"Smerom k dostupnosti","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"

\"Smerom
\n
\nPiatok je koniec pracovn\u00e9ho d\u0148a. Zl\u00e9 spr\u00e1vy prich\u00e1dzaj\u00fa v\u017edy v piatok na konci pracovn\u00e9ho d\u0148a.<\/p>\n

Chyst\u00e1te sa opusti\u0165 kancel\u00e1riu, ke\u010f zazvon\u00ed nov\u00fd e-mail oh\u013eadom \u010fal\u0161ej reorganiz\u00e1cie, ktor\u00fd pr\u00e1ve pri\u0161iel do schr\u00e1nky.<\/p>\n

\u010eakujem xxxx, yyy od dne\u0161n\u00e9ho d\u0148a budete reportova\u0165 zzzz.
\n\u2026
\nA t\u00edm Hugh zabezpe\u010d\u00ed dostupnos\u0165 na\u0161ich produktov pre \u013eud\u00ed so zdravotn\u00fdm postihnut\u00edm.<\/i>\n<\/p><\/blockquote>\n

Oh, nie! Za \u010do som si to zasl\u00fa\u017eil? Chc\u00fa, aby som odi\u0161iel? Pripravi\u0165 sa na nevd\u011b\u010dn\u00fa a \u0165a\u017ek\u00fa pr\u00e1cu a sna\u017ei\u0165 sa napravi\u0165 chyby in\u00fdch. To bude ur\u010dite zlyhanie...<\/p>\n

Tak\u00e1 bola dostupnos\u0165 pred nieko\u013ek\u00fdmi rokmi. Niektor\u00ed chud\u00e1ci dostali pr\u00e1cu na \"\u010disten\u00ed\" pou\u017e\u00edvate\u013esk\u00e9ho rozhrania, aby ho spravili dostupn\u00fdm pre \u013eud\u00ed so zdravotn\u00fdm postihnut\u00edm.
\n<\/a><\/noindex>
\nTo, \u010do to v skuto\u010dnosti znamenalo, bolo dos\u0165 nejasn\u00e9 \u2013 pravdepodobne, ak ste mohli vidie\u0165 indik\u00e1tor fokusu a pres\u00fava\u0165 sa medzi pol\u00ed\u010dkami pomocou kl\u00e1vesu Tab, ma\u0165 nejak\u00fd alternat\u00edvny text a p\u00e1r popisov pol\u00ed, pova\u017eovalo by sa to za to, \u017ee va\u0161a aplik\u00e1cia je dostupn\u00e1...<\/p>\n

Ale n\u00e1hle sa \"chyby\" za\u010dali mno\u017ei\u0165 r\u00fdchlos\u0165ou lav\u00edny.<\/p>\n

R\u00f4zne obrazov\u00e9 \u010d\u00edta\u010dky (ang.<\/i> Screen Readers) a prehliada\u010de sa spr\u00e1vali \u00faplne inak.<\/p>\n

Pou\u017e\u00edvatelia si s\u0165a\u017eovali, \u017ee aplik\u00e1cia nie je pou\u017eiteln\u00e1.<\/p>\n

Akon\u00e1hle bola chyba opraven\u00e1 na jednom mieste, objavila sa in\u00e1 na inom.<\/p>\n

A jednoducho meni\u0165 a opravova\u0165 chyby pou\u017e\u00edvate\u013esk\u00e9ho rozhrania si vy\u017eadovalo obrovsk\u00e9 \u00fasilie.<\/p>\n

Bol som tam. Pre\u017eil som, ale my sme \"neuspechli\" \u2013 technicky sme ve\u013ea vy\u010distili, pridali sme mno\u017estvo popisov pol\u00ed, rol\u00ed a dosiahli sme nejak\u00fa \u00farove\u0148 s\u00faladu s po\u017eiadavkami, ale nikto nebol \u0161\u0165astn\u00fd. Pou\u017e\u00edvatelia si aj tak s\u0165a\u017eovali, \u017ee sa nem\u00f4\u017eu orientova\u0165 v aplik\u00e1cii. Mana\u017e\u00e9r si aj tak s\u0165a\u017eoval na neust\u00e1ly pr\u00edlev ch\u00fdb. In\u017einieri si s\u0165a\u017eovali na nespr\u00e1vne definovanie \u00falohy, bez jasne definovan\u00e9ho \"spr\u00e1vneho\" rie\u0161enia, ktor\u00e9 by fungovalo vo v\u0161etk\u00fdch pr\u00edpadoch.<\/p>\n

Na mojej ceste k porozumeniu dostupnosti boli niektor\u00e9 jasne odhaluj\u00face momenty.
\nAs it turned out, the first step was realizing that adding accessibility functionality to an existing product is difficult. Even more challenging is convincing managers that it\u2019s incredibly complex! It's not just about 'adding a few tags' and the user interface will work perfectly. No, finishing it in three weeks is impossible; even three months may not be enough.
\nMy next moment of truth came when I witnessed blind users actually using our application. It's SO different from just looking at error messages.<\/p>\n

I will return to this again and again, but almost all our 'assumptions' about how people used our application were wrong.<\/p>\n

Navigating a complex user interface using keys Tab\/Shift+Tab<\/code> \u2013 is terrible! We need something better. Keyboard shortcuts, headings.<\/p>\n

Is losing focus when changing the UI really a big problem? Let's reconsider \u2013 it\u2019s incredibly confusing.<\/p>\n

I continued, working on various projects for a while, and then we started a new project with a complex user interface and a clear intention to finally achieve proper accessibility this time.<\/p>\n

So, we took a step back and looked at how we could approach this differently and succeed, and make the workflow enjoyable!<\/p>\n

We quickly came to some conclusions:<\/p>\n

    \n
  1. We didn\u2019t want interface developers fiddling with aria labels\/roles and, of course, the HTML structure of components. We needed to provide them with the right components where accessibility is built-in from the start.<\/li>\n
  2. Accessibility == Usability \u2013 meaning it\u2019s not just a technical task. We needed to change the entire design process and ensure accessibility is considered and discussed before the user interface design begins. We must think ahead about how users can discover any functionality, how they will navigate, and how the 'right-click' function will work with the keyboard. Accessibility has to be an integral part of the design process \u2013 for some users, it is far more than just the look of the application.<\/li>\n
  3. Od sam\u00e9ho za\u010diatku sme chceli z\u00edska\u0165 sp\u00e4tn\u00fa v\u00e4zbu od nevidiacich a in\u00fdch pou\u017e\u00edvate\u013eov so zdravotn\u00fdm postihnut\u00edm o jednoduchosti pou\u017e\u00edvania aplik\u00e1cie.<\/li>\n
  4. Potrebovali sme skuto\u010dne dobr\u00e9 sp\u00f4soby, ako odhali\u0165 regresiu pr\u00edstupnosti.<\/li>\n<\/ol>\n

    \nZ in\u017einierskeho h\u013eadiska to znelo dos\u0165 z\u00e1bavne \u2013 navrhn\u00fa\u0165 architekt\u00faru a implementova\u0165 kni\u017enicu komponentov. A naozaj to tak bolo.<\/p>\n

    Ke\u010f sa na to pozrieme z perspekt\u00edvy pr\u00edkladov ARIA<\/a><\/noindex> A ke\u010f\u017ee na to pozer\u00e1me ako na dizajnov\u00fd probl\u00e9m, a nie probl\u00e9m \"prisp\u00f4sobi\u0165 sa\", zaviedli sme niektor\u00e9 abstrakcie. Komponent m\u00e1 '\u0160trukt\u00faru' ( sklad\u00e1 sa z HTML prvkov) a 'Spr\u00e1vanie' (ako interaguje s pou\u017e\u00edvate\u013eom). Napr\u00edklad v ni\u017e\u0161ie uveden\u00fdch \u00faryvk\u00e1ch m\u00e1me jednoduch\u00fd neusporiadan\u00fd zoznam. Pri prid\u00e1van\u00ed \"spr\u00e1vania\" k zoznamu sa prid\u00e1vaj\u00fa pr\u00edslu\u0161n\u00e9 \u00falohy, aby fungoval ako zoznam. Rovnako to rob\u00edme pre menu.<\/p>\n

    \"Smerom
    \n
    \nV skuto\u010dnosti sa tu prid\u00e1vaj\u00fa nielen role, ale aj obslu\u017en\u00e9 programy pre navig\u00e1ciu pomocou kl\u00e1vesnice.<\/p>\n

    Toto u\u017e vyzer\u00e1 preh\u013eadnej\u0161ie. Keby sme mohli z\u00edska\u0165 \u010dist\u00e9 oddelenie medzi nimi, nebolo by d\u00f4le\u017eit\u00e9, ako bola \u0161trukt\u00fara vytvoren\u00e1, mohli by sme na \u0148u aplikova\u0165 spr\u00e1vania a z\u00edska\u0165 spr\u00e1vnu pr\u00edstupnos\u0165.<\/p>\n

    V praxi to mo\u017eno vidie\u0165 na adrese https:\/\/stardust-ui.github.io\/react\/<\/a><\/noindex> \u2013 UX kni\u017enica React<\/a><\/noindex>, ktor\u00e1 je navrhnut\u00e1 a implementovan\u00e1 s oh\u013eadom na pr\u00edstupnos\u0165 od sam\u00e9ho za\u010diatku.<\/p>\n

    Druh\u00e1 \u010das\u0165 \u2013 zmena pr\u00edstupu a procesov okolo dizajnu ma p\u00f4vodne znepokojovala: skromn\u00ed in\u017einieri, ktor\u00ed sa sna\u017eia presadi\u0165 organiza\u010dn\u00e9 zmeny, to nikdy nekon\u010d\u00ed dobre, ale uk\u00e1zalo sa, \u017ee to bola jedna z najzauj\u00edmavej\u0161\u00edch oblast\u00ed, kde sme prispeli k procesu. V skratke sme mali nasleduj\u00faci proces: nov\u00fd funk\u010dn\u00fd prvok vyv\u00edjala jedna t\u00edm, po \u010dom sa na\u0148 na\u0161a skupina ved\u00facich pozrela\/analyzovala\/iterovala n\u00e1vrh a potom, po schv\u00e1len\u00ed, sa zvy\u010dajne n\u00e1vrh odovzdal t\u00edmu in\u017einierov. V tomto pr\u00edpade t\u00edm in\u017einierov v skuto\u010dnosti \u201evlastnil\u201c funk\u010dnos\u0165 pr\u00edstupnosti, preto\u017ee museli odstr\u00e1ni\u0165 v\u0161etky s \u0148ou spojen\u00e9 probl\u00e9my.<\/p>\n

    Na za\u010diatku to bola dos\u0165 n\u00e1ro\u010dn\u00e1 \u00faloha \u2013 vysvetli\u0165, \u017ee dostupnos\u0165 a pou\u017eite\u013enos\u0165 s\u00fa neoddelite\u013ene sp\u00e4t\u00e9 a \u017ee to je potrebn\u00e9 zabezpe\u010di\u0165 u\u017e v \u0161t\u00e1diu n\u00e1vrhu, inak to vedie k ve\u013ek\u00fdm zmen\u00e1m a redefinovaniu niektor\u00fdch rol\u00ed. Napriek tomu, s podporou vedenia a k\u013e\u00fa\u010dov\u00fdch hr\u00e1\u010dov, sme t\u00fato my\u0161lienku preniesli a za\u010dali ju realizova\u0165, aby dizajny prech\u00e1dzali kontrolou dostupnosti a pou\u017eite\u013enosti predt\u00fdm, ako s\u00fa predstaven\u00e9 vedeniu.<\/p>\n

    A tieto sp\u00e4tn\u00e9 v\u00e4zby boli mimoriadne cenn\u00e9 pre v\u0161etk\u00fdch \u2013 bolo to fantastick\u00e9 cvi\u010denie na v\u00fdmenu poznatkov\/poskytovanie inform\u00e1ci\u00ed o tom, ako pou\u017e\u00edvatelia komunikuj\u00fa s webov\u00fdmi aplik\u00e1ciami, identifikovali sme mno\u017estvo probl\u00e9mov\u00fdch oblast\u00ed pou\u017e\u00edvate\u013esk\u00e9ho rozhrania e\u0161te predt\u00fdm, ako boli vytvoren\u00e9, v\u00fdvojov\u00e9 t\u00edmy teraz maj\u00fa omnoho lep\u0161ie \u0161pecifik\u00e1cie nielen vizu\u00e1lnych, ale aj behavior\u00e1lnych aspektov dizajnu. Skuto\u010dn\u00e9 diskusie s\u00fa z\u00e1bavn\u00e9, energick\u00e9, v\u00e1\u0161niv\u00e9 diskusie o technick\u00fdch aspektoch a interakci\u00e1ch.<\/p>\n

    Mohli by sme t\u00fato pr\u00e1cu vykona\u0165 e\u0161te lep\u0161ie, keby na t\u00fdchto (alebo nasleduj\u00facich) stretnutiach boli s nami aj nevyd\u00ed \u010di u\u017e\u00edvatelia so zdravotn\u00fdm postihnut\u00edm \u2013 to bolo \u0165a\u017ek\u00e9 zorganizova\u0165, ale moment\u00e1lne naozaj spolupracujeme s miestnymi organiz\u00e1ciami nevidiacich, ako aj so spolo\u010dnos\u0165ami, ktor\u00e9 poskytuj\u00fa extern\u00e9 testovanie na overenie priebehu vykon\u00e1vania v ran\u00fdch f\u00e1zach v\u00fdvoja \u2013 \u010di u\u017e na \u00farovni komponentu alebo na \u00farovni priebehu vykon\u00e1vania.<\/p>\n

    Teraz maj\u00fa in\u017einieri pomerne podrobn\u00e9 \u0161pecifik\u00e1cie, dostupn\u00e9 komponenty, ktor\u00e9 m\u00f4\u017eu pou\u017ei\u0165 na implement\u00e1ciu, a sp\u00f4sob, ako overova\u0165 priebeh vykon\u00e1vania. \u010ciasto\u010dne n\u00e1s sk\u00fasenosti nau\u010dili tomu, \u010do neust\u00e1le prehliadame \u2013 ako m\u00f4\u017eeme zastavi\u0165 regresiu. Podobne m\u00f4\u017eu \u013eudia vyu\u017e\u00edva\u0165 integra\u010dn\u00e9 alebo end-to-end testy na kontrolu funk\u010dnosti, ktor\u00e9 potrebujeme na odha\u013eovanie zmien v interakci\u00e1ch a priebehoch vykon\u00e1vania \u2013 ako vizu\u00e1lnych, tak aj behavior\u00e1lnych.<\/p>\n

    Defin\u00edcia vizu\u00e1lnej regresie je dos\u0165 \u0161pecifick\u00e1, je \u0165a\u017ek\u00e9 prida\u0165 k tomuto procesu nie\u010do viac, okrem mo\u017eno kontroly, \u010di je zameranie vidite\u013en\u00e9 pri navig\u00e1cii pomocou kl\u00e1vesnice. Zauj\u00edmavej\u0161ie s\u00fa dve relat\u00edvne nov\u00e9 technol\u00f3gie na pr\u00e1cu s pr\u00edstupnos\u0165ou.<\/p>\n

      \n
    1. Accessibility Insights<\/a><\/noindex> je s\u00fabor n\u00e1strojov, ktor\u00e9 m\u00f4\u017eu by\u0165 vykon\u00e1van\u00e9 ako v prehliada\u010di, tak aj v r\u00e1mci cyklu zostavovania\/testovania na odha\u013eovanie probl\u00e9mov.<\/li>\n
    2. Overenie spr\u00e1vnosti pr\u00e1ce programov na \u010d\u00edtanie z obrazovky bola obzvl\u00e1\u0161\u0165 zlo\u017eit\u00e1 \u00faloha. S pr\u00edstupom k Accessibility DOM<\/b>, sme kone\u010dne z\u00edskali mo\u017enos\u0165 vytv\u00e1ra\u0165 sn\u00edmky aplik\u00e1cie z poh\u013eadu pr\u00edstupnosti, ve\u013emi podobn\u00e9 t\u00fdm, ak\u00e9 rob\u00edme pre vizu\u00e1lne testy, a overujeme ich na regresiu.<\/li>\n<\/ol>\n

      \nTak\u017ee v druhej \u010dasti pr\u00edbehu \u2013 sme pre\u0161li od \u00fapravy HTML k pr\u00e1ci na vy\u0161\u0161ej \u00farovni abstrakcie, zmenili sme proces n\u00e1vrhu a zaviedli d\u00f4kladn\u00e9 testovanie. Nov\u00e9 procesy, nov\u00e9 technol\u00f3gie a nov\u00e9 \u00farovne abstrakcie \u00faplne zmenili predstavy o pr\u00edstupnosti a o tom, \u010do to znamen\u00e1 pracova\u0165 v tejto oblasti.
      \nAle toto je len za\u010diatok.<\/p>\n

      Nasleduj\u00face \"pochopenie\" spo\u010d\u00edva v tom, \u017ee nevidiaci pou\u017e\u00edvatelia pos\u00favaj\u00fa pokro\u010dil\u00e9 technol\u00f3gie \u2013 pr\u00e1ve oni profituj\u00fa najviac nielen z predch\u00e1dzaj\u00facich zmien, ale aj z toho, \u017ee nov\u00e9 pr\u00edstupy a n\u00e1pady sa st\u00e1vaj\u00fa mo\u017en\u00fdmi pomocou ML\/AI. Napr\u00edklad technol\u00f3gia Immersive Reader umo\u017e\u0148uje pou\u017e\u00edvate\u013eom jednoduch\u0161ie a jasnej\u0161ie ch\u00e1pa\u0165 text. M\u00f4\u017ee by\u0165 \u010d\u00edtan\u00fd nahlas, \u0161trukt\u00fara viet sa gramaticky rozde\u013euje a dokonca sa graficky zobrazuj\u00fa v\u00fdznamy slov. Toto sa absol\u00fatne nezmest\u00ed do star\u00e9ho ch\u00e1panie \u201eurobi\u0165 to pr\u00edstupn\u00fdm\u201c \u2013 je to funkcia pou\u017eite\u013enosti, ktor\u00e1 pom\u00f4\u017ee v\u0161etk\u00fdm.<\/p>\n

      S ML\/AI sa objavuj\u00fa \u00faplne nov\u00e9 sp\u00f4soby interakcie a pr\u00e1ce, a sme radi, \u017ee sme s\u00fa\u010das\u0165ou nasleduj\u00facich krokov tejto pokrokovej cesty. Inov\u00e1cie s\u00fa podmienen\u00e9 zmenou myslenia \u2013 \u013eudstvo existuje tis\u00edce rokov, stroje stovky rokov, webov\u00e9 str\u00e1nky nieko\u013eko desa\u0165ro\u010d\u00ed a smartf\u00f3ny e\u0161te menej, technol\u00f3gia sa mus\u00ed prisp\u00f4sobova\u0165 \u013eu\u010fom, nie naopak.<\/p>\n

      P.S. \u010cl\u00e1nok bol prelo\u017een\u00fd s mal\u00fdmi odch\u00fdlkami od origin\u00e1lu. Ako spoluautor tohto \u010dl\u00e1nku som tieto odch\u00fdlky schv\u00e1lil s Hugh.<\/p>\n

      Len registrovan\u00ed pou\u017e\u00edvatelia sa m\u00f4\u017eu z\u00fa\u010dastni\u0165 prieskumu. Prihl\u00e1ste sa<\/a><\/noindex>, pros\u00edm.<\/p>\n

      Venovali ste pozornos\u0165 dostupnosti svojich aplik\u00e1ci\u00ed?<\/h2>\n