Kā padarīt mājaslapu pieejamu: WCAG 2.2 sākumrokasgrāmata

Lai padarītu mājaslapu pieejamu, veidojiet to tā, lai cilvēki varētu to lietot ar tastatūru, ekrāna lasītāju, tuvinājumu vai pārslēgšanas ierīci, nevis tikai ar peli: izmantojiet īstus HTML elementus pogām, saitēm, virsrakstiem un formu uzrakstiem; dodiet attēliem jēgpilnu alt tekstu, uzturiet augstu teksta kontrastu un padariet fokusu redzamu. Mērķis ir WCAG 2.2 Level AA. Automātiskās pārbaudes atrod daļu problēmu; desmit minūšu tests ar tastatūru un ekrāna lasītāju atrod lielu daļu pārējo.

Ko "pieejams" nozīmē praksē

Pieejamība attiecas uz cilvēkiem: kādu, kurš ir neredzīgs un izmanto ekrāna lasītāju; kādu ar trīci, kurš navigē ar tastatūru; kādu ar vāju redzi, kurš tuvina līdz 200%; kādu, kurš lasa spilgtā saulē; kādu ar īslaicīgi salauztu plaukstas locītavu. Laba pieejamība parasti padara vietni labāku ikvienam — skaidrāku struktūru, lasāmu tekstu, formas, kas paskaidro savas kļūdas.

Atsauces standarts ir W3C Web Content Accessibility Guidelines (WCAG). 2026. gada septembrī pašreizējā versija ir WCAG 2.2 (publicēta 2023. gada oktobrī, atjaunināta 2024. gada decembrī); WCAG 3 ir agrīns melnraksts. WCAG ir organizēts ap četriem principiem — saturam jābūt uztveramam, darbināmam, saprotamam un stabilam — un tam ir trīs atbilstības līmeņi:

Dažos reģionos likumi atsaucas uz WCAG — piemēram, Eiropas Pieejamības akts, kas kopš 2025. gada jūnija attiecas uz daudziem patēriņa digitālajiem pakalpojumiem ES. Kuri noteikumi attiecas uz jums, atkarīgs no tā, kur darbojaties un ko pārdodat; ja neesat pārliecināts, konsultējieties ar speciālistu. Šī rokasgrāmata aptver praktisko darbu.

Iespējas: kā tur nonākt

Vairumam mazu vietņu pirmās divas iespējas ir pietiekamas: pasakiet AI veidot pieejami no sākuma un pēc tam veiciet auditu pirms palaišanas.

Labojumi, kas ir vissvarīgākie

Izmantojiet pareizos HTML elementus

Lielākā daļa pieejamības nāk bez maksas ar pareizu HTML. <button> ir fokusējams, darbojas ar Enter un Space un tiek nolasīts kā poga. <div> ar klikšķa apstrādātāju nav nekas no tā. AI ģenerēts kods dažreiz izmanto stilizētus div visam; lūdziet semantiskus elementus:

• <button> darbībām, <a href> navigācijai
• Viens <h1> katrā lapā, tad <h2>, <h3> pēc kārtas — ekrāna lasītāju lietotāji lec starp virsrakstiem
• Orientieri: <header>, <nav>, <main>, <footer>
• <label>, kas savienots ar katru formas lauku
• Lapas valoda <html lang="lv">

Lietojiet ARIA atribūtus tikai tad, ja neviens native elements neder — piemēram, pielāgotai cilnju kopai vai combobox. Nepareizs ARIA ir sliktāks par tā neesamību.

Piekļuve ar tastatūru un redzams fokuss

Viss, ko var izdarīt ar peli, jāvar izdarīt tikai ar tastatūru (WCAG 2.1.1). Izejiet cauri lapai ar Tab: katrai saitei, pogai un laukam jābūt sasniedzamam loģiskā secībā, un jums vienmēr jāredz, kur ir fokuss (2.4.7 Focus Visible). WCAG 2.2 pievienoja prasību, ka fokusētajam elementam nedrīkst būt pilnībā paslēpts aiz pielīmētām galvenēm vai sīkdatņu baneriem (2.4.11, AA līmenis).

