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

\"Sm\u011brem
\n
\nP\u00e1tek \u2013 konec pracovn\u00edho dne. \u0160patn\u00e9 zpr\u00e1vy v\u017edy p\u0159ich\u00e1zej\u00ed v p\u00e1tek na konci pracovn\u00edho dne.<\/p>\n

Chyst\u00e1te se opustit kancel\u00e1\u0159, \"ding\" nov\u00e9 e-mailov\u00e9 ozn\u00e1men\u00ed o dal\u0161\u00ed reorganizaci pr\u00e1v\u011b p\u0159i\u0161lo do va\u0161\u00ed schr\u00e1nky.<\/p>\n

D\u011bkuji xxxx, yyy od dne\u0161ka budete pod\u00e1vat zpr\u00e1vy zzzz
\n\u2026
\nA t\u00fdm Hugh zajist\u00ed dostupnost na\u0161ich produkt\u016f pro lidi se zdravotn\u00edm posti\u017een\u00edm.<\/i>\n<\/p><\/blockquote>\n

Ach ne! Co jsem si zaslou\u017eil? Cht\u011bj\u00ed, abych ode\u0161el? P\u0159\u00edprava na vd\u011b\u010dnou t\u011b\u017ekou pr\u00e1ci a pokusit se opravit chyby jin\u00fdch lid\u00ed. To ur\u010dit\u011b skon\u010d\u00ed ne\u00fasp\u011bchem\u2026<\/p>\n

Takov\u00e1 byla dostupnost p\u0159ed n\u011bkolika lety. N\u011bkte\u0159\u00ed chud\u00e1ci dost\u00e1vali pr\u00e1ci na \"\u00faklidu\" u\u017eivatelsk\u00e9ho rozhran\u00ed, aby se pokusili u\u010dinit jej dostupn\u00fdm pro lidi se zdravotn\u00edm posti\u017een\u00edm.
\n<\/a><\/noindex>
\nTo, co to ve skute\u010dnosti znamenalo, bylo dost v\u00e1gn\u00ed \u2013 pravd\u011bpodobn\u011b, pokud jste mohli vid\u011bt ukazatel fokus, pohybovat se po pol\u00edch pomoc\u00ed tabul\u00e1toru, m\u00edt n\u011bjak\u00fd alternativn\u00ed text a p\u00e1r popis\u016f k pol\u00edm, by to bylo pova\u017eov\u00e1no za to, \u017ee je va\u0161e aplikace dostupn\u00e1\u2026<\/p>\n

Ale najednou \"chyby\" za\u010daly vznikat rychlost\u00ed laviny.<\/p>\n

R\u016fzn\u00e1 \u010dtec\u00ed za\u0159\u00edzen\u00ed (angl.<\/i> Screen Readers) a prohl\u00ed\u017ee\u010de se chovaly naprosto odli\u0161n\u011b.<\/p>\n

U\u017eivatel\u00e9 si st\u011b\u017eovali, \u017ee aplikace nen\u00ed pou\u017eiteln\u00e1.<\/p>\n

Jakmile byla chyba opravena na jednom m\u00edst\u011b, objevila se jin\u00e1 na jin\u00e9m.<\/p>\n

A pouh\u00e9 m\u011bn\u011bn\u00ed a opravov\u00e1n\u00ed chyb u\u017eivatelsk\u00e9ho rozhran\u00ed vy\u017eadovalo tit\u00e1nsk\u00e9 \u00fasil\u00ed.<\/p>\n

Byl jsem tam. P\u0159e\u017eil jsem, ale \"neusp\u011bli jsme\" \u2013 technicky jsme spoustu vy\u010distili, p\u0159idali jsme spoustu popis\u016f k pol\u00edm, rol\u00edm a dos\u00e1hli jsme ur\u010dit\u00e9 \u00farovn\u011b shody s po\u017eadavky, ale nikdo nebyl \u0161\u0165astn\u00fd. U\u017eivatel\u00e9 si st\u00e1le st\u011b\u017eovali, \u017ee se v aplikaci nemohou orientovat. Mana\u017eer si st\u00e1le st\u011b\u017eoval na neust\u00e1l\u00fd p\u0159\u00edliv chyb. In\u017een\u00fd\u0159i si st\u011b\u017eovali na \u0161patn\u00e9 zad\u00e1n\u00ed \u00fakol\u016f, bez jasn\u011b definovan\u00e9ho \"spr\u00e1vn\u00e9ho\" \u0159e\u0161en\u00ed, kter\u00e9 by fungovalo ve v\u0161ech p\u0159\u00edpadech.<\/p>\n

