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

\"Mot
\n
\nFredag \u00e4r slutet p\u00e5 arbetsdagen. D\u00e5liga nyheter kommer alltid p\u00e5 fredag eftermiddagen.<\/p>\n

Du \u00e4r p\u00e5 v\u00e4g att l\u00e4mna kontoret, ett \"ding\" nytt mejl om \u00e4nnu en omorganisation har just kommit in i inkorgen.<\/p>\n

Tack xxxx, yyy fr\u00e5n och med idag kommer du att rapportera till zzzz.
\n\u2026
\nOch teamet Hu kommer att s\u00e4kerst\u00e4lla tillg\u00e5ngen till v\u00e5ra produkter f\u00f6r personer med funktionsneds\u00e4ttningar.<\/i>\n<\/p><\/blockquote>\n

\u00c5h nej! Vad har jag gjort f\u00f6r att f\u00f6rtj\u00e4na detta? Vill de att jag ska g\u00e5? Att st\u00e4lla in sig p\u00e5 ett tacksamt tufft arbete och f\u00f6rs\u00f6ka r\u00e4tta till andra m\u00e4nniskors misstag. Detta kan bara sluta i fiasko\u2026<\/p>\n

S\u00e5 h\u00e4r var tillg\u00e5ngen f\u00f6r n\u00e5gra \u00e5r sedan. Vissa stackare fick jobb att \"rensa\" anv\u00e4ndargr\u00e4nssnittet f\u00f6r att f\u00f6rs\u00f6ka g\u00f6ra det tillg\u00e4ngligt f\u00f6r personer med funktionsneds\u00e4ttningar.
\n<\/a><\/noindex>
\nVad detta egentligen innebar var ganska vagt \u2013 troligen, om du kunde se fokusindikatorn och navigera f\u00e4lten med tabulatortangenten, ha n\u00e5gon alternativ text och ett par beskrivningar av f\u00e4lten, s\u00e5 skulle det anses att din applikation var tillg\u00e4nglig\u2026<\/p>\n

Men pl\u00f6tsligt b\u00f6rjade \"buggar\" dyka upp i en rasande takt.<\/p>\n

Olika sk\u00e4rml\u00e4sare (eng.<\/i> Screen Readers) och webbl\u00e4sare fungerade helt olika.<\/p>\n

Anv\u00e4ndarna klagade p\u00e5 att applikationen var oanv\u00e4ndbar.<\/p>\n

S\u00e5 snart en bugg \u00e5tg\u00e4rdades p\u00e5 ett st\u00e4lle, d\u00f6k en annan upp p\u00e5 ett annat.<\/p>\n

Och att bara byta och r\u00e4tta till anv\u00e4ndargr\u00e4nssnittets misstag kr\u00e4vde titaniska anstr\u00e4ngningar.<\/p>\n

Jag har varit d\u00e4r. Jag \u00f6verlevde, men vi \"lyckades\" inte \u2013 tekniskt sett st\u00e4dade vi mycket, la till mycket beskrivningar av f\u00e4lten, roller och n\u00e5dde n\u00e5gon niv\u00e5 av \u00f6verensst\u00e4mmelse, men ingen var n\u00f6jd. Anv\u00e4ndarna klagade fortfarande p\u00e5 att de inte kunde navigera i applikationen. Chefen klagade fortfarande p\u00e5 det konstanta fl\u00f6det av buggar. Ingenj\u00f6rerna klagade p\u00e5 felaktig uppdragsformulering, utan en klart definierad \"r\u00e4tt\" l\u00f6sning som skulle fungera i alla fall.<\/p>\n

P\u00e5 min v\u00e4g till att f\u00f6rst\u00e5 tillg\u00e4nglighet st\u00f6tte jag p\u00e5 vissa tydligt avsl\u00f6jande \u00f6gonblick.
\nKanske var den f\u00f6rsta insikten att l\u00e4gga till tillg\u00e4nglig funktionalitet ovanp\u00e5 en f\u00e4rdig produkt \u00e4r sv\u00e5rt. \u00c4nnu sv\u00e5rare \u00e4r det att \u00f6vertyga chefer om att det verkligen \u00e4r oerh\u00f6rt sv\u00e5rt! Nej, det handlar inte bara om att \"l\u00e4gga till n\u00e5gra taggar\" s\u00e5 att anv\u00e4ndargr\u00e4nssnittet fungerar utm\u00e4rkt. Nej, det \u00e4r om\u00f6jligt att avsluta p\u00e5 tre veckor, \u00e4ven tre m\u00e5nader \u00e4r f\u00f6r lite.
\nMitt n\u00e4sta \u00f6gonblick av sanning kom n\u00e4r jag faktiskt s\u00e5g hur blinda anv\u00e4ndare anv\u00e4nde v\u00e5r app. Det \u00e4r s\u00e5 annorlunda \u00e4n att bara se felmeddelanden.<\/p>\n

