Kako narediti spletno stran dostopno: vodnik za začetek po WCAG 2.2

Spletno stran naredite dostopno tako, da jo zgradite tako, da jo ljudje lahko uporabljajo s tipkovnico, bralnikom zaslona, povečavo ali stikalno napravo, ne le z miško: uporabite prave elemente HTML za gumbe, povezave, naslove in oznake obrazcev; slikam dajte smiselno alternativno besedilo; ohranite visok kontrast besedila in poskrbite, da je fokus viden. Cilj je standard WCAG 2.2 raven AA. Avtomatski preverjevalniki ujamejo le del težave; desetminutni test s tipkovnico in bralnikom zaslona ujame velik del preostalega.

Kaj »dostopno« pomeni v praksi

Dostopnost je o ljudeh: nekdo, ki je slep in uporablja bralnik zaslona, nekdo s tremorjem, ki se po strani giblje s tipkovnico, nekdo s slabim vidom, ki povečuje na 200 %, nekdo, ki bere na soncu, nekdo z začasno zlomljenim zapestjem. Dobra dostopnost običajno naredi stran boljšo za vse — jasnejšo strukturo, berljivo besedilo, obrazce, ki razložijo svoje napake.

Referenčni standard so Smernice za dostopnost spletnih vsebin (WCAG) organizacije W3C. Od septembra 2026 je trenutna različica WCAG 2.2 (objavljena oktobra 2023, posodobljena decembra 2024); WCAG 3 je zgodnji osnutek. WCAG temelji na štirih načelih — vsebina mora biti zaznavna, upravljiva, razumljiva in robustna — in ima tri ravni skladnosti:

Zakoni na več mestih se sklicujejo na WCAG — na primer evropski Akt o dostopnosti (European Accessibility Act), ki se od junija 2025 uporablja za mnoge digitalne storitve za potrošnike v EU. Katera pravila veljajo za vas, je odvisno od tega, kje delujete in kaj prodajate; če niste prepričani, se posvetujte s strokovnjakom. Ta vodnik zajema praktično delo.

Možnosti: kako priti do cilja

Za večino majhnih strani sta zadostna prva dva: AI naj zgradi dostopno od začetka, nato pa pred zagonom opravite pregled.

Popravki, ki največ štejejo

Uporabite prave elemente HTML

Največ dostopnosti pride samodejno s pravilnim HTML-jem. <button> je fokusabilen, deluje s tipkama Enter in Space in ga bralnik zaslona oznani kot gumb. <div> s klikovnim obdelovalcem ni nič od tega. AI-generirana koda včasih za vse uporablja stilizirane div-e; zahtevajte semantične elemente:

• <button> za dejanja, <a href> za navigacijo
• En <h1> na stran, nato <h2>, <h3> po vrsti — uporabniki bralnikov zaslona skačejo med naslovi
• Orientacijske točke: <header>, <nav>, <main>, <footer>
• <label> povezan z vsakim poljem obrazca
• Jezik strani v <html lang="sl">

ARIA atribute uporabite samo, kadar noben nativni element ne ustreza — na primer za lasten nabor zavihkov ali combobox. Napačen ARIA je slabši od nobenega.

Dostop s tipkovnico in viden fokus

Vse, kar lahko naredite z miško, mora delovati samo s tipkovnico (WCAG 2.1.1). Pritiskajte Tab po strani: vsaka povezava, gumb in polje mora biti dosegljivo v logičnem zaporedju, fokus pa mora biti vedno viden (2.4.7 Focus Visible). WCAG 2.2 je dodal, da fokusirani element ne sme biti popolnoma skrit za lepljivimi glavami ali pasicami piškotkov (2.4.11, raven AA).

Pogoste napake: meniji, ki se odprejo samo ob premiku miške, modalna okna, ki ne zadržijo fokusa ali se ne dajo zapreti s tipko Escape, in outline: none v CSS-ju brez nadomestila.

Besedilne alternative

Vsaka smiselna slika potrebuje alternativno besedilo, ki v kontekstu pove, kaj prikazuje (»Kuharica postavlja degustacijski meni«, ne »slika1.jpg«). Dekorativne slike dobijo prazen alt="", da jih bralniki zaslona preskočijo. Gumbi samo z ikono potrebujejo dostopno ime (»Zapri«, »Iskanje«). Videoposnetki potrebujejo podnapise; zvok potrebuje prepis.

Barva in kontrast

WCAG 2.2 raven AA zahteva razmerje kontrasta vsaj 4,5:1 za običajno besedilo in 3:1 za veliko besedilo (1.4.3) ter 3:1 za dele vmesnika, kot so robovi vnosnih polj in smiselne ikone (1.4.11). Običajni napaki sta svetlo siv tekst v polju in bledi gumbi. Barva sama ne sme nositi pomena — rdeč rob pri neveljavnem polju potrebuje tudi sporočilo o napaki.

Spreminjanje velikosti in prelom

Besedilo mora ostati uporabno pri povečavi na 200 % (1.4.4), vsebina pa mora delovati pri širini 320 CSS-pikslov brez vodoravnega drsenja (1.4.10). Dobra odzivna postavitev reši večino tega.

Ciljne površine, obrazci in napake

