Kaip padaryti svetainę prieinamą: WCAG 2.2 pradinis vadovas

Norėdami padaryti svetainę prieinamą, ją sukurkite taip, kad žmonės galėtų naudotis klaviatūra, ekrano skaitytuvu, priartinimu ar jungikliu, o ne tik pele: naudokite tikrus HTML elementus mygtukams, nuorodoms, antraštėms ir formų etiketėms, paveikslėliams suteikite prasmingą alternatyvųjį tekstą, palaikykite aukštą teksto kontrastą ir užtikrinkite matomą fokusą. Standartas, į kurį reikia siekti, yra WCAG 2.2 AA lygis. Automatiniai tikrintuvai aptinka dalį problemos; dešimties minučių bandymas klaviatūra ir ekrano skaitytuvu aptinka didelę dalį likusios.

Ką iš tikrųjų reiškia „prieinama“

Prieinamumas – tai žmonės: aklas žmogus, naudojantis ekrano skaitytuvą, žmogus su drebuliu, naršantis klaviatūra, žmogus su silpnu regėjimu, kuris priartina iki 200 %, skaitantis ryškioje saulėje, žmogus su laikinai sulaužytu riešu. Geras prieinamumas paprastai pagerina svetainę visiems – aiškesnė struktūra, skaitomas tekstas, formos, kurios paaiškina klaidas.

Nuorodinis standartas yra W3C Web Content Accessibility Guidelines (WCAG). 2026 m. rugsėjį dabartinė versija yra WCAG 2.2 (paskelbta 2023 m. spalį, atnaujinta 2024 m. gruodį); WCAG 3 yra ankstyvas projektas. WCAG yra sudarytas aplink keturis principus – turinys turi būti suvokiamas, valdomas, suprantamas ir patikimas – ir turi tris atitikties lygius:

Įstatymai keliose vietose remiasi WCAG – pavyzdžiui, Europos prieinamumo aktas, kuris nuo 2025 m. birželio taikomas daugeliui ES vartotojams skirtų skaitmeninių paslaugų. Kurios taisyklės jums taikomos, priklauso nuo to, kur veikiate ir ką parduodate; jei nesate tikri, pasitarkite su specialistu. Šis vadovas aprėpia praktinį darbą.

Būdai, kaip ten nueiti

Daugeliui mažų svetainių pirmieji du yra pakankami: nurodykite DI kurti prieinamai nuo pradžių, tada atlikite auditą prieš paleidimą.

Svarbiausi taisymai

Naudokite tinkamus HTML elementus

Dauguma prieinamumo gaunama be papildomo darbo, kai HTML teisingas. <button> yra fokusuojamas, veikia su Enter ir tarpu ir skaitomas kaip mygtukas. <div> su paspaudimo apdorojimu nėra nei vieno, nei kito. DI sugeneruotas kodas kartais naudoja stilizuotus div visam; prašykite semantinių elementų:

• <button> veiksmams, <a href> navigacijai
• Vienas <h1> puslapyje, tada <h2>, <h3> eilės tvarka – ekrano skaitytuvo naudotojai šokinėja tarp antraščių
• Orientyrai: <header>, <nav>, <main>, <footer>
• <label>, susietas su kiekvienu formos lauku
• Puslapio kalba <html lang="en">

ARIA atributus naudokite tik tada, kai joks natyvus elementas netinka – pavyzdžiui pasirinktinei kortelių juostai ar combobox. Neteisingas ARIA yra blogiau nei jokio.

Prieiga klaviatūra ir matomas fokusas

Viskas, ką galite padaryti pele, turi veikti vien klaviatūra (WCAG 2.1.1). Paspauskite Tab per puslapį: kiekviena nuoroda, mygtukas ir laukas turi būti pasiekiamas loginė tvarka, ir visada turite matyti, kur yra fokusas (2.4.7 Focus Visible). WCAG 2.2 pridėjo, kad fokusuotas elementas neturi būti visiškai paslėptas už lipnių antraščių ar slapukų juostų (2.4.11, AA lygis).

