Web accessibility 2026. više nije "nice to have" — to je pravna obveza u EU (European Accessibility Act, primjenjiv od 28. lipnja 2025.), SEO faktor (Google penalizira nepristupačne sajtove), i etička obveza (15% populacije ima neku formu invaliditeta).
Većina WordPress sajtova ne ispunjava ni najosnovnije WCAG 2.1 AA kriterije. Ovaj vodič objašnjava što accessibility znači, što EAA zahtjeva, i daje 12-koračni praktični checklist za WP sajt — što je dostupno za 1 sat rada, što za 1 dan, što za 1 tjedan.
European Accessibility Act (EAA) — koga obavezuje
EAA je EU direktiva 2019/882, transponirana kroz nacionalne zakone u svim EU državama. U Hrvatskoj: Zakon o pristupačnosti mrežnih stranica.
Aktivno od 28. lipnja 2025. za:
- E-commerce sajtovi koji prodaju u EU.
- Javni servisi i institucije.
- Banke, transport, ICT services.
- Bilo koji sajt sa preko 10 zaposlenih i preko €2M prometa.
Mali sajtovi (under 10 zaposlenih, under €2M) su izuzeti, ali realno: ako prodaješ ili pružaš uslugu građanima EU, accessibility je očekivanje, ne luksuz.
WCAG 2.1 AA — što stvarno traži
WCAG (Web Content Accessibility Guidelines) je standard. Tri razine: A (osnovno), AA (industrija default), AAA (max). 2026 baseline je AA.
Glavna 4 principa (POUR):
- Perceivable (vidljivo) — content mora biti prezentiran tako da svi mogu percipirat.
- Operable (operativno) — UI mora biti operative svim korisnicima (keyboard, screen reader, voice).
- Understandable (razumljivo) — content i UI moraju biti razumljivi.
- Robust (robusno) — content mora radit sa različitim assistive technology.
12-korak praktični checklist za WordPress
1. Alt text na svim slikama
Najveći problem, najlakši fix. Svaka <img> mora imati alt atribut.
- Decorative slike:
alt=""(prazan). - Informativne slike: opisni alt — "Žena drži laptop u sunčanom uredu".
- Functional slike (button): što gumb radi — "Pošalji kontakt formu".
WordPress Media Library forsira alt prompt pri uploadu (od 6.0+). Plus plugin Bulk Auto Image Alt Attribute može retroaktivno ažurirat sve.
2. Heading hijerarhija
Jedna H1 per page (tipično page title). H2 za glavne sekcije, H3 za sub-sekcije. Ne preskači razine (H2 → H4 je bug).
Screen readeri navigiraju kroz heading-e. Pravilna hijerarhija = razumljiv outline.
3. Color contrast
Tekst mora imat dovoljan kontrast prema pozadini:
- Normal tekst (manji od 18pt): contrast ratio 4.5:1.
- Veliki tekst (18pt+ ili 14pt bold): 3:1.
- UI elementi (button, input border): 3:1.
Test: WebAIM Contrast Checker ili browser DevTools (Lighthouse). Mali sivi tekst na bijelom (svi naši grijesi) često fail-a.
4. Keyboard navigation
Sve interaktivne elemente mora biti moguće koristit samo tipkovnicom:
- Tab kroz sve linkove + form fields.
- Enter aktivira link/button.
- Space toggle checkbox / button.
- Esc zatvara modal/dropdown.
Test: ukloni miš, navigiraj cijeli sajt kroz Tab. Ako nešto ne radi, fail.
5. Focus indicators
Kad korisnik tab-uje, mora vidjet gdje je fokus. Default browser outline OK, ali često teme to remove-aju s CSS-om (outline: none). Vrati ili dodaj custom focus style:
:focus-visible {
outline: 3px solid #0066cc;
outline-offset: 2px;
}
6. Form labels
Svaki input mora imati label. Ne placeholder kao label (placeholder nestane kad korisnik tipka).
<label for="email">Email adresa</label>
<input id="email" type="email" name="email">
Ili screen-reader only label sa visually-hidden klasom.
7. Skip navigation link
"Skip to content" link na vrhu svake stranice za screen reader users. Browser ga ne pokazuje vizualno (tipično position: absolute; top: -9999px), ali fokusu pri Tab-u, postaje vidljiv.
<a href="#main-content" class="skip-link">Skoči na glavni sadržaj</a>
8. ARIA labels gdje potrebni
Za icon-only buttons, social media linkove, dropdown trigger-e — dodaj aria-label:
<button aria-label="Otvori menu">
<svg>...</svg>
</button>
Bez aria-label, screen reader ne zna što gumb radi.
9. Video transcripts i captions
Video bez captions = inaccessible za gluhe korisnike. YouTube auto-captions je minimum (bolje manual). Plus transcript ispod video-a daje text alternativu.
10. Language attribute
HTML root mora imati lang atribut:
<html lang="hr">
Plus mark inline language switches:
<p>The English term is <span lang="en">accessibility</span>.</p>
Screen reader mijenja izgovor prema language.
11. Error messages
Form error mora biti:
- Tekstualan (ne samo crveni border).
- Povezan sa field-om (kroz
aria-describedby). - Jasan — "Email adresa nije valjana", ne samo "Greška".
- Programmatically announce-an (screen reader ga čuje).
12. Responsive + zoom
Sajt mora radit sa text zoom 200% bez gubitka funkcionalnosti. Test: Ctrl/Cmd + dva puta. Ako se sadržaj gubi ili overlap-a, fix layout.
WordPress accessibility pluginovi
WP Accessibility
Besplatan plugin koji adds skip links, language attributes, fixes common issues. Solidan baseline.
One Click Accessibility
Toolbar koji posjetiteljima daje accessibility options (font size, kontrast). Pomaže UX, ne tehničku compliance.
UserWay / AccessiBe (overlay solutions)
"AI accessibility overlays" koji obećavaju instant compliance. Ne preporučujem. Stvarni accessibility eksperti ih kritiziraju jer ne rješavaju underlying probleme + mogu razbit screen reader navigation.
Accessibility Checker
Skenira post/page kroz built-in audit, pokazuje issues. Korisno za content authors.
Accessibility audit alati
- axe DevTools (Chrome extension) — najbolji auto-detect alat.
- WAVE (web-based) — visual indicators of issues directly on page.
- Lighthouse (Chrome DevTools) — accessibility score + recommendations.
- NVDA (besplatan Windows screen reader) — manual test sa stvarnim screen reader-om.
- VoiceOver (macOS/iOS built-in) — Apple side.
Auto alati hvate ~30-40% issues. Stvarna provjera zahtjeva manual testing sa screen reader-om.
Što EAA traži dokumentirano
Pored tehničke compliance, EAA traži:
- Accessibility statement — javni dokument na sajtu koji opisuje razinu compliance, poznate probleme, kontakt za feedback.
- Procedura za pritužbe — kako korisnik prijavi accessibility problem.
- Periodičan audit — minimum godišnji.
Template za accessibility statement: W3C Accessibility Statement Generator.
Cijena i timeline za compliance
Mali brand sajt
- Audit: 2-4 sata.
- Fixes: 4-8 sati.
- Statement + ongoing: 2 sata.
- Total: 1-2 dana rada, ~€500-1.500.
Srednji business sajt (20-50 stranica + forma + blog)
- Audit: 1-2 dana.
- Fixes: 3-5 dana.
- Statement + procedura: 1 dan.
- Total: 1-2 tjedna, ~€2.000-5.000.
WooCommerce shop (100+ products)
- Audit: 2-4 dana.
- Fixes (theme + checkout flow): 1-2 tjedna.
- Statement + dokumentacija: 2-3 dana.
- Total: 3-4 tjedna, ~€5.000-15.000.
Što WMD pristup nudi
- Accessibility audit tvog WP sajta — sve issues s prioritetom.
- Fix work — theme + content + form accessibility.
- Accessibility statement draft i objava.
- Ongoing audit sa godišnjom prijavom.
- Konzultacija oko EAA compliance za specifičnu industriju.
Najčešća pitanja
Mali sam, ne tičem se EAA?
Tehnički ako pod 10 zaposlenih + €2M, izuzet si od formalne obveze. Ali accessibility i dalje: poboljšava SEO, smanjuje legal risk od pojedinačnih tužbi, proširuje audience.
Hoće li accessibility overlay rješiti sve?
Ne. Overlay-i (UserWay, AccessiBe) marketinški obećavaju ali realnost je da rade samo površinske kozmetičke promjene. Pravi accessibility traži strukturalni rad u temi i sadržaju.
Što ako kupljena tema nije accessibility-friendly?
Većina premium tema 2026. ima accessibility-ready label. Provjeri prije kupnje. Ako stara tema fail-a, child theme custom CSS može popravit puno (focus styles, kontrast).
Mogu li tužit netko za nepristupačnost?
U EU sve više da. SAD već godine (ADA lawsuits). Bolje investirat €1.000-5.000 u proper audit nego riskirat $50.000 sudski trošak + reputacija.