Accessibility UX/UI Design

A Lighthouse Score of 100 Is Not an Accessibility Audit

| Co Digit

Run Lighthouse on a competently built marketing site and you will usually get a green accessibility score. That number is reassuring and it is close to meaningless. Automated checkers test the rules a machine can decide on its own — a missing alt attribute, a button with no accessible name, a contrast ratio it can compute from two hex values. The majority of the WCAG success criteria are not machine-decidable at all, because they depend on whether something makes sense, not on whether it exists.

An image with alt="image1.png" passes every automated test ever written. A tab order that jumps from the logo to the footer and back up to the menu passes too. So does a form where the only thing identifying a field is grey placeholder text that vanishes the moment you type.

What follows is the manual pass we run before we call a site done. It takes about two hours on a small site, needs no software you do not already have, and finds the things the score does not.

First, Run the Automated Tool Anyway

Start with the machine, because it clears the floor cheaply. Chrome DevTools ships Lighthouse; the axe DevTools extension is more thorough and reports which WCAG criterion each issue maps to. Ten minutes, and you have the low-hanging fruit gone before you spend attention on the parts that need judgment.

The trap is treating the resulting score as a grade. Read it as a smoke test: a bad score means something is definitely broken, a perfect score means nothing has been ruled out. Everything below is what remains after the tool goes quiet.

Test One: Put the Mouse Away (10 minutes)

Load the homepage, put your hand in your lap, and press Tab until you have been through the entire page. This single test surfaces more real defects than any other, because keyboard operability is the substrate everything else sits on — screen reader users, switch device users, and anyone with a tremor all depend on it.

Four things to watch for:

While you are there, check for a skip link. On a page with a twelve-item nav, a keyboard user presses Tab twelve times before reaching the content — on every page, every time.

Test Two: Read the Headings Alone (15 minutes)

Screen reader users navigate by heading far more often than they read a page top to bottom. Your heading structure is the table of contents, whether you designed it as one or not.

Pull the outline out of the page and look at it in isolation:

document.querySelectorAll('h1,h2,h3,h4,h5,h6')
  .forEach(h => console.log(h.tagName, h.textContent.trim()));

You are checking three things: exactly one h1, no skipped levels on the way down, and headings that describe their section rather than decorate it. The failure mode is almost always the same — someone picked h4 because it was the right size, and the document outline is now fiction.

Test Three: Take the Forms Apart (20 minutes)

Forms are where accessibility failures cost money directly, because a form a user cannot complete is a lead you never receive.

Click each field's visible label. If the cursor does not land in the input, the label is not associated with it, and a screen reader will announce an unlabelled field. The fix is boring and takes a minute:

<label for="email">Work email</label>
<input id="email" name="email" type="email"
       autocomplete="email" required />

Then check the rest of the chain. A placeholder is not a label — it disappears on input and its contrast is usually poor by design. Error messages must be reachable from the field via aria-describedby, not just painted in red nearby, because colour alone is not information. And autocomplete attributes are a genuine accessibility feature under WCAG 1.3.5, not a convenience: they let a browser fill a name, address, or phone number that a user with a motor or cognitive impairment would otherwise type by hand.

Test Four: Compute Contrast, Do Not Eyeball It (15 minutes)

WCAG 2.1 AA requires a contrast ratio of 4.5:1 for normal text and 3:1 for large text and for the visual boundaries of interactive controls. Designers routinely miss this, and so did we.

This site's muted grey, #888 on our #0a0a0a background, comes to roughly 5.6:1 — comfortably passing. The footer copyright line is #555 on the same background, which is about 2.7:1, and fails. Same page, same palette, same designer, one value apart. That is the argument for computing the number instead of trusting your eye on a good monitor in a dark room.

Two places people forget to check: the focus indicator itself, which is a non-text control boundary and needs 3:1 against what is behind it, and the second theme. If you ship a light mode and a dark mode, you have two palettes to verify and most teams only ever check the one they use.

Test Five: Zoom to 200% (10 minutes)

Press Cmd/Ctrl and + until the browser reports 200%, then read the page. WCAG requires content to remain usable at that zoom, and separately requires a 320px-wide reflow without a horizontal scrollbar — the same constraint your mobile layout already satisfies, which is why responsive sites usually pass this and fixed-width ones fail it badly.

Look for text clipped by a fixed-height container, a sticky header that now eats half the viewport, and anything that only scrolls sideways.

Why 2026 Is the Year the Argument Got Easier

Accessibility used to be sold on goodwill. It now has a compliance edge on both sides of the Atlantic, which changes who in the client's organisation cares.

