Kaip pritaikyti svetainę žmonėms su negalia: 12 patikrinimų pagal WCAG 2.2

Ką reiškia prieinama svetainė?

Prieinama svetainė – tokia, kurią gali suvokti, valdyti ir suprasti kuo daugiau žmonių, nepriklausomai nuo regos, klausos, judėjimo ar pažinimo galimybių. W3C rengiamos WCAG gairės (angl. Web Content Accessibility Guidelines) reikalavimus skirsto pagal keturis principus.

• Suvokiama: informaciją galima pamatyti arba išgirsti – tekstas kontrastingas, paveikslėliai aprašyti, vaizdo įrašai turi subtitrus.
• Valdoma: visus veiksmus galima atlikti klaviatūra, mygtukai pakankamai dideli, niekas nedingsta per greitai.
• Suprantama: tekstas aiškus, navigacija nuosekli, formos paaiškina klaidas.
• Patikima: kodas parašytas taip, kad jį teisingai perskaitytų naršyklės ir pagalbinės technologijos, pvz., ekrano skaitytuvai.

Prieinamumas padeda ne tik neregiams ar kurtiesiems, bet ir vyresnio amžiaus žmonėms ar tiems, kurie skaito telefone ryškioje saulėje. Daugeliui el. parduotuvių, parduodančių vartotojams, tai ir teisinė pareiga – apie ją rašome straipsnyje „Europos prieinamumo aktas: ar jūsų svetainė ir el. parduotuvė turi būti pritaikytos?“.

1. Ar teksto ir fono kontrastas pakankamas?

Įprasto teksto ir fono kontrastas turi būti ne mažesnis kaip 4,5:1, stambaus teksto (nuo 24 px arba nuo 18,7 px pusjuodžiu šriftu) – ne mažesnis kaip 3:1 (WCAG 1.4.3). Mygtukų ir formų laukų rėmeliams bei svarbioms piktogramoms reikia bent 3:1 kontrasto su gretimomis spalvomis (1.4.11).

Kaip rodo mėlyni atspalviai, ryški prekės ženklo spalva dažnai tinka stambioms antraštėms, piktogramoms ir rėmeliams, bet ne smulkiam tekstui – nei ant balto fono, nei baltu užrašu ant tokios spalvos mygtuko. Smulkiam tekstui parenkamas tamsesnis tos pačios spalvos atspalvis. Kontrastą patikrinsite „WebAIM Contrast Checker“ įrankiu arba naršyklės kūrėjo įrankiais.

2. Ar tekstą galima padidinti ir ar jis prisitaiko prie ekrano?

WCAG nenurodo, kokį šriftą ar dydį naudoti, tačiau reikalauja, kad tekstą būtų galima padidinti iki 200 % neprarandant turinio (1.4.4), o puslapis 320 px pločio ekrane būtų skaitomas be horizontalaus slinkimo (1.4.10). Taisyklės apie 12 dydžio šriftą ar „Times New Roman“ skirtos spausdintiems dokumentams, ne svetainėms.

Dar vienas kriterijus (1.4.12) – tekstas neturi išlįsti ar pasislėpti, jei naudotojas padidina tarpus: eilučių aukštį iki 1,5 šrifto dydžio, tarpus tarp pastraipų iki 2, tarp raidžių iki 0,12, tarp žodžių iki 0,16 šrifto dydžio. Praktiškai tai reiškia: šrifto dydis nurodomas santykiniais vienetais (rem, em), blokams nenustatomas fiksuotas aukštis, o tekstas nededamas į paveikslėlius.

3. Ar antraštės ir puslapio sritys pažymėtos teisingai?

Ekrano skaitytuvų naudotojai puslapį dažnai „perbėga“ antraštėmis, todėl jos turi atspindėti tikrą struktūrą: viena H1 su puslapio tema, po jos H2 skyriams ir H3 poskyriams, be praleistų lygių. Lygis parenkamas pagal prasmę, ne pagal šrifto dydį.

• Sritys pažymėtos elementais <header>, <nav>, <main> ir <footer> – ekrano skaitytuvas leidžia peršokti tiesiai į jas.
• Puslapio pradžioje yra nuoroda „Pereiti prie turinio“, kad nereikėtų kiekviename puslapyje iš naujo pereiti viso meniu (2.4.1).
• Kiekvienas puslapis turi savą pavadinimą naršyklės skirtuke (2.4.2), o kodas nurodo kalbą lang="lt" (3.1.1), kad ekrano skaitytuvas skaitytų lietuviškai.

4. Ar paveikslėliai turi tinkamą alternatyvųjį tekstą?

Alternatyvusis tekstas (alt) perteikia paveikslėlio informaciją tiems, kurie jo nemato. Jei paveikslėlis informatyvus, alt tekstas trumpai pasako, ką jis parodo ar kokia jo paskirtis. Jei paveikslėlis dekoratyvus, alt atributas paliekamas tuščias (alt=""), kad ekrano skaitytuvas jį praleistų (1.1.1).

