Interneto svetainių prieinamumo taisymas: WAVE reikalavimus atitinkančios skaitmeninės paslaugos

neįgaliojo vežimėlyje sėdintis žmogus dirba su kolegomis prie nešiojamojo kompiuterio

Kodėl prieinamumas naudingas verslui

Prieinama svetainė nėra malonus priedas. Vis daugiau jurisdikcijų ją reikalauja įstatymu, o tiesioginis poveikis pajamoms akivaizdus. Pasaulyje daugiau nei milijardas žmonių gyvena su kokia nors negalia. Jei jūsų svetainė ar programa jiems neprieinama, prarandate klientus, rizikuojate bylinėtis ir kenkiate prekės ženklo reputacijai.

Europos prieinamumo aktas (EAA), taikomas nuo 2025 m. birželio, reikalauja, kad ES parduodami skaitmeniniai produktai ir paslaugos atitiktų prieinamumo standartus. Jungtinėse Valstijose ieškinių pagal ADA dėl neprieinamų svetainių kasmet daugėja. Kanada, Jungtinė Karalystė, Australija ir daugelis kitų šalių taiko panašias taisykles. Klausimas jau nebe tas, ar investuoti į prieinamumą, o tas, kaip greitai galite jį pasiekti.

Padedame įmonėms visiškai suderinti esamas interneto programas su reikalavimais: remiamės WAVE prieinamumo vertinimo sistema, WCAG 2.2 gairėmis ir praktiniu taisymu, kuris gerokai pranoksta automatinį skenavimą.

Ką apima WAVE prieinamumo vertinimas

WAVE (Web Accessibility Evaluation Tool), kurį sukūrė WebAIM, yra viena patikimiausių ir plačiausiai naudojamų prieinamumo testavimo sistemų. Ji randa problemas, kurių vien automatiniai įrankiai nepastebi, ir pateikia išsamias, konkrečius veiksmus nurodančias pastabas keliose kategorijose:

Klaidos: kritinės problemos, dėl kurių neįgalūs naudotojai negali pasiekti turinio. Trūkstamas alternatyvusis tekstas, tuščios formų etiketės, neveikiančios ARIA nuorodos, nenurodyta dokumento kalba, tuščios nuorodos ar mygtukai.
Kontrasto klaidos: teksto ir fono spalvų deriniai, neatitinkantys WCAG minimalaus kontrasto santykio, todėl silpnaregiams ar spalvų neskiriantiems naudotojams turinį perskaityti sunku arba neįmanoma.
Įspėjimai: galimos problemos, kurias turi peržiūrėti žmogus. Pertekliniai „title“ atributai, įtartinas nuorodų tekstas („spauskite čia“), trūkstama pirmojo lygio antraštė, abipusiai lygiuotas tekstas ir galimai netinkamai naudojami struktūriniai elementai.
Struktūriniai elementai: antraščių hierarchijos, orientyrų sričių, sąrašų, lentelių ir navigacijos struktūrų vertinimas, kad pagalbinės technologijos galėtų teisingai nuskaityti ir perteikti turinį.
ARIA: ARIA vaidmenų, savybių ir būsenų vertinimas. Netinkamas ARIA naudojimas yra viena dažniausių prieinamumo klaidų ir gali padaryti sąsają mažiau prieinamą nei visai be ARIA.

WAVE yra mūsų vertinimo proceso pagrindas, o jį papildome rankiniu testavimu, patikra su ekrano skaitymo programomis ir naršymo vien klaviatūra auditu. Taip pristatome iš tiesų prieinamas programas, o ne tokias, kurios tik praeina automatinį skenavimą.

Kaip taisome

1. Išsamus prieinamumo auditas

Pradedame nuo visos esamos programos audito. Kiekvieną puslapį, interaktyvų komponentą, formą ir medijos elementą vertiname pagal WCAG 2.2 AA lygio kriterijus naudodami WAVE, axe, Lighthouse ir rankinį testavimą su pagalbinėmis technologijomis, tarp jų NVDA, JAWS ir VoiceOver.

Gaunate išsamią audito ataskaitą, kurioje nurodyta kiekviena rasta problema, jos svarba, pažeidžiamas WCAG sėkmės kriterijus ir tiksli vieta jūsų kode.

2. Taisymo planas pagal prioritetus

Ne visos prieinamumo problemos vienodai svarbios. Prioritetus nustatome pagal poveikį naudotojams, teisinę riziką ir įgyvendinimo sudėtingumą. Pirmiausia šaliname kritines klaidas, kurios blokuoja ištisus naudotojų scenarijus. Po jų taisome kontrasto problemas ir trūkstamas etiketes. Vėliau tobuliname struktūrą ir ARIA.

