Geriausias vieno puslapio taikomųjų programų (SPA) pritaikymo neįgaliesiems praktika – „SitePoint“.

Šiandieniniai žiniatinklio naudotojai tikisi, kad jų internetinė patirtis bus greita, sklandi ir įtraukianti. Vieno puslapio taikomosios programos (SPA) atitinka šiuos lūkesčius, teikdamos sklandžias, į programas panašias funkcijas, kurios padidina naudotojų įtraukimą neįkeliant puslapio iš naujo.

Tačiau dinamiškas SAT pobūdis kelia prieinamumo problemų, dėl kurių negalią turintys naudotojai, ypač tie, kurie naudojasi pagalbinėmis technologijomis, gali būti neįtraukti. Šiame straipsnyje sužinosite keletą geriausių praktikos pavyzdžių, kaip spręsti šiuos iššūkius, kad visi vartotojai, nepaisant jų gebėjimų, būtų geriau naudojami.

Kas yra SPA?

Įsivaizduokite, kad skaitote knygą, kurioje, užuot vartęs puslapį, tekstas ir vaizdai tiesiog pasikeičia puslapyje, kuriame jau esate. Panašiai SPA veikia ir žiniatinklyje, nes atnaujina turinį realiuoju laiku, neperkraunant viso puslapio. Tai tarsi išmaniajame telefone naudojant tokią programėlę kaip „Google“ žemėlapiai, kur galite priartinti, ieškoti vietų arba perjungti rodinius nepaleidę iš naujo.

Norėdami tai geriau suprasti, pagalvokite apie tradicines svetaines, pavyzdžiui, bibliotekų sistemą. Kiekvieną kartą, kai jums reikia naujos knygos (tinklalapio), turite grįžti prie stalo (serverio), paprašyti jos ir palaukti, kol bibliotekininkas (serverio procesas) ją suras ir atneš. Šis procesas vyksta kiekvieną kartą, kai prašote naujos knygos, o tai gali pareikalauti laiko ir išteklių.

Priešingai, SPA veikia kaip su savimi turėti knygų vežimėlį, kuris stebuklingai gauna bet kokią norimą perskaityti knygą tiesiai nuo stalo, jums nereikia vaikščioti pirmyn ir atgal. Kai pirmą kartą „įsiregistruosite“ prie stalo (kai SPA pirmą kartą įkeliama), visos kitos operacijos įvyksta nepastebimai ir akimirksniu, todėl galėsite mėgautis nenutrūkstamu skaitymo (naršymo) patirtimi be pertrūkių.

Prieinamumo iššūkiai SPA

Kai kuriate SPA, sukuriate dinamišką ir interaktyvią patirtį, kuri gali imituoti darbalaukio programos sklandumą ir greitį. Tačiau ši moderni žiniatinklio architektūra kelia unikalių pritaikymo neįgaliesiems iššūkių, kurie gali turėti įtakos tam, kaip kai kurie vartotojai sąveikauja su jūsų programa. Peržiūrėkime kai kuriuos iš jų, kad suprastume juos iš vartotojo perspektyvos.

1. Dinaminiai turinio atnaujinimai

Įprastose svetainėse įkėlus puslapį iš naujo suaktyvinamos pagalbinės technologijos, kurios leidžia iš naujo nuskaityti puslapį, kad vartotojai sužinotų apie naują turinį. SPA, naudodamiesi „JavaScript“ sistemomis, realiuoju laiku gauna ir atnaujina puslapio dalis. Šis mechanizmas palaiko judrią vartotojo sąsają, tačiau automatiškai neperduoda ekrano skaitytuvų ar kitų pagalbinių įrankių pasikeitimų.

Apsvarstykite vartotoją, kuris turi regėjimo negalią ir naudojasi ekrano skaitytuvu, kad galėtų naršyti prekybos svetainėje. Jie spusteli produkto „įdėti į krepšelį“, kuris dinamiškai atnaujina pirkinių krepšelio piktogramą puslapyje, kad būtų rodoma viena prekė. Tačiau jei tinkami ARIA tiesioginiai atributai neįdiegti SPA, ekrano skaitytuvas gali nepaskelbti šio atnaujinimo. Dėl to naudotojas nėra tikras, ar jo veiksmas pavyko, ir gali sulaukti „įniršio paspaudimų“ bei varginančių apsipirkimo.