Na m\u00e9 cest\u011b k pochopen\u00ed dostupnosti potkalo n\u011bkolik jasn\u011b odhaluj\u00edc\u00edch moment\u016f.
\nPochopen\u00ed, \u017ee p\u0159id\u00e1vat funkce dostupnosti na hotov\u00fd produkt je slo\u017eit\u00e9, bylo pravd\u011bpodobn\u011b prvn\u00ed. A je\u0161t\u011b slo\u017eit\u011bj\u0161\u00ed je p\u0159esv\u011bd\u010dit mana\u017eery, \u017ee je to neuv\u011b\u0159iteln\u011b obt\u00ed\u017en\u00e9! Ne, nejde jen o to \"p\u0159idat p\u00e1r zna\u010dek\" a u\u017eivatelsk\u00e9 rozhran\u00ed bude fungovat skv\u011ble. Ne, to nelze dokon\u010dit za t\u0159i t\u00fddny, ani t\u0159i m\u011bs\u00edce nesta\u010d\u00ed.
\nM\u016fj dal\u0161\u00ed okam\u017eik pravdy nastal, kdy\u017e jsem na vlastn\u00ed o\u010di vid\u011bl, jak slep\u00ed u\u017eivatel\u00e9 skute\u010dn\u011b pou\u017e\u00edvaj\u00ed na\u0161i aplikaci. To se TOT\u00c1LN\u011a li\u0161\u00ed od prohl\u00ed\u017een\u00ed chybov\u00fdch hl\u00e1\u0161en\u00ed.<\/p>\n

K tomu se budu vracet znovu a znovu, ale t\u00e9m\u011b\u0159 v\u0161echny na\u0161e \"p\u0159edpoklady\" o tom, jak lid\u00e9 pou\u017e\u00edvali na\u0161i aplikaci, byly chybn\u00fdmi.<\/p>\n

Navigace slo\u017eit\u00fdm u\u017eivatelsk\u00fdm rozhran\u00edm pomoc\u00ed kl\u00e1ves Tab\/Shift+Tab<\/code> \u2013 to je hrozn\u00e9! Pot\u0159ebujeme n\u011bco lep\u0161\u00edho. Kl\u00e1vesov\u00e9 zkratky, hlavi\u010dky.<\/p>\n

Ztr\u00e1ta fokusu p\u0159i zm\u011bn\u011b u\u017eivatelsk\u00e9ho rozhran\u00ed nen\u00ed p\u0159ece takov\u00fd probl\u00e9m? Promysleme to je\u0161t\u011b jednou \u2013 je to \u0161\u00edlen\u011b matouc\u00ed.<\/p>\n

Pokra\u010doval jsem a n\u011bjakou dobu pracoval na r\u016fzn\u00fdch projektech, a pak jsme zah\u00e1jili nov\u00fd projekt se slo\u017eit\u00fdm u\u017eivatelsk\u00fdm rozhran\u00edm a jasn\u00fdm c\u00edlem kone\u010dn\u011b zajistit spr\u00e1vnou dostupnost.<\/p>\n

Tak jsme se vr\u00e1tili o krok zp\u011bt a pod\u00edvali se, jak to m\u016f\u017eeme realizovat jinak a usp\u011bt, a aby s\u00e1m proces pr\u00e1ce nebyl nudn\u00fd!<\/p>\n