In the EU, the European Accessibility Act has applied since June 2025 to a defined set of consumer-facing products and services — e-commerce, consumer banking, e-books, transport ticketing and others — and member states have transposed it into national law, Croatia included. The harmonised technical standard, EN 301 549, points at WCAG 2.1 level AA, which is exactly what the tests above are checking. Microenterprises providing services (broadly, under ten staff and under €2 million turnover) are exempted from the service obligations, so plenty of small firms are outside the scope — but their larger clients are not, and requirements travel down a supply chain fast.

In the US, the pressure comes from litigation rather than a single statute: several thousand ADA Title III web accessibility cases are filed each year, aimed overwhelmingly at retail and consumer sites. Neither of these is legal advice, and scope questions are genuinely fiddly — if a client's exposure is real, that is a conversation for their counsel, not their developers.

What We Actually Do With the Results

Two hours of testing produces a list, and lists get ignored unless they are ordered. We sort by who gets blocked rather than by which criterion number was violated:

Most of what lands in the first two buckets is a small, local fix: a div becomes a button, a for attribute appears, a focus style comes back. The expensive part is never the fixing. It is discovering, eighteen months into a design system, that a component everyone reuses was never operable by keyboard, and that the fix now touches forty pages.

Which is the real reason to run this pass early and repeat it. Not the score, and not the lawsuit — just that a site nobody can use is a site nobody uses.

Pokrenite Lighthouse na uredno izrađenom marketinškom sajtu i gotovo sigurno ćete dobiti zelenu ocjenu pristupačnosti. Taj je broj umirujuć i gotovo bez značenja. Automatski alati testiraju pravila o kojima stroj može sam odlučiti — nedostajući alt atribut, gumb bez pristupačnog imena, omjer kontrasta koji može izračunati iz dvije hex vrijednosti. Većina WCAG kriterija uopće nije strojno odlučiva, jer ovisi o tome ima li nešto smisla, a ne postoji li.

Slika s alt="image1.png" prolazi svaki automatski test ikad napisan. Redoslijed tabulatora koji skače s logotipa na podnožje pa natrag na izbornik također prolazi. Kao i obrazac u kojem polje identificira samo sivi placeholder tekst koji nestane čim počnete tipkati.

Ovo je ručni prolaz koji radimo prije nego što sajt proglasimo gotovim. Na manjem sajtu traje oko dva sata, ne treba vam softver koji već nemate, i nalazi ono što ocjena ne nalazi.

Prvo ipak pokrenite automatski alat

Počnite od stroja, jer jeftino raščisti teren. Chrome DevTools dolazi s Lighthouseom; ekstenzija axe DevTools temeljitija je i uz svaki problem javlja na koji se WCAG kriterij odnosi. Deset minuta i nisko voće je obrano prije nego što potrošite pažnju na dijelove koji traže prosudbu.

Zamka je tretirati dobivenu ocjenu kao ocjenu. Čitajte je kao dimni test: loša ocjena znači da nešto sigurno ne valja, savršena ocjena ne znači da je išta isključeno. Sve što slijedi ono je što ostaje kad alat utihne.

Test prvi: maknite miša (10 minuta)

Učitajte naslovnicu, spustite ruku u krilo i pritišćite Tab dok ne prođete cijelu stranicu. Ovaj jedan test izbaci više stvarnih grešaka nego bilo koji drugi, jer je upravljivost tipkovnicom podloga na kojoj sve ostalo stoji — o njoj ovise i korisnici čitača ekrana, i korisnici switch uređaja, i svatko tko ima tremor.

Četiri stvari na koje pazite:

Dok ste već tu, provjerite postoji li skip link. Na stranici s navigacijom od dvanaest stavki korisnik tipkovnice pritisne Tab dvanaest puta prije nego što dođe do sadržaja — na svakoj stranici, svaki put.

Test drugi: pročitajte samo naslove (15 minuta)

Korisnici čitača ekrana kreću se po naslovima daleko češće nego što stranicu čitaju od vrha do dna. Vaša struktura naslova jest sadržaj dokumenta, bez obzira jeste li je tako zamislili.

Izvucite strukturu iz stranice i pogledajte je izdvojeno:

document.querySelectorAll('h1,h2,h3,h4,h5,h6')
  .forEach(h => console.log(h.tagName, h.textContent.trim()));

Provjeravate tri stvari: točno jedan h1, nijedna preskočena razina prema dolje, i naslove koji opisuju svoj odjeljak umjesto da ga ukrašavaju. Način na koji to obično pukne uvijek je isti — netko je uzeo h4 jer je bio prave veličine, a struktura dokumenta sad je fikcija.

Test treći: rastavite obrasce (20 minuta)

Obrasci su mjesto gdje greške u pristupačnosti izravno koštaju, jer obrazac koji korisnik ne može ispuniti upit je koji nikad niste primili.

Kliknite vidljivu oznaku svakog polja. Ako kursor ne sleti u polje, oznaka nije povezana s njim i čitač ekrana najavit će neoznačeno polje. Popravak je dosadan i traje minutu:

