Kako testiramo spletno stran z NVDA bralnikom?

NVDA je brezplačen in odprtokodni bralnik zaslona za operacijski sistem Windows, ki ga je razvil NV Access. Omogoča slepim in slabovidnim uporabnikom dostop do digitalnih vsebin z uporabo sintetiziranega govora ali osveževalnih brajevih vrstic.

Glavne značilnosti NVDA:

• Brezplačen in odprtokoden
• Deluje na operacijskem sistemu Windows
• Podpira več jezikov
• Omogoča navigacijo po spletnih straneh, dokumentih in aplikacijah

NVDA je eden izmed najbolj priljubljenih bralnikov zaslona in ga uporablja veliko ljudi po vsem svetu. Njegove prednosti pri testiranju vključujejo:

• Brezplačnost – razvijalci in oblikovalci ga lahko preizkusijo brez dodatnih stroškov.
• Realistično testiranje – omogoča vpogled v izkušnjo slepih in slabovidnih uporabnikov.
• Podpora za ARIA oznake – pomaga pri preverjanju pravilne implementacije dostopnosti.

V primerjavi z drugimi bralniki zaslona, kot je JAWS, ima NVDA manj naprednih funkcij, vendar je zaradi svoje dostopnosti in enostavne uporabe odlična izbira za testiranje.

>> Potrebujete izdelavo spletne strani po zakonu o Dostopnosti?

Koraki za namestitev NVDA:

1. Obiščite uradno spletno stran NV Access
2. Prenesite najnovejšo različico NVDA
3. Odprite preneseno datoteko in sledite navodilom za namestitev
4. Po zaključku namestitve zaženite NVDA s pritiskom CTRL + ALT + N

Za učinkovito testiranje morate poznati osnovne ukaze za navigacijo po spletni strani:

NVDA + Space: Preklop načina branja

H: Premik na naslednji naslov

Shift + H: Premik na prejšnji naslov

Tab: Premik na naslednji interaktivni element

Shift + Tab: Premik na prejšnji interaktivni element

NVDA + F7: Prikaz seznama vseh elementov na strani

5. Preverjanje strukture strani

Struktura spletne strani mora biti logična in omogočati enostavno navigacijo z bralnikom zaslona. Pri tem uporabljamo naslednje metode:

Uporaba naslovov (heading elements)

Naslovi pomagajo uporabnikom hitro razumeti hierarhijo vsebine in omogočajo lažje premikanje po strani. Za preverjanje naslovov uporabite tipko H v NVDA (tipka NVDA je tipka “Insert” na tipkovnici).

Koraki:

• Pritisnite H za premikanje med naslovi na strani.
• Pritisnite Shift + H za premikanje nazaj med naslovi.
• Uporabite NVDA + F7 za seznam vseh naslovov na strani.

Kaj preveriti?

• Ali so naslovi uporabljeni v pravilnem zaporedju (H1 → H2 → H3, ne H3 pred H2)?
• Ali naslovi ustrezno opisujejo vsebino?
• Ali so naslovi uporabljeni za strukturiranje vsebine ali zgolj zaradi vizualnega učinka?

Preverjanje seznamov in tabel

Seznami in tabele morajo biti pravilno označeni, da jih lahko bralnik zaslona prepozna.

Koraki:

• Premikajte se s L za skakanje med seznami.
• S tipko T skočite na naslednjo tabelo, s Ctrl + Alt + puščicami se premikate po celicah in poslušate, ali NVDA ob celici prebere glavo stolpca.
• Preverite, ali imajo tabele ustrezne oznake stolpcev in vrstic (za glave stolpcev).

6. Preverjanje obrazcev in interaktivnih elementov

Interaktivni elementi, kot so obrazci, gumbi in potrditvena polja, morajo biti dostopni brez miške in ustrezno označeni.

Preverjanje obrazcev

Obrazci morajo imeti jasne oznake, ki so povezane s polji za vnos, da jih NVDA pravilno prebere.

Koraki:

