Spletna dostopnost

Ko so naslovi spletne strani pravilno prikazani na preusmerjevalnih straneh ali v rezultatih iskanja, lahko uporabniki spletnega mesta hitro dostopajo do želenih informacij. Uporabniški agent (programska oprema, ki pridobi, upodablja in podpira interakcijo končnega uporabnika z informacijami spletnega mesta) lahko prikaže naslov spletne strani v naslovni vrstici brskalnika ali kot ime zavihka. Pravilno izražen namen spletne strani v naslovu je tako ključnega pomena za jasno razumevanje prikazanih vsebin.

• Primer 1: Nejasen naslov spletne strani: Naslov spletne strani je nejasen ter uporabniku ne pove, kam točno vodi.
• Primer 2: Naslov vsebuje preveč ključnih besed: Naslov spletne strani vsebuje preveliko število ključnih besed, kar lahko uporabnika zmede.
• Primer 3: Spletna stran ne vsebuje naslova: Obiskana spletna stran ne vsebuje naslova. Na naslovni vrstici brskalnika lahko piše »Untitled document« ali »index.html«.

Povezani WCAG kriteriji:
Success Criterion 2.4.2 Page Titled (Nivo A)
https://www.w3.org/TR/WCAG21/#page-titled

Primerne metode za zagotavljanje skladja s kriterijem:
https://www.w3.org/WAI/WCAG21/Techniques/general/G88

Jezik spletne strani mora biti programsko določen (določen s programsko opremo iz uporabniško-priskrbljenih podatkov na tak način, da lahko različni uporabniški agenti, vključno z asistenčno tehnologijo, prepoznajo in predstavijo informacije uporabnikom spletne strani na različne načine). Če je tako, lahko tako podporna tehnologija kot tradicionalni uporabniški agenti natančneje upodabljajo besedilo. Spremembe jezika na spletni strani naj bodo za lažje prepoznavanje označene z atributom lang.

• Primer 1: Na spletni strani je uporabljenih več jezikov: Vsebina na spletni strani je zapisana v več jezikih. Ko je na spletni strani uporabljenih več jezikov, je privzeti jezik za obdelavo besedila tisti, ki se največ uporablja.
• Primer 2: HTML dokument nima nastavljenega privzetega jezika: Spletna stran v html dokumentu nima določenega primarnega jezika (manjka atribut lang), zaradi česar bralniki zaslona dokument berejo v svojih privzetih nastavitvah, kar lahko povzroči nepravilno izgovarjavo.

Povezani WCAG kriteriji:
Success Criterion 3.1.1 Language of Page (Nivo A)
https://www.w3.org/TR/WCAG21/#language-of-page

 Drugi sorodni kriteriji:
Success Criterion 3.1.2 Language of Parts (Nivo AA)
https://www.w3.org/WAI/WCAG21/Understanding/language-of-parts

Primerne metode za zagotavljanje skladja s kriterijem:
https://www.w3.org/WAI/WCAG21/Techniques/html/H57

Izpostavljena komponenta spletne strani, na katero smo osredotočeni, pomaga uporabnikom spletne strani pri prikazu aktivnega elementa na spletni strani. Lahko se prikaže kot vidna sprememba gumba, ki označuje, da je gumb v uporabi. Uporabnik mora biti sposoben ugotoviti, na katerem elementu se trenutno nahaja. Izpostavljena komponenta mora biti dovolj očitna v vsaj enem načinu delovanja.

• Primer 1: Izpostavljena komponenta spletne strani je skoraj neopazna: Med uporabo tipke TAB za navigacijo po spletni strani se komponentne nejasno izpostavijo. Izpostavitev komponente spletne strani mora imeti dovolj kontrasta med ozadjem spletnega mesta, da jo uporabniki lahko hitro opazijo.
• Primer 2: Izpostavljena komponenta spletne strani ni vidna: Med uporabo tipke TAB za navigacijo po spletni strani ni jasno vidne izpostavitve na elementih spletnega mesta.

Povezani WCAG kriteriji:
Success Criterion 2.4.7 Focus Visible (Nivo AA)
https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html

Primerne metode za zagotavljanje skladja s kriterijem:
https://www.w3.org/WAI/WCAG21/Techniques/general/G149
https://www.w3.org/WAI/WCAG21/Techniques/css/C15
https://www.w3.org/WAI/WCAG21/Techniques/css/C40