Dažniausios klaidos: meniu atsidaro tik užvedus pelę, modalai neįkalina fokuso ar negali būti uždaryti klavišu Escape, ir CSS outline: none be jokio pakaitalo.

Tekstinės alternatyvos

Kiekvienam prasmingam paveikslėliui reikia alternatyvaus teksto, kuris kontekste pasako, ką jis rodo („Virėjas patiekia degustacinį meniu“, o ne „image1.jpg“). Dekoratyviems paveikslėliams naudokite tuščią alt="", kad ekrano skaitytuvai jų praleistų. Mygtukams, kuriuose yra tik piktograma, reikia prieinamo pavadinimo („Uždaryti“, „Ieškoti“). Vaizdo įrašams reikia subtitrų; garsui – transkripto.

Spalva ir kontrastas

WCAG 2.2 AA reikalauja bent 4,5:1 kontrasto santykio įprastam tekstui ir 3:1 didelio dydžio tekstui (1.4.3), bei 3:1 sąsajos dalims, pavyzdžiui įvesties kraštams ir prasmingoms piktogramoms (1.4.11). Dažniausiai nepavyksta šviesiai pilkas vietos rezervavimo tekstas ir blyškūs mygtukai. Taip pat niekada nenaudokite vien spalvos prasmei perteikti – raudonas klaidingo lauko kraštas taip pat turi turėti klaidos pranešimą.

Dydžio keitimas ir perkėlimas

Tekstas turi likti naudojamas priartinus iki 200 % (1.4.4), o turinys turi veikti 320 CSS pikselių pločio ekrane be šoninio slinkimo (1.4.10). Tinkamai prisitaikantis maketas išsprendžia didžiąją dalį to.

Paspaudimo zonos, formos ir klaidos

• Paspaudimo zonos dydis: WCAG 2.2 AA reikalauja, kad rodyklės taikinys būtų bent 24 × 24 CSS pikselių arba aplink mažesnius būtų pakankamai tarpo (2.5.8). Telefonuose didesnis yra draugiškesnis.
• Formos: matomos etiketės (ne tik vietos rezervavimo tekstas), aiškios instrukcijos ir klaidų pranešimai, kurie pasako, kas negerai ir kaip tai ištaisyti, šalia lauko.
• Prisijungimas: nereikalaukite spręsti galvosūkio ar perrašyti kodo be alternatyvos; leiskite naudoti slaptažodžių tvarkykles ir įklijavimą (3.3.8 Accessible Authentication).

Veikiančios užklausos

Padaryk šią svetainę atitinkančią WCAG 2.2 AA lygį: semantiniai HTML orientyrai, vienas h1 puslapyje su antraštėmis eilės tvarka, tikri mygtuko ir nuorodos elementai, etiketės kiekvienam formos laukui, matomi fokuso stiliai, teksto kontrastas bent 4,5:1, alternatyvusis tekstas prasmingiems paveikslėliams ir alt="" dekoratyviems, bei nustatyta html lang.

Patikrink /signup ir /checkout puslapius dėl prieinamumo. Patikrink naudojimą tik klaviatūra, fokusavimo tvarką, matomą fokusą, etiketes, klaidų pranešimus, kontrastą ir ekrano skaitytuvo pavadinimus piktogramų mygtukams. Išvardyk kiekvieną problemą su WCAG kriterijumi, tada ją ištaisyk nekeisdamas vizualinio dizaino labiau, nei būtina.

Mobilusis meniu negali būti naudojamas klaviatūra. Padaryk jį mygtuku su aria-expanded, perkelk fokusą į meniu, kai jis atsidaro, uždaryk jį Escape ir grąžink fokusą į mygtuką.

Žingsnis po žingsnio