Pom\u011brn\u011b rychle jsme dosp\u011bli k n\u011bkolika z\u00e1v\u011br\u016fm:<\/p>\n

    \n
  1. Necht\u011bli jsme, aby lid\u00e9 vyv\u00edjej\u00edc\u00ed u\u017eivatelsk\u00e9 rozhran\u00ed laborovali se zna\u010dkami aria\/role a p\u0159irozen\u011b s HTML strukturou komponent. Pot\u0159ebovali jsme jim poskytnout spr\u00e1vn\u00e9 komponenty, ve kter\u00fdch byla dostupnost implementov\u00e1na p\u0159\u00edmo z krabice.<\/li>\n
  2. Dostupnost == U\u017eivatelsk\u00e1 p\u0159\u00edv\u011btivost \u2013 tj. nen\u00ed to jen technick\u00fd \u00fakol. Museli jsme zm\u011bnit cel\u00fd proces n\u00e1vrhu a ujistit se, \u017ee se dostupnost zohled\u0148uje a diskutuje je\u0161t\u011b p\u0159ed zah\u00e1jen\u00edm n\u00e1vrhu u\u017eivatelsk\u00e9ho rozhran\u00ed. Je t\u0159eba od za\u010d\u00e1tku prom\u00fd\u0161let, jak u\u017eivatel\u00e9 mohou objevit jakoukoliv funk\u010dnost, jak se budou pohybovat a jak bude fungovat \"prav\u00e9 kliknut\u00ed my\u0161\u00ed\" z kl\u00e1vesnice. Dostupnost by m\u011bla b\u00fdt ned\u00edlnou sou\u010d\u00e1st\u00ed n\u00e1vrhov\u00e9ho procesu \u2013 pro n\u011bkter\u00e9 u\u017eivatele je to mnohem v\u00edc ne\u017e jen vzhled aplikace.<\/li>\n
  3. Od sam\u00e9ho za\u010d\u00e1tku jsme cht\u011bli z\u00edskat n\u00e1zory od nevidom\u00fdch a dal\u0161\u00edch u\u017eivatel\u016f se zdravotn\u00edm posti\u017een\u00edm na jednoduchost pou\u017e\u00edv\u00e1n\u00ed aplikace.<\/li>\n
  4. Pot\u0159ebovali jsme opravdu dobr\u00e9 zp\u016fsoby, jak chytat regresi p\u0159\u00edstupnosti.<\/li>\n<\/ol>\n

    \nNo, z in\u017een\u00fdrsk\u00e9ho hlediska, prvn\u00ed \u010d\u00e1st zn\u011bla docela z\u00e1bavn\u011b \u2013 navrhov\u00e1n\u00ed architektury a implementace knihovny komponent. A skute\u010dn\u011b to tak bylo.<\/p>\n

    Kdy\u017e se krok zp\u011bt, zva\u017eujeme p\u0159\u00edklady ARIA<\/a><\/noindex> A kdy\u017e na to pohl\u00ed\u017e\u00edme jako na probl\u00e9m designu, nikoli jako na probl\u00e9m \"p\u0159izp\u016fsoben\u00ed\", zavedli jsme n\u011bkter\u00e9 abstrakce. Komponenta m\u00e1 'Strukturu' (sest\u00e1v\u00e1 z HTML prvk\u016f) a 'Chov\u00e1n\u00ed' (jak interaguje s u\u017eivatelsk\u00fdm rozhran\u00edm). Nap\u0159\u00edklad v n\u00ed\u017ee uveden\u00fdch uk\u00e1zk\u00e1ch m\u00e1me jednoduch\u00fd neuspo\u0159\u00e1dan\u00fd seznam. P\u0159i p\u0159id\u00e1n\u00ed \"chov\u00e1n\u00ed\" k seznamu se p\u0159id\u00e1vaj\u00ed odpov\u00eddaj\u00edc\u00ed role, aby fungoval jako seznam. Podobn\u011b to d\u011bl\u00e1me pro menu.<\/p>\n

    \"Sm\u011brem
    \n
    \nVe skute\u010dnosti se zde p\u0159id\u00e1vaj\u00ed nejen role, ale tak\u00e9 obslu\u017en\u00e9 programy pro navigaci pomoc\u00ed kl\u00e1vesnice.<\/p>\n

    Vypad\u00e1 to u\u017e l\u00e9pe. Kdybychom mohli dos\u00e1hnout \u010dist\u00e9ho odd\u011blen\u00ed mezi nimi, bylo by jedno, jak byla struktura vytvo\u0159ena, mohli bychom na ni aplikovat chov\u00e1n\u00ed a dos\u00e1hnout spr\u00e1vn\u00e9 p\u0159\u00edstupnosti.<\/p>\n

    V akci to lze vid\u011bt na adrese https:\/\/stardust-ui.github.io\/react\/<\/a><\/noindex> \u2013 UX knihovna React<\/a><\/noindex>, kter\u00e1 je navrhov\u00e1na a realizov\u00e1na s ohledem na p\u0159\u00edstupnost od sam\u00e9ho za\u010d\u00e1tku.<\/p>\n

    Druh\u00e1 \u010d\u00e1st \u2013 zm\u011bna p\u0159\u00edstupu a proces\u016f kolem designu m\u011b zpo\u010d\u00e1tku d\u011bsila: skromn\u00ed in\u017een\u00fd\u0159i, kte\u0159\u00ed se sna\u017e\u00ed prosadit organiza\u010dn\u00ed zm\u011bny, to v\u011bt\u0161inou nekon\u010d\u00ed dob\u0159e, ale uk\u00e1zalo se, \u017ee to byla jedna z nejzaj\u00edmav\u011bj\u0161\u00edch oblast\u00ed, kde jsme v\u00fdznamn\u011b p\u0159isp\u011bli k procesu. Ve zjednodu\u0161en\u00e9 podob\u011b jsme m\u011bli n\u00e1sleduj\u00edc\u00ed proces: nov\u00e1 funk\u010dnost byla vyv\u00edjena jedn\u00edm t\u00fdmem, n\u00e1sledn\u011b na\u0161e skupina vedouc\u00edch analyzovala\/iterovala tento n\u00e1vrh a pot\u00e9, po schv\u00e1len\u00ed, byl design obvykle p\u0159ed\u00e1n t\u00fdmu in\u017een\u00fdr\u016f. V tomto p\u0159\u00edpad\u011b t\u00fdm in\u017een\u00fdr\u016f ve skute\u010dnosti \u201evlastnil\u201c funk\u010dnost p\u0159\u00edstupnosti, proto\u017ee musel odstranit v\u0161echny s t\u00edm spojen\u00e9 probl\u00e9my.<\/p>\n

    Na za\u010d\u00e1tku to byla docela n\u00e1ro\u010dn\u00e1 pr\u00e1ce \u2013 vysv\u011btlit, \u017ee p\u0159\u00edstupnost a pou\u017eitelnost jsou neodd\u011bliteln\u011b spojeny a \u017ee je t\u0159eba to ud\u011blat ji\u017e ve f\u00e1zi n\u00e1vrhu, jinak by to vedlo k velk\u00fdm zm\u011bn\u00e1m a redefinici n\u011bkter\u00fdch rol\u00ed. Nicm\u00e9n\u011b, s podporou veden\u00ed a kl\u00ed\u010dov\u00fdch hr\u00e1\u010d\u016f jsme tuto my\u0161lenku prosadili a uvedli do praxe, aby designy proch\u00e1zely kontrolou p\u0159\u00edstupnosti a pou\u017eitelnosti, ne\u017e budou p\u0159edlo\u017eeny veden\u00ed.<\/p>\n

    Tyto zp\u011btn\u00e9 vazby byly nesm\u00edrn\u011b cenn\u00e9 pro v\u0161echny \u2013 bylo fantastick\u00e9, jak to bylo cvi\u010den\u00ed v oblasti sd\u00edlen\u00ed znalost\u00ed\/o tom, jak u\u017eivatel\u00e9 interaguj\u00ed s webov\u00fdmi aplikacemi, identifikovali jsme \u0159adu probl\u00e9mov\u00fdch oblast\u00ed u\u017eivatelsk\u00e9ho rozhran\u00ed je\u0161t\u011b p\u0159ed t\u00edm, ne\u017e byly postaveny, t\u00fdmy v\u00fdvoj\u00e1\u0159\u016f nyn\u00ed maj\u00ed mnohem lep\u0161\u00ed specifikace nejen pro vizu\u00e1ln\u00ed, ale i pro behavior\u00e1ln\u00ed aspekty designu. Opr\u00e1vn\u011bn\u00e9 diskuse \u2013 to jsou z\u00e1bavn\u00e9, energick\u00e9, v\u00e1\u0161niv\u00e9 debaty o technick\u00fdch aspektech a interakc\u00edch.<\/p>\n

    Mohli bychom tuto pr\u00e1ci zlep\u0161it je\u0161t\u011b v\u00edc, pokud bychom na t\u011bchto (nebo n\u00e1sledn\u00fdch) sch\u016fzk\u00e1ch m\u011bli slep\u00e9 u\u017eivatele a u\u017eivatele se zdravotn\u00edm posti\u017een\u00edm \u2013 bylo to obt\u00ed\u017en\u00e9 zorganizovat, ale nyn\u00ed opravdu spolupracujeme jak s m\u00edstn\u00edmi organizacemi pro slep\u00e9, tak s firmami, kter\u00e9 poskytuj\u00ed extern\u00ed testov\u00e1n\u00ed pro ov\u011b\u0159en\u00ed pracovn\u00edch tok\u016f v ran\u00fdch f\u00e1z\u00edch v\u00fdvoje \u2013 jak na \u00farovni komponent, tak na \u00farovni pracovn\u00edho toku.<\/p>\n

    Nyn\u00ed maj\u00ed in\u017een\u00fd\u0159i k dispozici pom\u011brn\u011b podrobn\u00e9 specifikace, dostupn\u00e9 komponenty, kter\u00e9 mohou pou\u017e\u00edt pro implementaci, a zp\u016fsob, jak ov\u011b\u0159it pracovn\u00ed toky. \u010c\u00e1ste\u010dn\u011b n\u00e1s zku\u0161enost nau\u010dila, co jsme neust\u00e1le p\u0159ehl\u00ed\u017eeli \u2013 jak m\u016f\u017eeme zastavit regresi. Podobn\u011b mohou lid\u00e9 pou\u017e\u00edvat integra\u010dn\u00ed nebo koncov\u00e9 testy k ov\u011b\u0159en\u00ed funkcionality, kterou pot\u0159ebujeme k odhalen\u00ed zm\u011bn v interakc\u00edch a pracovn\u00edch toc\u00edch \u2013 jak vizu\u00e1ln\u00edch, tak behavior\u00e1ln\u00edch.<\/p>\n

    Definice vizu\u00e1ln\u00ed regrese je pom\u011brn\u011b konkr\u00e9tn\u00ed \u00fakol, p\u0159i\u010dem\u017e k tomuto procesu lze p\u0159idat jen velmi m\u00e1lo, krom\u011b mo\u017en\u00e1 kontroly, zda je viditeln\u00fd fokus p\u0159i navigaci pomoc\u00ed kl\u00e1vesnice. Daleko zaj\u00edmav\u011bj\u0161\u00ed jsou dv\u011b relativn\u011b nov\u00e9 technologie zam\u011b\u0159en\u00e9 na zp\u0159\u00edstupn\u011bn\u00ed.<\/p>\n

      \n
    1. Accessibility Insights<\/a><\/noindex> je soubor n\u00e1stroj\u016f, kter\u00e9 mohou fungovat jak v prohl\u00ed\u017ee\u010di, tak v r\u00e1mci cyklu sestaven\u00ed\/testov\u00e1n\u00ed za \u00fa\u010delem identifikace probl\u00e9m\u016f.<\/li>\n
    2. Ov\u011b\u0159en\u00ed spr\u00e1vn\u00e9 funkce program\u016f pro \u010dten\u00ed obrazovky bylo obzvl\u00e1\u0161t\u011b slo\u017eit\u00fdm \u00fakolem. S p\u0159\u00edstupem k Accessibility DOM<\/b>, jsme kone\u010dn\u011b z\u00edskali schopnost po\u0159izovat sn\u00edmky aplikace z pohledu zp\u0159\u00edstupn\u011bn\u00ed, velmi podobn\u011b jako to d\u011bl\u00e1me pro vizu\u00e1ln\u00ed testy, a kontrolovat je na regresi.<\/li>\n<\/ol>\n

      \nTak\u017ee ve druh\u00e9 \u010d\u00e1sti p\u0159\u00edb\u011bhu \u2013 p\u0159e\u0161li jsme od \u00fapravy HTML k pr\u00e1ci na vy\u0161\u0161\u00ed \u00farovni abstrakce, zm\u011bnili jsme proces v\u00fdvoje designu a zavedli jsme d\u016fkladn\u00e9 testov\u00e1n\u00ed. Nov\u00e9 procesy, nov\u00e9 technologie a nov\u00e9 \u00farovn\u011b abstrakce zcela zm\u011bnily na\u0161e ch\u00e1p\u00e1n\u00ed zp\u0159\u00edstupn\u011bn\u00ed a toho, co to znamen\u00e1 pracovat v t\u00e9to oblasti.
      \nAle to je teprve za\u010d\u00e1tek.<\/p>\n

      Dal\u0161\u00ed \u201epochopen\u00ed\u201c spo\u010d\u00edv\u00e1 v tom, \u017ee slep\u00ed u\u017eivatel\u00e9 posouvaj\u00ed technologick\u00e9 hranice \u2013 pr\u00e1v\u011b oni maj\u00ed nejv\u011bt\u0161\u00ed prosp\u011bch nejen z d\u0159\u00edve uveden\u00fdch zm\u011bn, ale i z nov\u00fdch p\u0159\u00edstup\u016f a n\u00e1pad\u016f, kter\u00e9 se st\u00e1vaj\u00ed mo\u017en\u00fdmi d\u00edky ML\/AI. Nap\u0159\u00edklad technologie Immersive Reader umo\u017e\u0148uje u\u017eivatel\u016fm l\u00e9pe a jasn\u011bji p\u0159edstavit text. Lze jej p\u0159e\u010d\u00edst nahlas, struktura v\u011bt je gramaticky rozd\u011blena a v\u00fdznamy slov jsou dokonce zobrazeny graficky. To se naprosto nevejde do star\u00e9ho ch\u00e1p\u00e1n\u00ed \u201eud\u011blat to p\u0159\u00edstupn\u00fdm\u201c \u2013 je to funkce u\u017eivatelsk\u00e9 p\u0159\u00edv\u011btivosti, kter\u00e1 pom\u016f\u017ee v\u0161em.<\/p>\n

      S ML\/AI se objevuj\u00ed zcela nov\u00e9 zp\u016fsoby interakce a pr\u00e1ce a jsme r\u00e1di, \u017ee jsme sou\u010d\u00e1st\u00ed n\u00e1sleduj\u00edc\u00edch f\u00e1z\u00ed t\u00e9to pokrokov\u00e9 cesty. Inovace jsou zp\u016fsobeny zm\u011bnou my\u0161len\u00ed \u2013 lidstvo existuje tis\u00edce let, stroje stovky let, webov\u00e9 str\u00e1nky n\u011bkolik des\u00edtek let a smartphony dokonce je\u0161t\u011b m\u00e9n\u011b, technologie by se m\u011bla p\u0159izp\u016fsobit lidem, a ne naopak.<\/p>\n

      P.S. \u010cl\u00e1nek byl p\u0159elo\u017een s drobn\u00fdmi odchylkami od origin\u00e1lu. Jako spoluautor tohoto \u010dl\u00e1nku jsem tyto odchylky konzultoval s Hughem.<\/p>\n

      Pouze registrovan\u00ed u\u017eivatel\u00e9 se mohou \u00fa\u010dastnit ankety. P\u0159ihlaste se<\/a><\/noindex>, pros\u00edm.<\/p>\n

      V\u011bnujete pozornost dostupnosti sv\u00fdch aplikac\u00ed?<\/h2>\n