Posamezniki s posebnimi omejitvami za navigacijo po spletni strani uporabljajo tipkovnico. Vsi interaktivni elementi morajo biti dostopni uporabnikom, ki se po spletnem mestu premikajo s pomočjo tipkovnice. To vključuje spustne menije, gumbe, pogovorna okna, povezave in elemente obrazca. Če katerekoli funkcije strani ne moremo opraviti oz. do kateregakoli interaktivnega elementa strani ne moremo dostopati brez uporabe miške, se kriterij oceni z neizpolnjevanjem.

• Primer 1: S tipkovnico ni možno dostopati do vseh interaktivnih elementov spletne strani: Med uporabo tipk na tipkovnici za navigacijo po spletni strani ni jasno vidne izpostavitve na nekaterih elementih spletnega mesta.
• Primer 2: S tipkovnico ni možno dostopati do nobenih interaktivnih elementov spletne strani: Med uporabo tipk na tipkovnici za navigacijo po spletni strani ni jasno vidne izpostavitve na elementih spletnega mesta.
• Primer 3: Do enega ali več interaktivnih elementov na spletni strani se lahko dostopa le s kazalno napravo: Do nekaterih interaktivnih elementov spletne strani ni možno dostopati s tipkovnico, ker se odzovejo le na določeno interakcijo s kazalno napravo, kot je klik miške.

Povezani WCAG kriteriji:
Success Criterion 2.1.1 Keyboard (Nivo A)
https://www.w3.org/WAI/WCAG21/Understanding/keyboard.html

Primerne metode za zagotavljanje skladja s kriterijem:
https://www.w3.org/WAI/WCAG21/Techniques/general/G202
https://www.w3.org/WAI/WCAG21/Techniques/html/H91
https://www.w3.org/WAI/WCAG21/Techniques/general/G90

Spletna mesta morajo nuditi vizualni namig za uporabnike, ki morda ne bodo razlikovali med različnimi barvami besedila. Znotraj odstavka ali drugega bloka besedila se barva pogosto uporablja za označevanje besed, ki služijo kot povezave.

• Primer 1: Povezave se razlikujejo od navadnega besedila le po barvi: Povezave, ki temeljijo izključno na barvi, morda ne bodo očitne osebam z barvno slepoto.

Povezani WCAG kriteriji:
Success Criterion 1.4.1 Use of Color (Nivo A)
https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.html

Primerne metode za zagotavljanje skladja s kriterijem:
https://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/G183
https://www.w3.org/WAI/WCAG21/Techniques/general/G14

Besedilo povezave je vrsta zapisa, ki je povezana s ciljem povezave, ki sega od ene same besede, znaka, skupine besed ali celo številnih fraz. Uporabnike obvešča o njihovem predvidenem cilju, medtem ko se kontekst povezave obravnava kot dodatni / podporni podatki. Povezave morajo biti opremljene z besedilom, ki opredeljuje namen povezave brez potrebe po dodatnem kontekstu. Metoda SurfMore dovoljuje le eno (1) manj jasno povezavo. V primeru več dvoumnih povezav se kriterij oceni z neizpolnjevanjem.

• Primer 1: Eno ali več besedil povezav je dvoumnih: Če se dvoumna besedila berejo izven konteksta, uporabnika ne obvestijo pravilno o svojem cilju.
• Primer 2: Eno ali več besedil povezav je dvoumnih, vendar vsebinsko obveščajo uporabnika o svojem cilju: Povezava z napisom »Kliknite tukaj« je opremljena s primernimi asociacijami.

Povezani WCAG kriteriji:
Success Criterion 2.4.4 Link Purpose (In Context) (Nivo A)
https://www.w3.org/WAI/WCAG21/Understanding/link-purpose-in-context.html

Primerne metode za zagotavljanje skladja s kriterijem:
https://www.w3.org/WAI/WCAG21/Techniques/general/G91
https://www.w3.org/WAI/WCAG21/Techniques/general/G53

Ko je slikovni ali grafični element dodan k spletni vsebini, mu je potrebno dodati ustrezno nadomestno besedilo. Uporabniki z vizualnimi ali kognitivnimi omejitvami lahko uporabljajo bralnike zaslona, ​​da napovejo nadomestno besedilo namesto slik, kar jim pomaga razumeti vsebino in funkcijo vizualnih elementov. Če se slika ne naloži, bo brskalnik namesto nje prikazal alternativno / nadomestno besedilo.