Jag kommer att \u00e5terkomma till detta g\u00e5ng p\u00e5 g\u00e5ng, men n\u00e4stan alla v\u00e5ra \"antaganden\" om hur m\u00e4nniskor anv\u00e4nde v\u00e5r app var felaktiga.<\/p>\n

Navigera genom ett komplext anv\u00e4ndargr\u00e4nssnitt med hj\u00e4lp av tangenter Tab\/Shift+Tab<\/code> \u2013 \u00e4r uselt! Vi beh\u00f6ver n\u00e5got b\u00e4ttre. Tangentkombinationer, rubriker.<\/p>\n

Att tappa fokus vid \u00e4ndring av UI \u00e4r v\u00e4l inte en stor fr\u00e5ga? L\u00e5t oss t\u00e4nka en g\u00e5ng till \u2013 det \u00e4r vansinnigt f\u00f6rvirrande.<\/p>\n

Jag fortsatte, arbetade ett tag med olika projekt, och sedan b\u00f6rjade vi ett nytt projekt med ett komplext anv\u00e4ndargr\u00e4nssnitt och en tydlig avsikt att \u00e4ntligen denna g\u00e5ng f\u00e5 r\u00e4tt tillg\u00e4nglighet.<\/p>\n

S\u00e5 vi tog ett steg tillbaka och tittade p\u00e5 hur vi kan genomf\u00f6ra detta p\u00e5 ett annat s\u00e4tt och lyckas, och g\u00f6ra sj\u00e4lva arbetsprocessen intressant!<\/p>\n

