WCAG standartai: Ko turėtumėte žinoti

Pagrindinis vadovas apie WCAG 2.1 standartus. Sužinokite, ką reiškia A, AA ir AAA lygiai bei kaip jie veikia jūsų dizainą.

12 min skaitymo Pradedantieji Liepa 2026

Kompiuterio ekrane rodomas prieinamas svetainės maketas su aiškiais navigacijos elementais ir padidintu tekstu

Kas yra WCAG?

Web Content Accessibility Guidelines (WCAG) yra tarptautiniai standartai, kurie padeda padaryti internetines svetaines prieinamas visiems žmonėms, nepaisant jų gebėjimų. Nuo pat pradžios buvo aišku — internetas turėtų veikti visiems. Tai nėra pasirinkimas. Tai būtina.

WCAG 2.1 versija, priimta 2018 metais, išlieka šiandieninio interneto standartu. Jame nustatomi konkretūs kriterijai, kurie padeda užtikrinti, kad žmonės su regėjimo, klausos, judesio ar kognityviais sutrikimai gali naudotis jūsų svetaine lygiai taip pat, kaip ir visi kiti. Nuo juodomis spalvomis ir su padidintu tekstu skaitytojo iki žmogaus, kuris negali naudoti pelės — jūsų svetainė turėtų jiems veikti gerai.

Trys lygiai: A, AA ir AAA

WCAG naudoja tris lygius, atspindžius reikalavimų griežtumą. Kiekvienas lygis rodo vis daugiau prieinamumo funkcijų ir didesnę įtrauktį.

Pagrindinis lygis

Apima pagrindinius prieinamumo standartus. Žmonės su negalia gali naudotis pagrindinėmis svetainės funkcijomis. Tai yra minimumas — labai žemas šuolis, bet jei jį neperdursite, turėsite problemų.

Rekomenduojamas lygis

Čia prieinamumas pasiekia daugumą žmonių su negalia. AA yra tas, kurį dauguma šalių reikalauja pagal teisę. Tai diegia gerus pagrindus — kontrasto standartus, teksto dydžio galimybes, tinkamą klaviatūros naršymą. Šitai yra tikslas, kurį turėtumėte siekti.

AAA

Išplėstinis lygis

Didžiausia prieinamumo laipsnė. Čia jūs rūpinatės ir kraštutiniais atvejais. Nuotrauka turi nuodugnų aprašymą, video turi pilną atranscribą. AAA nėra būtinas daugumui svetainių, bet jei jūs esate valstybės institucija ar labdaros organizacija, tai yra labai geras tikslas.

Keturi pagrindiniai principai

WCAG remiasi keturiais pagrindiniais principais, kurie yra trumpinti kaip POUR:

Pastebimas (Perceivable)

Žmonės turi suprasti jūsų turinio. Tai reiškia pakankamai didelį teksto dydį, geras spalvų kontrastą ir alternatyvias nuotraukų aprašymą. Jei žmogus yra aklasis, jam reikalingas tekstinis aprašymas. Jei jis yra kurčias, jam reikalingi subtitrai.

Valdomas (Operable)

Svetainė turėtų veikti su klaviatūra viena. Kai kurie žmonės negali naudoti pelės — tik klaviatūrą. Jūsų meniu turėtų būti navigacijos galimybė. Mygtukus turėtų būti galima naudoti Enter klavišu. Nėra paslėptų elementų, kuriems reikalingas pelės kursoras.

Suprantamas (Understandable)

Jūsų turinys turi būti aiškus ir lengva suprasti. Naudokite paprastą kalbą. Paaiškinkite sutrumpintų frazių reikšmes. Jei puslapyje naudojate neįprastą žodį, jam turėtų būti aprašymas. Žmonės su kognityviais sutrikimai nuo dėmesio deficito iki sąvokų suprasti turėtų suprasti jūsų svetainę be pasiūlos.

Patikimas (Robust)

Svetainė turėtų veikti su skirtingais įrankiais ir technologijomis. Tai apima ekrano skaitytuvus, įlietuva sistemos, naršykles ir mobilius įrenginius. Jūsų HTML turėtų būti teisingas. Naudokite semantinius HTML elementus. Tai padeda pagalbinėms technologijoms suprasti jūsų turinio struktūrą.

Praktiniai patarimai, kuriuos galite taikyti šiandien

Prieinamumas nėra vienas didelis dalykas. Tai yra daug mažų dalykų, kurie drauge kuria didelį poveikį. Štai keletas konkretių dalykų, kuriuos galite padaryti dabar:

Spalvų kontrasto patikra

Jūsų tekstas ir fonas turi turėti pakankamai didelį kontrastą. AA lygiu, tekstui reikalingas mažiausiai 4,5:1 kontrasto santykis (arba 3:1 dideliam tekstui). Juodas tekstas ant balto fono yra puikus. Pilkas tekstas ant pilko fono — labai blogas. Naudokite WebAIM kontrasto patikrą, kad greitai patikrintumėte.

Tekstinis dydis ir skaitymas

Teksto dydis turėtų būti mažiausiai 16 pikselių pagrindiniame tekstui. Žmonės su regėjimo problememis naudoja padidintuvą. Jei jūs parašote fiksuotą dydį su px, jis nebus didžiąjame. Naudokite rem arba em vienetus. Palikite žmonėms galimybę padidinti tekstą. Tai turėtų būti 200% prieinamumo be pasukimo ar sudėlus.