2. Fokuso valdymas

Loginio fokusavimo srauto palaikymas užtikrina, kad klaviatūros ir ekrano skaitytuvo naudotojai gali efektyviai naršyti žiniatinklio turinį. Tradicinis žiniatinklio naršymas iš prigimties perkelia dėmesį į kiekvieną naują puslapį įkeliant, užtikrinant aiškų naršymo kelią. SPA gali sutrikdyti šį srautą, atnaujindami turinį be šių natūralių fokusavimo perėjimų, o tai gali sukelti painiavą ir nepasiekiamą vartotojo patirtį.

Toliau pateiktame „JavaScript“ kodo fragmente parodytas modalinio lango atidarymas ir uždarymas:

function openModal() {
  document.getElementById('myModal').style.display = 'block';
  document.getElementById('closeModalButton').focus();
}

function closeModal() {  document.getElementById('myModal').style.display = 'none';
}

Nors židinys tinkamai perkeliamas į modalo uždarymo mygtuką, kai jis atidaromas, uždarius modalą nepavyksta grįžti į atitinkamą elementą, todėl klaviatūros naudotojai nežino, kokia yra dabartinė jų padėtis puslapyje.

Žiūrint iš naudotojo perspektyvos, modalas užsidaro, bet fokusas atrodo „prarastas“, galbūt todėl, kad jis vis dar yra ant dabar paslėpto uždarymo mygtuko. Todėl jiems gali būti sunku grįžti į pagrindinį turinį, o tai gali sukelti nusivylimą ir pabloginti sąveikos patirtį.

3. Naršyklės istorijos valdymas

Naršyklės istorijos mechanizmas automatiškai seka kiekvieną puslapio įkėlimą tradicinėse kelių puslapių programose. Kita vertus, SPA paprastai įkeliami vieną kartą, o „JavaScript“ sistema apdoroja visus vėlesnius turinio pakeitimus. Tai lemia vartotojo patirtį, kai mygtukas „Atgal“ ne visada veikia taip, kaip tikėtasi, arba visai negrįžta atgal arba peršoka kelis žingsnius per visas dinamiškai įkeltas būsenas.

Praktinis pavyzdys yra tada, kai vartotojas perskaito straipsnį SPA pagrįstoje naujienų platformoje ir spustelėja keletą susijusių istorijų per vidines nuorodas. Tikėdamasis grįžti į pradinį straipsnį, vartotojas spusteli naršyklės mygtuką Atgal, bet netikėtai atsiduria pagrindiniame puslapyje, o ne pirminiame straipsnyje.

Pažiūrėkime kodo fragmentą, kuris iliustruoja tai:

function changeView(itemId) {
  const contentView = document.getElementById('contentView');
  fetch(`/api/content/${itemId}`)
    .then(response => response.json())
    .then(content => {
      contentView.innerHTML = content.html;
    });
}

Čia turinio rodinys atnaujinamas pagal vartotojo pasirinkimą, bet naršyklės istorija neatnaujinama. Ši priežiūra reiškia, kad paspaudus mygtuką „Atgal“ po kelių pasirinkimų bus praleistos visos tarpinės turinio būsenos ir vartotojas gali būti visiškai pašalintas iš SPA.

Ši nenuosekli naršymo patirtis gali iškreipti ir sugadinti naudotojus, ypač tuos, kurie naudojasi klaviatūros navigacija ir standartiniais naršyklės nurodymais, kad suprastų savo vietą programoje. Pažinimo negalią turintiems vartotojams dėl tokio netikėto elgesio gali būti sunku arba neįmanoma efektyviai naudotis svetaine.

4. Pradinė apkrova

SPA architektūra sutelkta į koncepciją, kaip į vieną didelį paketą įkelti visą arba daugumą programos išteklių – scenarijų, stilių lentelių ir konkrečių sistemos failų. Šis metodas užtikrina, kad po pradinio įkėlimo visoms tolimesnėms sąveikoms reikės minimalių papildomų duomenų gavimo, o tai pagerina naudotojo patirtį. Tačiau pradinė apkrova gali būti didelė, pritraukiant didelius „JavaScript“ failus ir kitus išteklius, kol programa tampa tinkama naudoti.