• Primer 1: Eden ali več slikovnih elementov ne vsebuje alternativnega / nadomestnega besedila: Vsi slikovni elementi na spletni strani morajo vsebovati alternativno / nadomestno besedilo. Upoštevaj, da slikovni in grafični elementi na spletnem mestu vključujejo naslednje: logotipe, fotografije predmetov e-trgovine, naslovne fotografije za članke v blogih, glavne pasice, zemljevide, fotografije, infografike in grafikone.
• Primer 2: Eden ali več slikovnih elementov vsebujejo neustrezen alternativno / nadomestno besedilo:  Vsi slikovni elementi na spletni strani morajo vsebovati razumljivo alternativno / nadomestno besedilo, ki pravilno opisuje sliko. Nadomestno besedilo lahko vsebuje kup naključnih črk in številk ali pa ne opisuje ustrezno slikovnega elementa, zaradi česar je nadomestno besedilo neuporabno.

Povezani WCAG kriteriji:
Success Criterion 1.1.1 Non-text Content (Nivo A)
https://www.w3.org/WAI/WCAG21/Understanding/non-text-content.html

Primerne metode za zagotavljanje skladja s kriterijem:
https://www.w3.org/WAI/WCAG21/Techniques/general/G94

Podnapisi so pisna predstavitev govora in neizgovorjenih zvočnih informacij, ki so potrebne za ustrezno razumevanje vsebine. To vključuje izgovorjene besede in ključne zvoke, kot so glasba, smejanje in hrup. Da bi bili podnapisi bolje kontekstualizirani, morajo biti usklajeni ter sinhronizirani z vizualno vsebino in pravilno prikazani v večpredstavnostnem predvajalniku.

• Primer 1: Eden ali več videoposnetkov ne vsebuje podnapisov: Vsi videoposnetki na spletni strani morajo imeti na voljo podnapise.
• Primer 2: Podnapisi niso pravilno sinhronizirani: Podnapisi morajo biti sinhronizirani z izgovorjenimi besedami. Vsi videoposnetki na spletni strani morajo imeti pravilno sinhronizirane napise.
• Primer 3: V podnapisih manjkajo neverbalni zvoki: Vsi podnapisi morajo vsebovati tudi razne neverbalne zvoke ki uporabnikom pomagajo bolje razumeti vsebino videoposnetka.
• Primer 4: Podnapisi so težko berljivi: Podnapisi morajo biti berljivi in ​​čitljivi. Uporabniku se mora omogočiti prilagoditev velikosti, barve in pisave podnapisov.
• Primer 5: Samodejni podnapisi: Podnaslovljene besede ne odražajo natančno povedanega, saj osebe govorijo v različnih narečjih ali uporabljajo okrajšave, ki jih ni v slovarju podnapisov.

Povezani WCAG kriteriji:
Success Criterion 1.2.2 Captions (Prerecorded) (Nivo A)
https://www.w3.org/WAI/WCAG21/Understanding/captions-prerecorded.html

Primerne metode za zagotavljanje skladja s kriterijem:
https://www.w3.org/WAI/WCAG21/Techniques/general/G93
https://www.w3.org/WAI/WCAG21/Techniques/general/G87

Dostopno spletno mesto mora vsebovati zadosten kontrast med besedilom in ozadjem za uporabnike s slabovidnostjo (uporabniki, ki ne uporabljajo asistenčne tehnologije za izboljšanje kontrasta). Besedilo, ki je izključno estetsko in ne daje nobenih pomembnih informacij, ni vključeno.

• Primer 1: Nekatera ali vsa večja besedila (18 ali 14 tipografske enote krepko) ne izpolnjujejo minimalnih zahtev: Nekatera ali vsa besedila na spletni strani ne izpolnjujejo minimalnega razmerja 3:1 med barvo besedila in barvo ozadja.
• Primer 2.1: Nekatera ali vsa navadna besedila (velikost pisave manjša od 18 tipografske enote ali 24 tipografske enote) ne izpolnjujejo minimalnih zahtev: Nekatera ali vsa besedila na spletnem mestu ne izpolnjujejo minimalnega razmerja 4,5:1 med barvo besedila in barvo ozadja.
• Primer 2.2: Nekatera ali vsa krepka besedila (velikost pisave nižja od 14 tipografske enote ali 18,5 tipografske enote) ne izpolnjujejo minimalnih zahtev: Nekatera ali vsa besedila na spletnem mestu ne izpolnjujejo minimalnega razmerja 4,5:1 med barvo besedila in barvo ozadja.