<label for="email">Poslovni e-mail</label>
<input id="email" name="email" type="email"
       autocomplete="email" required />

Zatim provjerite ostatak lanca. Placeholder nije oznaka — nestaje pri unosu, a kontrast mu je po dizajnu obično slab. Poruke o greškama moraju biti dohvatljive iz polja preko aria-describedby, a ne samo obojane crveno negdje pokraj, jer boja sama po sebi nije informacija. A autocomplete atributi stvarna su značajka pristupačnosti prema WCAG 1.3.5, ne udobnost: dopuštaju pregledniku da ispuni ime, adresu ili broj telefona koji bi korisnik s motoričkim ili kognitivnim teškoćama inače tipkao rukom.

Test četvrti: izračunajte kontrast, nemojte ga procjenjivati okom (15 minuta)

WCAG 2.1 AA traži omjer kontrasta 4,5:1 za običan tekst i 3:1 za veliki tekst te za vizualne granice interaktivnih kontrola. Dizajneri to redovito promaše, pa smo i mi.

Prigušena siva na ovom sajtu, #888 na našoj pozadini #0a0a0a, iznosi otprilike 5,6:1 — udobno prolazi. Redak s autorskim pravima u podnožju je #555 na istoj pozadini, što je oko 2,7:1, i pada. Ista stranica, ista paleta, isti dizajner, jedna vrijednost razlike. To je argument za računanje broja umjesto pouzdanja u vlastito oko na dobrom monitoru u mračnoj sobi.

Dva mjesta koja se zaboravljaju provjeriti: sam indikator fokusa, koji je granica netekstualne kontrole i treba 3:1 prema onome iza sebe, i druga tema. Ako isporučujete svijetli i tamni način, imate dvije palete za provjeriti, a većina timova provjeri samo onu koju sama koristi.

Test peti: zumirajte na 200% (10 minuta)

Pritišćite Cmd/Ctrl i + dok preglednik ne javi 200%, pa pročitajte stranicu. WCAG traži da sadržaj na tom zumu ostane upotrebljiv, a zasebno traži i preslagivanje na širini od 320 piksela bez vodoravne trake za pomicanje — isto ograničenje koje vaš mobilni raspored već zadovoljava, zbog čega responzivni sajtovi ovo obično prolaze, a oni fiksne širine teško padaju.

Tražite tekst odrezan spremnikom fiksne visine, ljepljivo zaglavlje koje sad pojede pola ekrana i sve što se pomiče samo postrance.

Zašto je 2026. godina u kojoj je argument postao lakši

Pristupačnost se nekad prodavala na dobru volju. Sada ima i regulatorni rub s obje strane Atlantika, što mijenja tko u klijentovoj organizaciji za nju mari.

U EU se Europski akt o pristupačnosti primjenjuje od lipnja 2025. na definirani skup proizvoda i usluga namijenjenih potrošačima — e-trgovinu, potrošačko bankarstvo, e-knjige, prodaju prijevoznih karata i druge — a države članice, uključujući Hrvatsku, prenijele su ga u nacionalno zakonodavstvo. Usklađena tehnička norma EN 301 549 upućuje na WCAG 2.1 razinu AA, a upravo to gornji testovi i provjeravaju. Mikropoduzeća koja pružaju usluge (grubo, manje od deset zaposlenih i ispod dva milijuna eura prometa) izuzeta su od obveza za usluge, pa je dosta malih tvrtki izvan opsega — ali njihovi veliki klijenti nisu, a zahtjevi se lancem dobavljača spuštaju brzo.

U SAD-u pritisak dolazi od parnica, a ne od jednog zakona: godišnje se podnese nekoliko tisuća predmeta o web pristupačnosti prema ADA Title III, uvelike usmjerenih na maloprodajne i potrošačke sajtove. Ništa od ovoga nije pravni savjet, a pitanja opsega znaju biti zapetljana — ako je klijentova izloženost stvarna, to je razgovor za njihovog pravnika, a ne za programere.

Što zapravo radimo s rezultatima

Dva sata testiranja proizvedu popis, a popisi se ignoriraju ako nisu poredani. Sortiramo po tome tko je blokiran, a ne po tome koji je broj kriterija prekršen:

Većina onoga što padne u prve dvije skupine mali je, lokalan popravak: div postane button, pojavi se for atribut, vrati se stil fokusa. Skupi dio nikad nije popravljanje. Skupo je otkriti, osamnaest mjeseci u dizajn sustav, da komponenta koju svi ponovno koriste nikad nije bila upravljiva tipkovnicom i da popravak sad dira četrdeset stranica.

To je pravi razlog da ovaj prolaz napravite rano i ponavljate ga. Ne ocjena, i ne tužba — nego to da sajt koji nitko ne može koristiti jest sajt koji nitko ne koristi.

← Back to blog