Je li dućan pristupačan osobama koje koriste čitače ekrana?

WebShopHR ne tvrdi formalnu certifikaciju, ali izvorni kod stranice sadrži niz konkretnih odluka koje olakšavaju korištenje čitačima ekrana, povećalom i tipkovnicom. Ove odluke su ugrađene u predloške i stilove, pa ih ne treba posebno uključivati.

Hrvatski jezik na svakoj stranici

Svaka stranica ima atribut lang="hr" na korijenskom elementu. To govori pregledniku i čitaču ekrana da tekst treba izgovarati hrvatski, uključujući č/ć/ž/š/đ. Bez tog atributa imena poput "Čajnica" ili "Županija" zvučale bi strano ili bi se pogrešno naglasile.

Semantički HTML

Stranica koristi semantičke elemente: <header>, <nav>, <main>, <footer>, <article>, <section>, <time>, a tabele imaju <thead> s vidljivim zaglavljem. Čitač ekrana može skakati među ovim cjelinama i brzo pronaći navigaciju ili glavni sadržaj.

Dosljedan fokus prsten

Svi interaktivni elementi (poveznice, gumbi, polja, odabirni okviri, tekstualna polja) imaju :focus-visible konturu u boji primarne teme. Kontura se vidi samo kod navigacije tipkovnicom, a ne kod klika mišem. U produkcijskom CSS-u nigdje nema outline: none, pa fokus nikad ne nestaje. Korisnik tipkovnice uvijek zna gdje se nalazi.

Boja teksta na gumbima prilagođava se kontrastu

Generator tema računa stvarnu relativnu luminanciju primarne boje i bira bijeli ili gotovo-crni tekst, ovisno o tome što daje veći kontrast. Tamne teme s tamnoplavim ili zlatnim primarnim bojama zato automatski dobivaju tamni tekst na gumbima, pa su uvijek čitljivi. Time se sprječavaju automatski proizvedeni nečitljivi gumbovi.

Polja imaju natpise unutar sebe

Sva polja u naplati omotana su u <label> element, što znači da čitač ekrana automatski zna koji natpis pripada kojem polju. Nema rizika od pogrešnog sparivanja posebnih atributa, pa čitač nikad ne pročita pogrešan natpis uz polje.

Logičke skupine u naplati

Naplata je podijeljena u logičke skupine pomoću <fieldset> i <legend>: osobni podaci, dodatne usluge, kupon, poklon bon, dostava, način plaćanja i R1 podaci. Čitač ekrana najprije pročita naziv skupine, pa tek onda kontrolu unutar nje. To korisniku daje kontekst prije nego što čuje pojedinačno polje.

Ispravne vrste unosa

Polja koriste odgovarajuće HTML5 vrste: email za e-mail, password za lozinku, search za pretragu, number za količine, a OIB koristi inputmode="numeric". Poklon bon koristi inputmode="decimal". Osim toga, obavezna polja imaju required, pa ih preglednik može provjeriti bez JavaScripta. Korisnik na mobitelu automatski dobiva pravog tipa tipkovnice.

Dekorativni elementi su skriveni od čitača

Zvjezdice ocjena, ikone u zaglavlju i podnožju, ukrasni razdjelnici i placeholderi su sakriveni od čitača ekrana. Čitač ekrana ih ne čita, dok se stvarna numerička ocjena i tekstualne oznake čitaju normalno. Time se izbjegava da korisnik sluša ponavljajuće zvjezdice umjesto korisnog sadržaja.

Slike nose opisne tekstove

Slike artikala nose opisni tekst iz kataloga. Dekorativni logotipi imaju prazan opis, a CMS sadrži checker koji upozorava ako aktivni artikl ima sliku bez opisa. Time se osigurava da kupac koji ne vidi sliku ipak dobije smislen opis, a tražilice imaju tekstualni sadržaj umjesto praznog prostora.

"Nema na zalihi" je vidljivo na tri načina

Kad artikl nema zalihe, stranica to prikazuje tekstualnom porukom, onemogućenom opcijom u padajućem izborniku varijante s natpisom "nema zalihe" i onemogućenim gumbom "Dodaj u košaricu". Sve tri informacije su dostupne tekstualno, a ne samo promjenom boje. Osoba s poremećajem vida boja tako uvijek zna da artikl nije dostupan.

Honeypot izvan tipkovničkog toka

Bot-zamka u naplati smještena je izvan ekrana i izvan tipkovničkog redoslijeda, te je skrivena od čitača ekrana. Stvarni kupci je ne vide, a čitači ekrana i tipkovnički korisnici je ne sreću. Služi za hvatanje botova, ali ne smeta ljudima.

Cookie traka i ključne kontrole imaju oznake

Cookie banner ima role="dialog" i aria-label, pretraga i košarica imaju aria-label, a AI chat je izgrađen oko nativnog <details>/<summary> elementa, pa ga je moguće otvarati i zatvarati tipkovnicom bez JavaScripta. Čitač ekrana prepoznaje banner kao dijalog i nudi jasan opis ključnih kontrola.

Više o temi: Izgled i brzina.