• Pritisnite Tab, da se premikate med polji obrazca.
• Pritisnite Shift + Tab, da se vrnete nazaj.
• Preverite, ali NVDA pravilno prebere oznako polja.

Kaj preveriti?

• Ali so polja obrazca jasno označena?
• Ali imajo polja ustrezne oznake ali aria-labelledby atribute?
• Ali so potrditvena polja in izbirni gumbi (radio buttons) ustrezno opisani?

Preverjanje gumbov

Gumbi morajo imeti smiselne oznake, ki opisujejo njihovo funkcijo.

Koraki:

• Pomikajte se s Tab do gumbov.
• Ko je gumb v fokusu, poslušajte, ali NVDA prebere njegovo oznako. Enter ga sproži.

Kaj preveriti?

• Ali gumbi vsebujejo smiselne oznake? (npr. “Pošlji obrazec” namesto “Klikni tukaj”)
• Ali so gumbi narejeni z elementom <button> ali imajo role=”button”?

7. Preverjanje alternativnega besedila za slike

Vsaka slika na spletni strani mora imeti opis, ki pomaga slepim uporabnikom razumeti njeno vsebino.

Slike preverimo s tipko G, ki skoči na naslednjo sliko.

Koraki:

• Pritisnite G in poslušajte opis slike.
• Če NVDA reče le “graphic”, slika nima alternativnega besedila.

Kaj preveriti?

• Ali ima vsaka pomembna slika ustrezno alt besedilo?
• Ali so dekorativne slike označene z alt=””, da jih bralnik zaslona ignorira?
• Ali alt besedilo smiselno opisuje sliko brez nepotrebnih besed (“Slika prikazuje…”)?

8. Preverjanje povezav in navigacije

Povezave morajo imeti jasna besedila, ki uporabniku povedo, kam ga povezava vodi.

Preverjanje povezav

• Pritisnite NVDA + F7, da prikažete seznam vseh povezav na strani.
• Premikajte se po povezavah in preverite, ali so opisi smiselni.

Kaj preveriti?

• Ali so povezave opisne in ne uporabljajo besedil, kot so “Kliknite tukaj”?
• Ali so povezave smiselno strukturirane in uporabniki vedo, kam vodijo?

9. Preverjanje ARIA oznak

ARIA (Accessible Rich Internet Applications) je tehnologija, ki omogoča izboljšano dostopnost dinamičnih spletnih vsebin.

Kako preveriti pravilno uporabo ARIA oznak?

• Preverite, ali dinamični elementi (npr. modalna okna, meniji) uporabljajo aria-live za obveščanje bralnika zaslona.
• Uporabite aria-label ali aria-labelledby, kjer ni vizualne oznake.
• Odprite meni ali okno in poslušajte, ali NVDA sam prebere, kaj se je spremenilo.

Kaj preveriti?

• Ali se ARIA uporablja tam, kjer je potrebna?
• Ali dinamične posodobitve vsebine ustrezno obvestijo uporabnika?
• Ali uporaba ARIA ne zamenjuje pravilne HTML semantike?

>> Preverite dostopnost strani s spletnimi orodji?

Napaka: Manjkajoča besedila pri gumbih

Rešitev: Dodajte ustrezne aria-label ali besedilne opise

Napaka: Slabe oznake povezav (“Kliknite tukaj”)

Rešitev: Uporabite opisne povezave (npr. “Preberite več o dostopnosti”)

Napaka: Nepravilen vrstni red naslovov

Rešitev: Uporabite logično zaporedje H1 → H2 → H3

• Uporabite semantično HTML strukturo
• Dodajte alternativna besedila k slikam
• Omogočite popolno navigacijo s tipkovnico
• Preverite uporabo ARIA atributov
• Redno testirajte spletno stran z NVDA in drugimi orodji (npr. WAVE, Lighthouse)

Testiranje spletnih strani z NVDA je najbolj praktičen primer testiranja pri zagotavljanju dostopnosti za vse uporabnike. S pravilno implementacijo dostopnostnih standardov lahko izboljšate uporabniško izkušnjo in omogočite, da vaša vsebina doseže širše občinstvo.