1. Atlikite automatinį patikrinimą. Lighthouse prieinamumo skyrius „Chrome DevTools“ arba axe naršyklės plėtinys kiekviename pagrindiniame puslapyje. Ištaisykite viską, ką jis praneša.
2. Atjunkite pelę. Peržiūrėkite kiekvieną puslapį klavišu Tab ir atlikite kiekvieną svarbiausią užduotį – registruotis, ieškoti, apmokėti. Pažymėkite viską, ko nepasiekiate, kur nematote fokuso ar iš ko negalite išeiti.
3. Priartinkite iki 200 % ir susiaurinkite langą iki telefono pločio. Nieko neturėtų būti nukirpta ar reikėti slinkti į šonus.
4. Išbandykite ekrano skaitytuvą dešimt minučių: VoiceOver Mac ir iPhone, TalkBack Android arba NVDA Windows (nemokamas). Klausykitės antraščių, nuorodų ir formos laukų. „Mygtukas“ be pavadinimo arba „nuoroda, spustelėkite čia“ reiškia darbo, kurį reikia atlikti.
5. Patikrinkite kontrastą tekstui, mygtukams ir įvesties laukams kontrasto tikrintuvu.
6. Ištaisykite, tada pakartokite tas pačias užduotis.
7. Paskelbkite prieinamumo pareiškimą, nurodantį, kokio standarto siekiate ir kaip pranešti apie problemas – ir atsakykite į tuos pranešimus.

Dažnos klaidos

• Pasikliovimas perdangos valdikliu vietoj kodo taisymo.
• Fokusavimo kontūrų pašalinimas, nes atrodo netvarkingai, be pakaitalo.
• Vietos rezervavimo tekstas kaip vienintelė etiketė. Jis dingsta, kai kas nors pradeda rašyti, ir dažnai yra žemo kontrasto.
• Nuorodos „Spustelėkite čia“ ir „Skaityti daugiau“. Be konteksto ekrano skaitytuvo naudotojai girdi identiškų nuorodų sąrašą.
• Alternatyvusis tekstas, prikištas raktinių žodžių. Alternatyvusis tekstas skirtas žmonėms; aprašykite paveikslėlį.
• Testavimas vieną kartą. Kiekviena nauja funkcija gali sugadinti prieigą klaviatūra. Pridėkite klaviatūros patikrinimą prie savo testavimo prieš paleidimą.

Prieinamumo kontrolinis sąrašas

• Automatinis patikrinimas (Lighthouse arba axe) švarus pagrindiniuose puslapiuose
• Kiekvieną užduotį galima atlikti vien klaviatūra
• Fokusas visada matomas ir niekada nepaslėptas už lipnių elementų
• Semantinės antraštės, orientyrai, mygtukai ir nuorodos; nustatytas lang
• Prasmingas alternatyvusis tekstas; dekoratyvūs paveikslėliai alt=""; subtitrai vaizdo įrašams
• Teksto kontrastas ≥ 4,5:1 (didelis tekstas ≥ 3:1); sąsajos dalys ≥ 3:1
• Veikia esant 200 % priartinimui ir 320 px pločiui
• Kiekvienas formos laukas turi matomą etiketę ir aiškius klaidų pranešimus
• Prieinamumo pareiškimas su būdu pranešti apie problemas

Norėdami suprasti šios temos pagrindus, skaitykite kas yra žiniatinklio prieinamumas. Prieinamas dizainas ir geras dizainas labai sutampa; vizualinę pusę aprašo kaip sukurti gražią programėlę su DI.

Prieinamumas Mythex

Mythex kuria pagal tai, ko paprašote, todėl į pirmąją užklausą ir tolesnes įrašykite „WCAG 2.2 AA“. Peržiūros telefono dydžio rėmelį galite naudoti patikrinti mažus ekranus (Preview ir Code), bet klaviatūros, priartinimo ir ekrano skaitytuvo testai geriausiai veikia publikuotame adrese arba peržiūroje, atidarytoje atskiroje kortelėje. Paprašykite agento patikrinti puslapį, ištaisyti, ką randa, o tada pačiam patikrinkite taisymus – automatinis patikrinimas yra pradžia, o ne galutinis patvirtinimas.

Klausimai