Ganska snabbt kom vi fram till n\u00e5gra slutsatser:<\/p>\n

    \n
  1. Vi ville inte att de som utvecklar anv\u00e4ndargr\u00e4nssnitt skulle bekymra sig \u00f6ver aria-etiketter\/roller och naturligtvis HTML-strukturen f\u00f6r komponenterna. Vi beh\u00f6vde f\u00f6rse dem med r\u00e4tt komponenter, d\u00e4r tillg\u00e4ngligheten \u00e4r inbyggd fr\u00e5n b\u00f6rjan.<\/li>\n
  2. Tillg\u00e4nglighet == Anv\u00e4ndbarhet \u2013 dvs. det \u00e4r inte bara en teknisk uppgift. Vi beh\u00f6vde f\u00f6r\u00e4ndra hela designprocessen och se till att tillg\u00e4nglighet beaktas och diskuteras innan designen av anv\u00e4ndargr\u00e4nssnittet p\u00e5b\u00f6rjas. Det \u00e4r viktigt att t\u00e4nka p\u00e5 hur anv\u00e4ndare kan uppt\u00e4cka n\u00e5gon funktionalitet, hur de kommer att navigera och hur \"h\u00f6gerklick\" med tangentbordet kommer att fungera. Tillg\u00e4nglighet b\u00f6r vara en integrerad del av designprocessen \u2013 f\u00f6r vissa anv\u00e4ndare \u00e4r det n\u00e5got mycket mer \u00e4n bara utseendet p\u00e5 appen.<\/li>\n
  3. Fr\u00e5n b\u00f6rjan ville vi f\u00e5 \u00e5terkoppling fr\u00e5n blinda och andra anv\u00e4ndare med funktionshinder om hur l\u00e4ttanv\u00e4nda applikationen \u00e4r.<\/li>\n
  4. Vi beh\u00f6vde verkligen bra s\u00e4tt att f\u00e5nga upp tillg\u00e4nglighetsregressioner.<\/li>\n<\/ol>\n

    \nUr ett ingenj\u00f6rsperspektiv k\u00e4ndes f\u00f6rsta delen ganska rolig \u2013 att utveckla arkitekturen och implementera komponentbiblioteket. Och s\u00e5 var det verkligen.<\/p>\n

    Genom att ta ett steg tillbaka och se p\u00e5 exempel p\u00e5 ARIA<\/a><\/noindex> N\u00e4r vi betraktar detta som ett designproblem snarare \u00e4n ett \"anpassningsproblem\", har vi inf\u00f6rt vissa abstraktioner. Komponenten har en 'Struktur' (best\u00e5r av HTML-element) och ett 'Beteende' (hur det interagerar med anv\u00e4ndaren). Till exempel, i de nedan angivna fragmenten har vi en enkel oordnad lista. N\u00e4r vi l\u00e4gger till 'beteende' till listan tillkommer motsvarande roller s\u00e5 att den beter sig som en lista. P\u00e5 samma s\u00e4tt g\u00f6r vi f\u00f6r menyn.<\/p>\n

    \"Mot
    \n
    \nI sj\u00e4lva verket l\u00e4ggs det inte bara till roller h\u00e4r, utan \u00e4ven h\u00e4ndelseshanterare f\u00f6r navigering med tangentbord.<\/p>\n

    Det ser mycket mer ordnat ut. Om vi kunde f\u00e5 en ren uppdelning mellan dem skulle det vara oviktigt hur strukturen skapades, vi skulle kunna till\u00e4mpa beteenden p\u00e5 den och f\u00e5 r\u00e4tt tillg\u00e4nglighet.<\/p>\n

    I praktiken kan detta ses p\u00e5 adressen https:\/\/stardust-ui.github.io\/react\/<\/a><\/noindex> \u2013 UX-biblioteket React<\/a><\/noindex>, som designas och implementeras med tillg\u00e4nglighet i \u00e5tanke fr\u00e5n b\u00f6rjan.<\/p>\n

    Den andra delen \u2013 att f\u00f6r\u00e4ndra tillv\u00e4gag\u00e5ngss\u00e4ttet och processerna kring designen skr\u00e4mde mig f\u00f6rst: blyga ingenj\u00f6rer som f\u00f6rs\u00f6ker driva organisatoriska f\u00f6r\u00e4ndringar slutar inte alltid bra, men det visade sig vara ett av de mest intressanta omr\u00e5dena d\u00e4r vi har gjort ett betydande bidrag till processen. Kort sagt hade vi f\u00f6ljande process: ny funktionalitet utvecklades av ett team, sedan analyserade\/itererade v\u00e5r grupp av ledare detta f\u00f6rslag, och sedan, efter godk\u00e4nnande, \u00f6verl\u00e4mnades designen vanligtvis till ingenj\u00f6rsteamet. I det h\u00e4r fallet '\u00e4gd' ingenj\u00f6rsteamet faktiskt tillg\u00e4nglighetsfunktionaliteten, eftersom de m\u00e5ste l\u00f6sa alla relaterade problem.<\/p>\n

    I b\u00f6rjan var det en ganska sv\u00e5r uppgift \u2013 att f\u00f6rklara att tillg\u00e4nglighet och anv\u00e4ndbarhet \u00e4r intimt sammanl\u00e4nkade och att detta m\u00e5ste beaktas redan p\u00e5 designstadiet, annars ledde det till stora f\u00f6r\u00e4ndringar och omdefiniering av vissa roller. Tack vare st\u00f6det fr\u00e5n ledningen och viktiga akt\u00f6rer fick vi fram denna id\u00e9 och satte den i verket s\u00e5 att designen skulle kontrolleras f\u00f6r tillg\u00e4nglighet och anv\u00e4ndbarhet innan de presenterades f\u00f6r ledningen.<\/p>\n

    Och dessa synpunkter var oerh\u00f6rt v\u00e4rdefulla f\u00f6r alla \u2013 det var fantastiskt som en \u00f6vning i kunskapsutbyte\/information om hur anv\u00e4ndarna interagerar med webbapplikationer, vi identifierade m\u00e5nga problemomr\u00e5den i anv\u00e4ndargr\u00e4nssnittet innan de byggdes, utvecklingsteamen har nu mycket b\u00e4ttre specifikationer f\u00f6r b\u00e5de visuella och beteendem\u00e4ssiga aspekter av designen. Riktiga diskussioner \u00e4r roliga, energiska och passionerade diskussioner om tekniska aspekter och interaktioner.<\/p>\n

    Vi skulle kunna g\u00f6ra detta arbete \u00e4nnu b\u00e4ttre om vi hade blinda anv\u00e4ndare och anv\u00e4ndare med funktionshinder med oss p\u00e5 dessa (eller kommande) m\u00f6ten \u2013 det var sv\u00e5rt att organisera, men nu samarbetar vi verkligen med b\u00e5de lokala organisationer f\u00f6r blinda och f\u00f6retag som erbjuder extern testning f\u00f6r att kontrollera fl\u00f6det i tidiga utvecklingsstadier \u2013 b\u00e5de p\u00e5 komponentniv\u00e5 och fl\u00f6desniv\u00e5.<\/p>\n

    Nu har ingenj\u00f6rerna ganska detaljerade specifikationer, tillg\u00e4ngliga komponenter som de kan anv\u00e4nda f\u00f6r implementation och ett s\u00e4tt att kontrollera fl\u00f6det. Dels har erfarenheten l\u00e4rt oss vad vi st\u00e4ndigt missade \u2013 hur vi kan f\u00f6rhindra regression. P\u00e5 liknande s\u00e4tt kan folk anv\u00e4nda integrations- eller genomg\u00e5ende tester f\u00f6r att kontrollera funktionaliteten, vilket vi beh\u00f6ver f\u00f6r att uppt\u00e4cka f\u00f6r\u00e4ndringar i interaktioner och fl\u00f6den \u2013 b\u00e5de visuella och beteendem\u00e4ssiga.<\/p>\n

    Definitionen av visuell regression \u00e4r en ganska specifik uppgift, det finns egentligen inte mycket mer att till\u00e4gga till denna process, f\u00f6rutom m\u00f6jligen att kontrollera om fokus \u00e4r synligt n\u00e4r man navigerar med tangentbordet. Mer intressanta \u00e4r tv\u00e5 relativt nya teknologier f\u00f6r att arbeta med tillg\u00e4nglighet.<\/p>\n

      \n
    1. Accessibility Insights<\/a><\/noindex> \u00e4r en upps\u00e4ttning verktyg som kan k\u00f6ras b\u00e5de i webbl\u00e4saren och inom bygg-\/testcykeln f\u00f6r att identifiera problem.<\/li>\n
    2. Att kontrollera att sk\u00e4rml\u00e4sarens program fungerar korrekt har varit en s\u00e4rskilt sv\u00e5r uppgift. Med introduktionen av Accessibility DOM<\/b>, har vi \u00e4ntligen f\u00e5tt m\u00f6jlighet att ta snappbilder av applikationen ur tillg\u00e4nglighetssynvinkel, mycket liknande hur vi tar dem f\u00f6r visuella tester, och kontrollerar dem f\u00f6r regression.<\/li>\n<\/ol>\n

      \nS\u00e5 i den andra delen av historien har vi flyttat fr\u00e5n att redigera HTML-kod till att arbeta p\u00e5 en h\u00f6gre abstraktionsniv\u00e5, \u00e4ndrat designprocessen och inf\u00f6rt noggrant testande. Nya processer, nya teknologier och nya niv\u00e5er av abstraktion har helt f\u00f6r\u00e4ndrat f\u00f6rst\u00e5elsen av tillg\u00e4nglighet och vad det betyder att arbeta inom detta omr\u00e5de.
      \nMen det h\u00e4r \u00e4r bara b\u00f6rjan.<\/p>\n

      Den n\u00e4sta \"f\u00f6rst\u00e5elsen\" \u00e4r att blinda anv\u00e4ndare driver fram teknik \u2013 de \u00e4r just de som f\u00e5r st\u00f6rst nytta inte bara av de f\u00f6r\u00e4ndringar vi tidigare har beskrivit, utan av att nya tillv\u00e4gag\u00e5ngss\u00e4tt och id\u00e9er blir m\u00f6jliga med hj\u00e4lp av ML\/AI. Till exempel, Immersive Reader-teknologi g\u00f6r det enklare och mer f\u00f6rst\u00e5eligt f\u00f6r anv\u00e4ndare att ta till sig text. Den kan l\u00e4sas h\u00f6gt, meningsstrukturen delas grammatiskt och till och med betydelsen av ord visas grafiskt. Det h\u00e4r passar absolut inte in i den gamla uppfattningen av att \"g\u00f6ra det tillg\u00e4ngligt\" \u2013 det \u00e4r en anv\u00e4ndbarhetsfunktion som hj\u00e4lper alla.<\/p>\n

      Med ML\/AI kommer helt nya s\u00e4tt att interagera och arbeta, och vi \u00e4r glada \u00f6ver att vara en del av de kommande stegen p\u00e5 denna banbrytande v\u00e4g. Innovationer kommer genom f\u00f6r\u00e4ndrad tankes\u00e4tt \u2013 m\u00e4nskligheten har funnits i \u00e5rtusenden, maskiner i hundratals \u00e5r, webbplatser i n\u00e5gra decennier, och smartphones \u00e4nnu mindre, teknologin m\u00e5ste anpassa sig till m\u00e4nniskorna, inte tv\u00e4rtom.<\/p>\n

      P.S. Artikeln har \u00f6versatts med sm\u00e5 avvikelser fr\u00e5n originaltexten. Som medf\u00f6rfattare till denna artikel har jag diskuterat dessa avvikelser med Hugh.<\/p>\n

      Endast registrerade anv\u00e4ndare kan delta i omr\u00f6stningen. Logga in<\/a><\/noindex>, tack.<\/p>\n

      Fokuserar du p\u00e5 tillg\u00e4ngligheten av dina applikationer?<\/h2>\n