Pateikiame aiškų grafiką, sąmatą ir etapais suskirstytą planą, kad jūsų komanda tiksliai žinotų, ko tikėtis kiekviename etape.

3. Taisymas kodo lygmeniu

Mūsų inžinieriai dirba tiesiogiai jūsų kode. Taisome HTML semantiką, kur reikia, pridedame tinkamus ARIA atributus, sutvarkome antraščių hierarchiją, įdiegiame navigacijos praleidimo nuorodas, užtikriname klaviatūros fokuso valdymą, ištaisome spalvų kontrastą, pridedame alternatyvųjį tekstą ir subtitrus, sutvarkome formų etiketes ir klaidų apdorojimą, pertvarkome komponentus, kad jie veiktų su ekrano skaitymo programomis.

Nenaudojame perdangos valdiklių (overlay) ar automatinių „greito taisymo“ įrankių. Jie sukuria klaidingą atitikties įspūdį ir dažnai patys sukuria naujų kliūčių. Taisome patį išeitinį kodą.

4. Testavimas ir patvirtinimas

Ištaisę kiekvieną puslapį iš naujo patikriname su WAVE, axe ir Lighthouse ir įsitikiname, kad klaidų neliko. Taip pat rankiniu būdu testuojame su ekrano skaitymo programomis NVDA (Windows), VoiceOver (macOS/iOS) ir TalkBack (Android) bei atliekame išsamų naršymo klaviatūra auditą.

Gaunate galutinę atitikties ataskaitą, kurioje užfiksuota, kaip išspręsta kiekviena anksčiau nustatyta problema.

5. Nuolatinė stebėsena ir priežiūra

Prieinamumas nėra vienkartinis projektas. Naujos funkcijos, turinio atnaujinimai ir dizaino pakeitimai gali vėl sugrąžinti problemų. Siūlome nuolatinės stebėsenos paketus: periodinius WAVE skenavimus, regresinį testavimą, programuotojų mokymus ir naujų funkcijų peržiūrą prieš jas paleidžiant.

Ką taisome

Semantinis HTML ir dokumento struktūra

Teisinga antraščių hierarchija (nuo h1 iki h6, tinkamai įdėtos viena į kitą)
Orientyrų sritys (header, nav, main, aside, footer)
Prasmingos sąrašų struktūros ten, kur turinys logiškai sugrupuotas
Tinkamas lentelių žymėjimas su antraštėmis ir pavadinimais duomenų lentelėms
Dokumento kalbos nurodymas

Vaizdai ir medija

Aprašomasis alternatyvusis tekstas informaciniams vaizdams
Tušti alt atributai dekoratyviniams vaizdams
Subtitrai ir stenogramos vaizdo ir garso turiniui
Prieinami SVG su tinkamais vaidmenimis ir etiketėmis

Formos ir interaktyvūs elementai

Su kiekvienu formos lauku susietos etiketės
Aiškūs klaidų pranešimai, susieti su konkrečiais laukais
Prieinami pasirinktiniai komponentai (išskleidžiamieji meniu, modaliniai langai, skirtukai, akordeonai)
Tinkamas fokuso valdymas dinaminiam turiniui

Naršymas klaviatūra

Visiškas valdymas be pelės
Matomi fokuso indikatoriai visuose interaktyviuose elementuose
Logiška tabuliavimo tvarka, atitinkanti vizualų išdėstymą
Navigacijos praleidimo nuorodos
Fokuso sulaikymas modaliniuose languose ir išskleidžiamuosiuose meniu

Spalvos ir vizualinis dizainas

WCAG AA kontrasto santykiai (4,5:1 įprastam tekstui, 3:1 dideliam tekstui)
Spalva perteikiama informacija taip pat pateikiama tekstu ar piktogramomis
Suderinamumas su didelio kontrasto režimu
Sumažinto judesio palaikymas naudotojams, turintiems vestibuliarinių sutrikimų

ARIA įgyvendinimas

Teisingas vaidmenų, būsenų ir savybių naudojimas
Gyvosios sritys (live regions) dinamiškai atnaujinamam turiniui
Prieinami pavadinimai ir aprašai sudėtingiems valdikliams
Netinkamo ar perteklinio ARIA, kuris trukdo naudotis, pašalinimas

Sektoriai, kuriems dirbame

Prieinamumas aktualus kiekvienam sektoriui, tačiau reguliavimo spaudimas ir naudotojų lūkesčiai skiriasi. Ypač daug patirties turime šiose srityse:

El. prekyba ir mažmena: prekių sąrašai, atsiskaitymo procesai, mokėjimo formos ir apsipirkimas mobiliuosiuose įrenginiuose
Finansinės paslaugos: internetinė bankininkystė, draudimo portalai, investavimo platformos ir reguliavimo dokumentacija
Sveikatos priežiūra: pacientų portalai, registracija vizitams, nuotolinės medicinos sąsajos ir sveikatos informacinės sistemos
Švietimas: mokymosi valdymo sistemos, kursų turinys, studentų portalai ir egzaminų platformos
Valstybės ir viešasis sektorius: paslaugos gyventojams, viešosios informacijos portalai ir dokumentų skelbimas
SaaS ir technologijos: informaciniai skydeliai, administravimo panelės, duomenų vizualizavimas ir programuotojų įrankiai
Žiniasklaida ir leidyba: naujienų svetainės, turinio platformos, tinklalaidžių grotuvai ir vaizdo portalai

Kokius atitikties standartus apimame

WCAG 2.2 AA lygis: tarptautinis interneto turinio prieinamumo standartas
Section 508: JAV federaliniai informacinių ir ryšių technologijų prieinamumo reikalavimai
ADA Title III: Amerikos neįgaliųjų įstatymo (Americans with Disabilities Act) reikalavimai viešojo aptarnavimo vietoms, vis dažniau taikomi ir svetainėms
Europos prieinamumo aktas (EAA): visoje ES galiojantys skaitmeninių produktų ir paslaugų reikalavimai, taikomi nuo 2025 m. birželio
EN 301 549: Europos IRT prieinamumo standartas, suderintas su WCAG
AODA: Ontarijo įstatymas dėl prieinamumo neįgaliesiems (Accessibility for Ontarians with Disabilities Act)
DDA: JK Neįgaliųjų diskriminacijos įstatymas (Disability Discrimination Act)

Technologijos

Prieinamumo problemas taisome visose pagrindinėse frontend sistemose ir turinio valdymo sistemose:

React, Next.js, Vue, Angular, Svelte: ARIA taisymai komponentų lygmeniu, fokuso valdymas, klaviatūros įvykių apdorojimas
WordPress, Drupal, Shopify, Magento: taisymai temos lygmeniu, įskiepių prieinamumo peržiūra, šablonų taisymas
Natūraliosios mobiliosios programos (iOS, Android): suderinamumas su VoiceOver ir TalkBack, prieinami lietimo taikiniai, dinaminio šrifto dydžio palaikymas
El. laiškų šablonai: prieinami HTML el. laiškai su tinkama struktūra, alternatyviuoju tekstu ir suderinamumu su ekrano skaitymo programomis

Kodėl verta dirbti su mumis

Jokių perdangos įrankių: taisome jūsų tikrąjį kodą. Perdangos valdikliai tikros atitikties neužtikrina, o teisinis dėmesys jiems vis didėja.
WAVE kompetencija: mūsų komanda naudoja WAVE kaip pagrindinę vertinimo sistemą, o papildo ją axe-core, Lighthouse ir rankiniu testavimu su pagalbinėmis technologijomis.
Požiūris iš programuotojo pusės: dirbame jūsų repozitorijoje, laikomės jūsų kodavimo standartų ir rašome švarius, lengvai prižiūrimus pataisymus, ant kurių jūsų komanda gali toliau kurti.
Nuolatinė pagalba: prieinamumas yra nenutrūkstamas procesas. Siūlome stebėseną, mokymus ir peržiūrą prieš paleidimą, kad problemos nesugrįžtų.
Reguliavimo išmanymas: sekame WCAG atnaujinimus, EAA įgyvendinimo terminus, ADA teismų praktiką ir tarptautinius prieinamumo teisės aktus.

Laukiami rezultatai

Nė vienos WAVE klaidos visuose įvertintuose puslapiuose
Atitiktis WCAG 2.2 AA lygiui
Geresni SEO rezultatai (prieinamumas ir SEO turi daug bendrų reitingavimo veiksnių)
Mažesnė teisinė rizika dėl ADA, EAA ir Section 508 reikalavimų nesilaikymo
Geresnė naudotojo patirtis visiems lankytojams, ne tik turintiems negalią
Dokumentuoti atitikties įrodymai auditams ir viešųjų pirkimų reikalavimams

Pradėkite

Parašykite mums office@c9group.dev ir užsisakykite nemokamą pradinę savo svetainės ar programos prieinamumo peržiūrą. Atliksime WAVE vertinimą, nustatysime svarbiausias problemas ir pateiksime aiškų planą, kaip pasiekti visišką atitiktį.