5. Ar informacija perteikiama ne vien spalva?

Spalva negali būti vienintelis būdas ką nors pasakyti (1.4.1). Daltonizmą turintis ar ekrano skaitytuvu besinaudojantis žmogus nesupras, kad laukas užpildytas klaidingai, jei jis tik paraudo, ir neatskirs nuorodos nuo teksto, jei ji skiriasi tik spalva.

• Nuorodos tekste pabrauktos arba kitaip išskirtos ne tik spalva.
• Klaidingai užpildytas formos laukas pažymimas ir tekstu, pvz., „Įveskite telefono numerį“.
• Diagramose linijos ar stulpeliai turi užrašus, o ne tik skirtingas spalvas.
• Prekės spalvos pasirinkimas turi tekstinį pavadinimą, ne vien spalvotą kvadratėlį.

6. Ar lentelės ir diagramos suprantamos ekrano skaitytuvui?

Duomenų lentelė turi būti tikra HTML lentelė su antraščių langeliais (<th> ir atributu scope), kad ekrano skaitytuvas prie kiekvieno skaičiaus pasakytų, kuriai eilutei ir stulpeliui jis priklauso (1.3.1). Pavadinimą verta pateikti elementu <caption>.

Lentelės nenaudojamos maketui išdėstyti, o kainoraščiai ir tvarkaraščiai neįkeliami paveikslėliu. Diagramos duomenis pateikite ir tekstu: trumpa išvada po diagrama ar lentelė su skaičiais tinka visiems, ne tik ekrano skaitytuvų naudotojams.

7. Ar svetainę galima valdyti vien klaviatūra?

Visos funkcijos turi veikti klaviatūra (2.1.1): klavišais Tab ir Shift+Tab pereinama tarp elementų, Enter ar tarpo klavišu paspaudžiamas mygtukas, Esc – uždaromas iššokantis langas. Klaviatūra naudojasi ir žmonės, negalintys valdyti pelės, ir daug ekrano skaitytuvų naudotojų.

• Matomas fokusas (2.4.7). Visada matyti, kuris elementas pasirinktas; stilių failuose neturi būti išjungtas outline be pakaitalo.
• Logiška tvarka (2.4.3). Fokusas juda taip, kaip skaitomas puslapis: iš viršaus į apačią, iš kairės į dešinę.
• Jokių spąstų (2.1.2). Iš iššokančio lango, vaizdo grotuvo ar žemėlapio galima išeiti klaviatūra.
• Fokusas neuždengtas (2.4.11, naujas WCAG 2.2 kriterijus). Pasirinkto elemento neturi visiškai uždengti prilipusi antraštė, pokalbių langelis ar slapukų juosta.

8. Ar mygtukai ir nuorodos pakankamai dideli?

Pagal naują WCAG 2.2 kriterijų 2.5.8 spaudžiamas elementas turi būti bent 24 × 24 CSS pikselių dydžio arba turėti pakankamai laisvos vietos aplink, kad netyčia nepaspaustumėte kaimyninio. Išimtys – nuorodos teksto viduryje ir elementai, kurių dydį nustato pati naršyklė.

Kitas naujas kriterijus (2.5.7) skirtas tempimui pele ar pirštu. Jei kainų intervalą galima nustatyti tik tempiant slankiklį, o prekių tvarką – tik perkeliant korteles, turi būti ir paprastesnis būdas: įvesties laukai, mygtukai ar rodyklės.

9. Ar formas galima užpildyti be kliūčių?

Formos lauko pavadinimas turi būti matomas ir susietas su lauku elementu <label>, o ne tik pilkas tekstas lauko viduje, kuris dingsta pradėjus rašyti (3.3.2). Privalomi laukai pažymimi ne vien spalva.

• Klaidos (3.3.1, 3.3.3). Klaida parodoma šalia lauko žodžiais ir paaiškinama, kaip ją ištaisyti.
• Automatinis pildymas (1.3.5). Vardo, el. pašto, telefono ir adreso laukai turi atitinkamą autocomplete reikšmę, kad naršyklė galėtų juos užpildyti.
• Nekartojama informacija (3.3.7, naujas WCAG 2.2 kriterijus). Toje pačioje užsakymo eigoje nereikia antrą kartą įvesti to paties, pvz., pristatymo adresas gali tapti mokėtojo adresu viena varnele.
• Pagalba toje pačioje vietoje (3.2.6, naujas WCAG 2.2 kriterijus). Jei svetainėje yra kontaktai ar pokalbių langelis, jie kiekviename puslapyje randami ten pat.

10. Ar prisijungimas neapsunkintas galvosūkiais?