Biežākās kļūdas: izvēlnes, kas atveras tikai ar kursoru virs tām, modāļi, kas neiestrēgt fokusu vai ko nevar aizvērt ar Escape, un outline: none CSS bez aizvietotāja.

Teksta alternatīvas

Katram jēgpilnam attēlam vajag alt tekstu, kas kontekstā saka, ko tas rāda („Pavārs noliek degustācijas ēdienu”, nevis „image1.jpg”). Dekoratīviem attēliem dodiet tukšu alt="", lai ekrāna lasītāji tos izlaistu. Pogām, kurās ir tikai ikona, vajag pieejamu nosaukumu („Aizvērt”, „Meklēt”). Video vajag subtitrus; audio — transkriptu.

Krāsa un kontrasts

WCAG 2.2 AA prasa kontrasta attiecību vismaz 4,5:1 parastam tekstam un 3:1 lielam tekstam (1.4.3), kā arī 3:1 saskarnes daļām, piemēram, ievades lauku malām un nozīmi nesošām ikonām (1.4.11). Parastās kļūdas ir gaiši pelēks vietturteksts un bāli pogas. Turklāt nekad nelietojiet tikai krāsu nozīmes nesošanai — sarkanai malai nepareizā laukā vajag arī kļūdas ziņojumu.

Izmēru maiņa un pārkārtošanās

Teksts jāpaliek lietojams, tuvinot līdz 200% (1.4.4), un saturam jādarbojas 320 CSS pikseļu platumā bez horizontālas ritināšanas (1.4.10). Pareizi responsīvs izkārtojums lielāko daļu no tā atrisina.

Mērķa izmērs, formas un kļūdas

• Mērķa izmērs: WCAG 2.2 AA prasa rādītāja mērķiem vismaz 24 x 24 CSS pikseļus vai pietiekamu atstarpi ap mazākiem (2.5.8). Lielāks ir draudzīgāks tālruņos.
• Formas: redzami uzraksti (ne tikai vietturteksts), skaidras instrukcijas un kļūdu ziņojumi, kas pasaka, kas nav kārtībā un kā to labot, blakus laukam.
• Pieteikšanās: neliekiet cilvēkiem atrisināt puzli vai pārrakstīt kodu bez alternatīvas; ļaujiet paroļu pārvaldniekiem un ielīmēšanai (3.3.8 Accessible Authentication).

Uzvednes, kas darbojas

Veidojiet šo vietni atbilstoši WCAG 2.2 Level AA: semantiski HTML orientieri, viens h1 katrā lapā ar virsrakstiem pēc kārtas, īsti pogu un saišu elementi, uzraksti katrā formas laukā, redzami fokusa stili, teksta kontrasts vismaz 4,5:1, alt teksts jēgpilniem attēliem un alt="" dekoratīviem, un iestatīta html lang.

Pārbaudiet lapas /signup un /checkout pieejamību. Pārbaudiet lietošanu tikai ar tastatūru, fokusa secību, redzamu fokusu, uzrakstus, kļūdu ziņojumus, kontrastu un ekrāna lasītāja nosaukumus ikonu pogām. Uzskaitiet katru problēmu ar WCAG kritēriju un tad to izlabojiet, nemainot vizuālo dizainu vairāk, nekā vajag.

Mobilo izvēlni nevar lietot ar tastatūru. Padariet to par pogu ar aria-expanded, pārvietojiet fokusu izvēlnē, kad tā atveras, aizveriet ar Escape un atgrieziet fokusu pogai.

Solis pa solim