Povezani WCAG kriteriji:
Success Criterion 1.4.3 Contrast (Minimum) (Nivo AA)
https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html

Primerne metode za zagotavljanje skladja s kriterijem:
https://www.w3.org/WAI/WCAG21/Techniques/general/G18
https://www.w3.org/WAI/WCAG21/Techniques/general/G145

Z organiziranjem spletnih strani po naslovih uporabniki lažje pridobijo občutek o vrstnem redu in strukturi spletne strani. Naslovi so običajno večji in bolj razločni kot navadno besedilo. Uporabniki, ki uporabljajo bralnike zaslona, ​​se lahko premikajo po spletni strani po naslovih, poslušajo seznam vseh naslovov in se preusmerijo na želeni naslov ter tam začnejo brati vsebino.

• Primer 1: Naslovi na spletni strani so v napačnem vrstnem redu: Naslovi na spletni strani ne sledijo pravilnemu vrstnemu redu (h1-h6).
• Primer 2: Oznaka h1 ni prvi naslov na spletni strani: Če oznaka h1 ni prvi element na spletni strani, uporabnik bralnika zaslona, ​​ki gre na ta naslov, spregleda vso spletno vsebino, ki je bila napačno postavljena pred h1.
• Primer 3: Vsi naslovi so označeni z oznako h1: Ker naj bi bil na strani z več oznakami h1 le en naslov 1. stopnje (h1), je lahko uporabnik bralnika zaslona zmeden glede glavnega namena strani.

Povezani WCAG kriteriji:
Success Criterion 1.3.1 Info and Relationships (Nivo A)
https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships

Primerne metode za zagotavljanje skladja s kriterijem:
https://www.w3.org/WAI/WCAG21/Techniques/html/H42
https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA11

Ko bralnik zaslona naleti na pravilno označen seznam, bo uporabnika obvestil, koliko elementov vsebuje. Ključnega pomena je, da seznam označite. kot pravi seznam z ustreznimi HTML značkami in ne samo z vizualno dekoracijo.

• Primer 1: Eden ali več seznamov ni pravih seznamov: Eden ali več seznamov ni pravilno označenih v HTML in le izgledajo kot seznami z uporabljenimi elementi, kot sta HTML znački <br> ali <p>.

Povezani WCAG kriteriji:
Success Criterion 1.3.1 Info and Relationships (Nivo A)
https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships

Primerne metode za zagotavljanje skladja s kriterijem:
https://www.w3.org/WAI/WCAG21/Techniques/html/H48

Vsa vnosna polja v obrazcu morajo biti označena s HTML značko <label>. Ko so povezave (v tem primeru polja obrazca) implementirane z ustreznimi elementi, jih je mogoče programsko določiti (določen s programsko opremo iz uporabniško-priskrbljenih podatkov na tak način, da lahko različni uporabniški agenti, vključno z asistenčno tehnologijo, prepoznajo in predstavijo informacije uporabnikom spletne strani na različne načine).

• Primer 1: V enem ali več vnosnih poljih manjka ustrezna HTML značka: V enem ali več vnosnih poljih posameznega obrazca manjka HTML značka <label>.

Povezani WCAG kriteriji:
Success Criterion 1.3.1 Info and Relationships (Nivo A)
https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html 

Drugi sorodni kriteriji:
Success Criterion 4.1.2 Name, Role, Value (Nivo A)
https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html

Primerne metode za zagotavljanje skladja s kriterijem:
https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA17

Zagotavljanje jasnih navodil in besedilne pomoči pomaga vsem uporabnikom pri izpolnjevanju obrazcev. Obrazci morajo vsebovati navodila ali ustrezne vizualne oznake, da uporabniki vedo, katere podatke morajo vnesti.