Kriterijus 3.3.8 (naujas WCAG 2.2) draudžia prisijungimo metu reikalauti kognityvinio testo – prisiminti, perrašyti ar apskaičiuoti – jei nėra alternatyvos ar pagalbos. Slaptažodį turi būti galima įklijuoti ar užpildyti slaptažodžių tvarkykle, o vienkartinį kodą – nukopijuoti.

AA lygiu leidžiama prašyti atpažinti objektus paveikslėliuose, tačiau neregiams tai vis tiek kliūtis. Todėl prisijungimo formose iškraipytų raidžių perrašymą geriau keisti nematomomis apsaugos priemonėmis: paslėptu lauku robotams, formos pildymo laiko tikrinimu ar prisijungimu el. pašto nuoroda.

11. Ar vaizdo ir garso įrašai turi subtitrus ir tekstą?

Iš anksto įrašytiems vaizdo įrašams su garsu reikia subtitrų (1.2.2), o garso įrašams, pvz., tinklalaidėms, – teksto versijos (1.2.1). AA lygiu vaizdo įrašui reikia ir garsinio vaizdavimo (1.2.5), jei svarbi informacija matoma tik vaizde, o ne pasakojama.

• Garsas, trunkantis ilgiau nei 3 sekundes, nepaleidžiamas automatiškai be galimybės jį sustabdyti (1.4.2).
• Judantį ar besikeičiantį turinį, pvz., karuselę, galima sustabdyti (2.2.2).
• Niekas nemirksi daugiau kaip 3 kartus per sekundę (2.3.1).

12. Ar tekstas aiškus ir nuorodos suprantamos?

WCAG AA lygis nereikalauja konkretaus teksto sudėtingumo, tačiau aiški kalba padeda visiems, ypač žmonėms su pažinimo sutrikimais. Rašykite trumpais sakiniais, vieną mintį – vienoje pastraipoje, o sudėtingus terminus paaiškinkite pirmą kartą juos pavartoję.

• Nuorodos tekstas pasako, kur ji veda: „Pristatymo sąlygos“, o ne „Spauskite čia“ (2.4.4).
• Meniu visuose puslapiuose išdėstytas vienodai (3.2.3).
• Instrukcijos nesiremia vien forma ar vieta: ne „spauskite žalią mygtuką dešinėje“, o „spauskite mygtuką „Pateikti užsakymą““ (1.3.3).

Kaip patikrinti svetainę nemokamais įrankiais?

Automatiniai įrankiai per kelias minutes randa trūkstamus alternatyviuosius tekstus, per mažą kontrastą ir laukus be pavadinimų, tačiau neįvertina, ar alt tekstas prasmingas ir ar užsakymą galima užbaigti klaviatūra. Todėl juos papildykite rankine patikra.

Patikrinkite ne tik pagrindinį puslapį, bet ir tipinius šablonus: kategoriją, straipsnį, formą, krepšelį. Greitai apžiūrai tinka W3C „Easy Checks“ sąrašas.

Nuo ko pradėti, jei svetainė sena?

Pradėkite nuo elementų, kurie kartojasi visuose puslapiuose: antraštės su meniu, poraštės, formų ir spalvų. Juos ištaisius temoje ar šablone, pagerėja visa svetainė, o po to galima tvarkyti lankomiausių puslapių turinį.

Jei tema senesnė ir jos nebeatnaujina gamintojas, dažnai racionaliau ją pakeisti nei lopyti. Saitai.lt atnaujina „WordPress“, „Joomla“, „WooCommerce“ ir „VirtueMart“ svetaines, keičia temas, pertvarko formas ir meniu – plačiau puslapyje apie svetainės atnaujinimą ir perkūrimą. Jei pirmiausia norite žinoti, ką reikia taisyti, svetainės prieinamumo patikra pagal WCAG 2.2 AA kainuoja nuo 120 € ir dažniausiai trunka 1–3 darbo dienas. Kuriant naują svetainę, kontrastas, šrifto dydžiai ir fokuso stiliai numatomi jau dizaino etape.

Šaltiniai

• W3C, Web Content Accessibility Guidelines (WCAG) 2.2, 2023 m. spalio 5 d. rekomendacija: w3.org
• W3C WAI, kas nauja WCAG 2.2: w3.org
• W3C WAI, „Easy Checks“ – pirmoji prieinamumo apžiūra: w3.org
• WebAIM, kontrasto tikrinimo įrankis: webaim.org
• WebAIM, WAVE prieinamumo tikrinimo įrankis: wave.webaim.org
• NV Access, nemokamas ekrano skaitytuvas NVDA: nvaccess.org

Planuojate atnaujinti svetainę ir pašalinti prieinamumo kliūtis? Užklausos formoje nurodykite svetainės adresą ir sistemą, kuria ji sukurta. Per 1 darbo dieną atsakysime, nuo ko verta pradėti: svetainės prieinamumo patikra (nuo 120 €) ar iš karto svetainės atnaujinimas.