• Velikost ciljne površine: WCAG 2.2 raven AA zahteva ciljne površine za kazalec vsaj 24 × 24 CSS-pikslov ali dovolj razmika okoli manjših (2.5.8). Večje je na telefonih prijaznejše.
• Obrazci: vidne oznake (ne samo besedilo v polju), jasna navodila in sporočila o napakah, ki povedo, kaj ni prav in kako to popraviti, ob polju.
• Prijava: ne zahtevajte reševanja uganke ali prepisovanja kode brez alternative; dovolite upravitelje gesel in lepljenje (3.3.8 Accessible Authentication).

Pozivi, ki delujejo

Zgradi to stran v skladu z WCAG 2.2 raven AA: semantične orientacijske točke HTML, en h1 na stran z naslovi v pravem zaporedju, pravi elementi gumb in povezava, oznake pri vsakem polju obrazca, viden slog fokusa, kontrast besedila vsaj 4,5:1, alternativno besedilo na smiselnih slikah in alt="" na dekorativnih, nastavljen html lang.

Pregledaj strani /signup in /checkout glede dostopnosti. Preveri uporabo samo s tipkovnico, zaporedje fokusa, viden fokus, oznake, sporočila o napakah, kontrast in dostopna imena za gumbe z ikonami. Naštej vsako težavo s kriterijem WCAG, nato jo popravi, pri čemer čim manj spreminjaj vizualno zasnovo.

Mobilni meni ne deluje s tipkovnico. Naredi ga za gumb z aria-expanded, ob odprtju premakni fokus v meni, zapri ga s tipko Escape in vrni fokus na gumb.

Korak za korakom

1. Zaženite avtomatski pregled. Odsek Accessibility v Lighthouse v Chromovih orodjih za razvijalce ali razširitev axe v brskalniku, na vsaki glavni strani. Popravite vse, kar javi.
2. Odklopite miško. S tipko Tab pojdite skozi vsako stran in dokončajte vsako ključno nalogo — prijava, iskanje, nakup. Zapišite, kar ne dosežete, ne vidite fokusa ali se ne morete rešiti.
3. Povečajte na 200 % in zožite okno na širino telefona. Nič ne sme biti odrezano ali zahtevati vodoravnega drsenja.
4. Preizkusite bralnik zaslona deset minut: VoiceOver na Macu in iPhonu, TalkBack na Androidu ali NVDA na Windowsih (brezplačen). Poslušajte naslove, povezave in polja obrazcev. »Gumb« brez imena ali »povezava, kliknite tukaj« pomenita, da je treba delati.
5. Preverite kontrast besedila, gumbov in vnosnih polj z orodjem za preverjanje kontrasta.
6. Popravite in ponovno preizkusite iste naloge.
7. Objavite izjavo o dostopnosti, v kateri navedete, kateri standard ciljate in kako prijaviti težave — in na prijave odgovorite.

Pogoste napake

• Zanašanje na dodatek za dostopnost namesto popravljanja kode.
• Odstranjevanje obrob fokusa, ker so videti neurejeno, brez nadomestila.
• Besedilo v polju kot edina oznaka. Izgine, ko nekdo začne tipkati, in je pogosto z nizkim kontrastom.
• Povezave »Kliknite tukaj« in »Preberi več«. Brez konteksta uporabniki bralnikov zaslona slišijo seznam enakih povezav.
• Alternativno besedilo, napolnjeno s ključnimi besedami. Alternativno besedilo je za ljudi; opišite sliko.
• Testiranje enkrat. Vsaka nova funkcija lahko pokvari dostop s tipkovnico. Dodajte prehod s tipkovnico k svojemu testiranju pred zagonom.

Kontrolni seznam dostopnosti

• Avtomatski pregled (Lighthouse ali axe) brez napak na glavnih straneh
• Vsako opravilo je mogoče dokončati samo s tipkovnico
• Fokus je vedno viden in nikoli skrit za lepljivimi elementi
• Semantični naslovi, orientacijske točke, gumbi in povezave; nastavljen lang
• Smiselno alternativno besedilo; dekorativne slike alt=""; podnapisi pri videu
• Kontrast besedila ≥ 4,5:1 (veliko besedilo ≥ 3:1); deli vmesnika ≥ 3:1
• Deluje pri povečavi 200 % in širini 320 px
• Vsako polje obrazca ima vidno oznako in jasna sporočila o napakah
• Izjava o dostopnosti z možnostjo prijave težav

Za koncepte za tem preberite kaj je spletna dostopnost. Dostopen in dober dizajn se precej prekrivata; kako narediti dobro izgledajočo aplikacijo z AI pokriva vizualno plat.

Dostopnost na Mythexu

Mythex gradi s standardom, ki ga zahtevate, zato v prvi poziv in v nadaljnja vprašanja zapišite »WCAG 2.2 AA«. Za preverjanje majhnih zaslonov lahko uporabite okvir predogleda v velikosti telefona (Predogled in koda), vendar testi s tipkovnico, povečavo in bralnikom zaslona najbolje delujejo na objavljenem naslovu ali predogledu, odprtem v lastnem zavihku. Agenta prosite, naj pregleda stran, popravi, kar najde, nato popravke preizkusite sami — avtomatski pregled je začetek, ne potrditev.

Vprašanja