Įsivaizduokite vartotoją, pirmą kartą apsilankiusį SPA mobiliuoju įrenginiu su ribotu duomenų ryšiu. SPA bando įkelti 100 MB JavaScript, CSS ir medijos failų prieš pradėdamas veikti. Jei šie failai nėra optimizuoti arba suskirstyti į valdomus gabalus, vartotojas gali ilgai laukti arba net gali įvykti skirtojo laiko klaida, o tai atgrasys nuo tolesnės sąveikos.

Dėl šio pradinio delsimo gali padidėti atmetimo rodikliai, nes pirmą kartą apsilankę lankytojai gali nelaukti, kol bus baigtas įkėlimas. Tai ypač sudėtinga regionų, kuriuose interneto greitis lėtesnis, arba mobiliųjų tinklų naudotojams, kuriems SPA gali pasirodyti praktiškai nepasiekiamas.

Geriausia vieno puslapio taikomųjų programų pritaikymo neįgaliesiems praktika

Siekiant užtikrinti, kad SPA būtų pasiekiami ir visiems būtų teikiama teigiama vartotojo patirtis, labai svarbu įgyvendinti tam tikrą geriausią praktiką. Šios strategijos ne tik pagerina naudojimą žmonėms su negalia, bet ir pagerina bendrą programos kokybę.

1. Įdiekite tinkamus ARIA vaidmenis ir ypatybes

ARIA vaidmenys ir savybės užpildo atotrūkį tarp tradicinių HTML elementų ir sudėtingo, dinamiško turinio, būdingo SPA. Pagalbinių technologijų naudotojams jie praneša apie vartotojo sąsajos elementų vaidmenis, būsenas ir savybes, kad jie suprastų, ką kiekvienas elementas veikia ir kaip su juo sąveikauti.

Ką daryti:

• Naudokite aria-live="polite" automatiškai atnaujinamam turiniui, pvz., pokalbių pranešimams ar akcijų kainų žymėjimui, siekiant užtikrinti, kad naujiniai būtų paskelbti netrukdant naudotojui.
• Taikyti aria-expanded į išskleidžiamuosius meniu, kad parodytų, ar jie yra atidaryti, ar uždaryti, o skirtukuose pasirinkta arija, kad būtų nurodyti aktyvūs elementai.
• Naudokite aria-label ir aria-labelledby pateikti prieinamus elementų pavadinimus, ypač kai vaizdinės etiketės nėra standartinės arba elementui reikalingas papildomas kontekstas.

2. Užtikrinkite patikimą klaviatūros navigaciją

Prieinamumas prie klaviatūros yra labai svarbus judėjimo negalią turintiems naudotojams, kurie naudojasi klaviatūromis ar kitais įvesties įrenginiais. Visiškai klaviatūra naršoma svetainė yra pagrindinis prieinamumo reikalavimas.

Ką daryti:

• Įsitikinkite, kad pasirinktiniai valdikliai ir modaliniai langai užfiksuoja ir atleidžia fokusavimą logiška tvarka. Įdiekite židinio fiksavimą modaliniuose dialogo languose, kad klaviatūros naudotojas liktų fokusuojamas dialogo lange, kai jis atidarytas.
• Puslapio pradžioje pateikite „pereiti prie turinio“ nuorodas, kad naudotojai galėtų apeiti pasikartojančias naršymo nuorodas.
• Pasiūlykite sparčiuosius klavišus bendriems veiksmams, kurie gali žymiai padidinti klaviatūros naršymo efektyvumą.

3. Atidžiai tvarkykite programos būseną ir istoriją

Tinkamas būsenos ir istorijos valdymas padeda vartotojams suprasti, kur jie yra programoje, ir sėkmingai ją naršyti. Tai ypač svarbu vartotojams, turintiems pažinimo sutrikimų ir tiems, kurie pasitiki pažįstamais žiniatinklio naršymo modeliais.

Ką daryti:

• Naudokite history.pushState ir history.popState tvarkyti naršyklės istoriją. Šis metodas leidžia vartotojams naršyti SPA naudojant naršyklės mygtukus atgal ir pirmyn taip, kad būtų imituojama kelių puslapių svetainė.
• Užtikrinkite, kad naudotojui naršant atgal arba pirmyn būtų tiksliai atkurtas puslapio rodinys arba būsena, įskaitant fokusavimą, slinkimo padėtį ir dinamiškai įkeltą turinį.

4. Optimizuokite pradinį įkėlimo laiką

Ilgas įkėlimo laikas gali atbaidyti vartotojus, įskaitant tuos, kurie turi pažinimo negalią, kurie gali suvokti, kad svetainė nereaguoja. Norint to išvengti, labai svarbu optimizuoti puslapio įkėlimo laiką, kad būtų padidintas pasiekiamumas ir naudotojų išlaikymas.

Ką daryti:

• Sumažinkite ir suglaudinkite JavaScript ir CSS failus. Grafikai, kurią reikia greitai įkelti, naudokite efektyvius, modernius vaizdo formatus, pvz., WebP.
• Įkelkite scenarijus asinchroniškai, kad neblokuotumėte svarbaus turinio pateikimo. Suteikite pirmenybę kritiniams ištekliams ir atidėkite mažiau svarbių išteklių iki pradinio įkėlimo.

5. Naudokite progresyvų tobulinimą

Laipsniškas tobulinimas skirtas pagrindiniam turiniui ir funkcionalumui pirmiausia pateikti visiems vartotojams, neatsižvelgiant į jų naršyklės galimybes ar nustatymus. Šis metodas užtikrina prieinamumą vartotojams, turintiems senesnes technologijas arba tiems, kurie išjungia „JavaScript“.

Ką daryti:

• Sukurkite pagrindines funkcijas naudodami paprastą HTML ir patobulinkite naudodami CSS ir JavaScript. Užtikrinkite, kad kiekvienas vartotojo veiksmas, teikiantis svarbią informaciją ar paslaugas, veiktų be JavaScript.
• Išbandykite programą išjungę „JavaScript“. Užtikrinkite, kad vartotojai vis tiek galėtų pasiekti visą svarbiausią turinį ir atlikti esmines užduotis.

6. Reguliariai atlikite prieinamumo testavimą

Nuolatinis testavimas padeda nustatyti ir pašalinti prieinamumo kliūtis anksti ir viso produkto kūrimo proceso metu. Ši praktika užtikrina atitiktį prieinamumo standartams ir pagerina bendrą vartotojo patirtį.

Ką daryti:

• Integruokite įrankius, pvz., WAVE, Google Lighthouse arba ARIA, į savo kūrimo ir CI / CD vamzdynus, kad automatiškai pastebėtumėte įprastas pritaikymo neįgaliesiems problemas.
• Įtraukite tikrus vartotojus, ypač tuos, kurie naudoja pagalbines technologijas, į tinkamumo testavimo seansus. Jų atsiliepimai yra neįkainojami nustatant praktines problemas, kurių gali nepastebėti automatiniai įrankiai.
• Reguliariai išbandykite programą naudodami populiarius ekrano skaitytuvus, pvz., NVDA, JAWS ar VoiceOver, kad suprastumėte, kaip jūsų programa skamba regėjimo negalią turintiems vartotojams.

Išvada

Kaip kūrėjas ar dizaineris turite rasti būdų, kaip savo žiniatinklio projektuose sujungti pažangiausias funkcijas su esminėmis pritaikymo neįgaliesiems praktikomis. Nors šis vadovas yra geras atspirties taškas, reikia daug daugiau sužinoti apie visiškai prieinamų SPA kūrimą.

Jei norite pasinerti giliau, apsvarstykite galimybę ištirti tokius išteklius kaip žiniatinklio turinio prieinamumo gairės (WCAG) ir ARIA kūrimo praktikos vadovas. Jie gali pasiūlyti išsamių įžvalgų ir gairių, padėsiančių užtikrinti, kad jūsų programos atitiktų teisinius standartus ir būtų tikrai prieinamos visiems naudotojams.