• Primer 1: Eden ali več obrazcev ne ponuja besedilne pomoči: Eden ali več obrazcev ne ponuja besedilne pomoči, ko pride do napake.
• Primer 2: Ponujena besedilna pomoč je nejasna/dvoumna: Eden ali več obrazcev ima nejasna navodila, ki jih je težko razumeti.
• Primer 3: Polja ne ponujajo primerov zahtevane oblike podatkov, ki jih je potrebno vnesti: Polja, ki zahtevajo vnose, kot so datumi ali podatki o kreditni kartici, morajo ponujati primer zahtevane oblike podatkov.

Povezani WCAG kriteriji:
Success Criterion 3.3.2 Labels or Instructions (Nivo A)
https://www.w3.org/WAI/WCAG21/Understanding/labels-or-instructions.html 

Drugi sorodni kriteriji:
Success Criterion 3.3.5 Context-sensitive help (Nivo AAA)
https://www.w3.org/TR/UNDERSTANDING-WCAG20/minimize-error-context-help.html

Primerne metode za zagotavljanje skladja s kriterijem:
https://www.w3.org/WAI/WCAG21/Techniques/general/G131
https://www.w3.org/WAI/WCAG21/Techniques/general/G83

Vsebina mora biti dostopna in ne sme izgubiti nobenih informacij ali funkcionalnosti pri povečavi na 400 %.  Vsa vsebina mora biti ob povečavi dostopna brez  premikov vodoravno ali navpično. Pomembno je tudi, da vsebina ni skrita zunaj zaslona.

• Primer 1: Nekatera ali vsa besedila in slikovni elementi se neustrezno preoblikujejo: Nekaj besedila in slikovnih elementov na spletni strani ni mogoče povečati do vsaj 200 % oz. se nepravilno premikajo z določeno postavitvijo spletne strani.
• Primer 2: Interaktivni elementi se neustrezno preoblikujejo: Nekaj interaktivnih elementov na spletni strani, kot so gumbi, ni mogoče povečati na različne velikosti zaslona oz. se nepravilno premikajo z določeno postavitvijo spletne strani.
• Primer 3: Navigacijski meni ni viden v celoti: Vrstica za krmarjenje na spletni strani mora biti v celoti vidna ali pravilno strnjena v vseh različnih velikostih zaslona, ​​da lahko uporabniki pravilno premikajo po spletni strani.
• Primer 4: Pojavna okna se ne preoblikujejo pravilno: Pojavna okna, ki se pojavijo na spletnem mestu, niso pravilno povečana in zahtevajo pomikanje po spletnem mestu za dostop do vseh informacij.

Linked WCAG criteria:
Success Criterion 1.4.10 Reflow (Level AA)
https://www.w3.org/WAI/WCAG21/Understanding/reflow.html

Also applied:
Success Criterion 1.4.4 Resize Text (Level AA)
https://www.w3.org/WAI/WCAG21/Understanding/resize-text.html

Sufficient Techniques:
https://www.w3.org/WAI/WCAG21/Techniques/css/C31
https://www.w3.org/WAI/WCAG21/Techniques/css/C32

Za uporabnike s težavami, ki so povezane s pozornostjo, je lahko samodejno predvajana vsebina moteča in jim preprečuje uporabo preostale spletne strani. Osebe, ki uporabljajo bralnike zaslona, ​​lahko naletijo tudi na samodejno predvajanje, ko poskušajo poslušati zvok svojega bralnika zaslona, ​​kar oteži brskanje po spletni strani. Razen če so premikajoče se vsebine in animacije (premikajoče, utripajoče ali pomikajoče se informacije) bistvenega pomena za uporabniško izkušnjo, mora biti na voljo mehanizem, s katerim jih lahko uporabnik začasno ustavi. Naslednja merila za premikanje vsebine in animacij so:

1. se zažene samodejno,
2. traja več kot pet sekund,
3. je predstavljena vzporedno z drugimi vsebinami.

• Primer 1: Nekatere ali vse premikajoče se vsebine in animacije nimajo gumba za premor: Več premikajočih se vsebin na spletni strani ni mogoče zaustaviti ali znova zagnati.

Povezani WCAG kriteriji:
Success Criterion 2.2.2 Pause, Stop, Hide (Nivo A)
https://www.w3.org/WAI/WCAG21/Understanding/pause-stop-hide.html

Primerne metode za zagotavljanje skladja s kriterijem:
https://www.w3.org/WAI/WCAG21/Techniques/general/G4
https://www.w3.org/WAI/WCAG21/Techniques/general/G11