1. Palaidiet automātisku pārbaudi. Lighthouse Accessibility sadaļa Chrome DevTools vai axe pārlūka paplašinājums katrā galvenajā lapā. Izlabojiet visu, ko tas ziņo.
2. Atvienojiet peli. Izejiet cauri katrai lapai ar Tab un pabeidziet katru galveno uzdevumu — reģistrēšanos, meklēšanu, norēķināšanos. Atzīmējiet visu, kas nav sasniedzams, kur fokusu neredzat vai no kā nevar izkļūt.
3. Tuviniet līdz 200% un sašaurināt logu līdz tālruņa platumam. Nekas nedrīkst būt apgriezts vai prasīt horizontālu ritināšanu.
4. Izmēģiniet ekrāna lasītāju desmit minūtes: VoiceOver Mac un iPhone, TalkBack Android vai NVDA Windows (bezmaksas). Klausieties virsrakstus, saites un formu laukus. „Poga” bez nosaukuma vai „saite, noklikšķiniet šeit” nozīmē darāmo darbu.
5. Pārbaudiet kontrastu tekstam, pogām un ievadei ar kontrasta pārbaudes rīku.
6. Izlabojiet, tad pārbaudiet vēlreiz tos pašus uzdevumus.
7. Publicējiet pieejamības paziņojumu, kurā norādīts, kuru standartu tiecaties sasniegt un kā ziņot par problēmām — un atbildiet uz šiem ziņojumiem.

Biežākās kļūdas

• Paļaušanās uz pārklājuma logrīku koda labošanas vietā.
• Fokusa kontūru noņemšana, jo izskatās nekārtīgi, bez aizvietotāja.
• Vietturteksts kā vienīgais uzraksts. Tas pazūd, tiklīdz kāds sāk rakstīt, un bieži ir zems kontrasts.
• Saites „Noklikšķiniet šeit” un „Lasīt vairāk”. Ārpus konteksta ekrāna lasītāju lietotāji dzird identisku saišu sarakstu.
• Alt teksts, kas pārpildīts ar atslēgvārdiem. Alt teksts ir cilvēkiem; aprakstiet attēlu.
• Testēšana vienu reizi. Katra jaunā funkcija var salauzt piekļuvi ar tastatūru. Pievienojiet tastatūras pārbaudi savai pirmspalaišanas testēšanai.

Pieejamības kontrolsaraksts

• Automātiska pārbaude (Lighthouse vai axe) tīra galvenajās lapās
• Katru uzdevumu var pabeigt tikai ar tastatūru
• Fokuss vienmēr redzams un nekad nav paslēpts aiz pielīmētiem elementiem
• Semantiski virsraksti, orientieri, pogas un saites; iestatīta lang
• Jēgpilns alt teksts; dekoratīviem attēliem alt=""; video subtitri
• Teksta kontrasts ≥ 4,5:1 (liels teksts ≥ 3:1); saskarnes daļas ≥ 3:1
• Darbojas 200% tuvinājumā un 320 px platumā
• Katram formas laukam ir redzams uzraksts un skaidri kļūdu ziņojumi
• Pieejamības paziņojums ar veidu, kā ziņot par problēmām

Lai iepazītos ar pamatā esošajiem jēdzieniem, izlasiet kas ir tīmekļa pieejamība. Pieejams dizains un labs dizains lielā mērā pārklājas; kā ar AI izveidot labi izskatīgu lietotni aptver vizuālo pusi.

Pieejamība Mythex

Mythex veido ar to standartu, ko pieprasāt, tāpēc ievietojiet „WCAG 2.2 AA” savā pirmajā uzvednē un turpmākajās. Priekšskatījuma tālruņa izmēra rāmi varat izmantot, lai pārbaudītu mazus ekrānus (Preview un Code), bet tastatūras, tuvināšanas un ekrāna lasītāja testi vislabāk darbojas publicētajā URL vai priekšskatījumā, kas atvērts atsevišķā cilnē. Lūdziet aģentam pārbaudīt lapu, izlabot atrasto un pēc tam paši pārbaudīt labojumus — automātiska pārbaude ir sākums, nevis gala apstiprinājums.

Jautājumi