Klaviatūros naršymas

Išjunkite savo pelę ir pabandykite naršyti savo svetainę tik Tab klavišu. Ar galite pasiekti visus mygtukus? Ar matote fokuso indikatoriaus? Jei ne, jūs turite problemą. Pridėkite :focus stiliaus. Įsitikinkite, kad Tab eilutė yra logiška. Vartotojai turėtų suprasti, kur jie yra svetainėje tik klaviatūra.

Alternatyvus tekstas nuotraukoms

Kiekviena nuotrauka turėtų turėti alt tekstą. Ne tik "image.jpg". Aprašykite, kas yra nuotraukoje. Jei tai tik dekoracija, palikite alt tuščią. Jei tai grafikas, aprašykite, ką jis rodo. Ekrano skaitytuvai skaitys šį tekstą. Jei nėra alt teksto, žmogus su aklumu nežino, apie ką jūsų nuotrauka yra.

Semantinis HTML

Naudokite tinkamus HTML elementus. h1 antraštei, ne div su didžiuliu tekstu. button mygtukui, ne span. Naudokite nav navigacijai. Tai padeda ekrano skaitytuvams suprasti puslapio struktūrą. Žmogus su aklumu gali suprasti, kur yra nuorodos, kur yra antraštės, be regėjimo.

Video ir garso subtitrai

Jei jūsų svetainėje yra video, pridėkite subtitrus. Jei yra garso, pridėkite atranscribą. Žmonės, kurie yra kurčias arba turi problemų su klausa, turėtų suprasti jūsų turinį. Tai nėra pasirinkimas — tai yra prieinamumas. Daugelis žmonių taip pat naudoja subtitrus tiesioginėse erdvėse, todėl jums naudinga.

Įrankiai prieinamumo testavimui

Nereikia tapti prieinamumo eksperto, norint savo svetainę testuoti. Yra daug nemokamų įrankių, kurie padeda:

WAVE: Naršyklės plėtinys, kuris rodo prieinamumo problemas tiesiogiai jūsų svetainėje. Greitas ir lengvas naudoti pradedantiesiems.
Axe DevTools: Profesionalus, bet nemokamai pasiekiamas įrankis. Randa problemas, kurias kiti įrankiai praleido. Geras žingsnis, kai jūs jau žinote pagrindus.
WebAIM Contrast Checker: Paprasta kontrasto patikra. Įklijuokite spalvas ir pamatyti, ar jos atitinka WCAG standartus. Tai yra pirmiausia vieta patikrinti spalvas.
Lighthouse: Integruota į Chrome DevTools. Patikrina prieinamumą, našumą ir SEO. Naudinga atliekant greitą auditą iš dalies.
Screen readers: Naudokite jų patys. NVDA (Windows) ir JAWS yra populiarūs. Išjunkite savo ekraną ir pabandykite naršyti. Tai jums pasakys, kaip aklasis žmogus naudojasi jūsų svetaine.

Baigiamoji mintis

Prieinamumas nėra tik teisinė pareiga. Tai yra pagrindinis žmogaus teisės dalykas. Kai jūs padarysite savo svetainę prieinama, jūs atidarote duris žmonėms, kurie anksčiau negali buvo jūsų naudotis. To yra tikrai daug žmonių. Šiame pasaulyje daugiau nei milijard žmonių gyvena su kažkokia negalia. Jei jūsų svetainė nėra jiem prieinama, jūs jų nedalinate.

Pradėkite nuo WCAG AA lygio. Tai yra gera pradžia. Tai yra tas, kurį dauguma šalių reikalauja. Tada, jei norite, galite pereiti prie AAA. Bet net jei jūs tik pasieksite AA, jūs darote didelius skirtumą. Naudokite aukščiau paminėtus įrankius. Testuokite su tikrais žmonėmis. Pakluskite pagalbinių technologijų naudotojų. Jie jums pasakys, ką galite padaryti geriau.

Prieinamumas nėra galutinis tikslas. Tai yra nuolatinis procesas. Jūsų svetainė bus tobulėjanti. Jūs nuolat išmoksite naujus dalykus. Ir tai gerai. Svarbu yra pradėti dabar.

Edukacinis tikslas

Šis vadovas skirtas edukaciniais tikslais, siekiant padėti suprasti WCAG standartus. Individualūs mokymosi rezultatai skiriasi priklausomai nuo kiekvieno žmogaus. Prieinamumo standartai nuolat evoliucionuoja, todėl rekomenduojame reguliariai tikrinti oficialias WCAG nuorodas ir atnaujintą dokumentaciją iš W3C.

Prieinamumo Standartai ir Įtraukus Dizainas Redakcinis Kolektyvas

Redakcinis Kolektyvas

Parengta Prieinamumo Standartai ir Įtraukus Dizainas redakcinio kolektyvo, orientuoto į patikimą ir taikomą mokymo medžiagą.

Daugiau apie prieinamumą

Rankos naudoja ekrano skaitytuvą nešiojamajame kompiuteryje, skirta prieinamumo testavimui