Ligipääsetavuse sagedasemad vead KOVTP lehtedel ja kuidas neid vältida

1.07.24

Veebi ligipääsetavus on väga oluline teema ja ka KOVTP veebilehti vaadatakse üha enam selle nurga alt.

Veebi ligipääsetavus tähendab, et võimalikult paljud inimesed, ka lapsed ja eakad, puuetega inimesed ning erinevate seadmete kasutajad, saavad lehte või rakendust kasutada.

Suur osa peamistest tehnilistest nõuetest on KOVTP platvormil automaatselt täidetud: leht on klaviatuuriga navigeeritav, tab-klahviga liikudes ilmneb nähtav fookus, olemas on põhisisu juurde liikumise link, lehe tiitli, keele ja muude elementide seadistused on koodis nõuetele vastavad, platvorm kohandub eri tüüpi ekraanidega.

Tihti tekivad aga vead just konkreetse sisu lisamisel. Allpool vaatamegi, mida sisu lisamisel silmas pidada, et neid vigu vältida.

Peamised reeglid ligipääsetava sisu lisamisel on järgnevad.

  • Sisu peab olema puhas (ei tohi sisaldada mittevajalike silmale nähtamatuid vorminguid, linke jms).
  • Sisu peab olema õigesti ja loogiliselt struktureeritud (pealkirjade, loetelude tasandid jms peavad olema korrektsed).
  • Kõigil mittetekstilistel unikaalset infot edastavatel elementidel (pildid, lingid, videod, raamid) peab olema ligipääsetav nimi.
  • Sisu peab kohanduma eri ekraanitüüpide ja -suurustega – kasutaja peab kontrollima, et lisatud tabelid, pildid, raamid jms eri tüüpi ekraanidega kohanduksid.

Esimene ja kõige lihtsam vahend ligipääsetavuse kontrollimiseks on automaattestid ja seepärast alustamegi sellest, et vaatame lähemalt KOVTP lehtedel levinumaid automaattestidega tuvastatavaid vigu ja nende vältimise võimalusi.

Lingil peab olema juurdepääsetav nimi (link has accessible name)

Vea sagedasemad põhjused:

  • Link on lisatud pildile (nt bänner) ja pildil pole alt-atribuuti (vt lähemalt allpool). Kui pildil on alt-atribuut, käsitleb ekraanilugeja seda ka lingi nimena.
  • Link on lisatud nii, et tekstis on näha veebiaadress ja link on selle küljes (sel juhul loeb veebilugeja ette veebiaadressi). Lihtsaim viis seda viga vältida, on jälgida, et link oleks lisatud tekstis lingi olemust kirjeldava sõna või pealkirja külge (veebilugeja annab selle samal kujul edasi).
  • Teksti sisse on kogemata jäänud link, mida peale vaadates polegi näha (link on nt tühiku küljes).

Raami elemendil peab olema ligipääsetav nimi (iframe element has accessible name)

Raami lähetekoodi lisamisel KOVTP lehele tuleb koodi lisada alati ka pealkiri. Lihtsaim on lisada see kõige lõppu. Näide: <iframe src="//articles/2019-11-14_new_characters.htm" frameborder="0" width="100%" height="32px" scrolling="no" allowtransparency="true" title="Raami pealkiri" ></iframe>

Teksti kontrastsus võrreldes taustaga peab olema piisav (text has minimum contrast)

KOVTP automaatsete tekstistiilide kontrastsus vastab nõuetele ja vigadest hoidumiseks on soovitatav kasutada neid.

Kui määrate ise artikli tekstiredaktoris või kohandatud CSSiga teksti värvi ja/või stiili, tuleb iga kord veenduda, et kontrastsus vastaks nõuetele.

Pealkirjal peab olema ligipääsetav nimi (heading has accessible name)

Ekraanilugejad eristavad korrektselt määratud pealkirju ja pealkirjade tasandeid. Automaattestide vigades tulevad välja enamasti tühjad pealkirjaelemendid ehk olukorrad, kus tekstistiilina on pealkiri määratud, aga tegelikku teksti ei ole (tõenäoliselt on see kustutatud).

Vea vältimiseks tuleb jälgida, et teksti muutmisel/kustutamisel kustutataks ka tühikud, reavahetused jms, mis võivad sisaldada stiiliseadeid. Teksti mujalt kopeerimisel tuleks enne kopeerimist kogu vormindus eemaldada ja kopeerida ainult puhas tekst ning seejärel määrata vormindus KOVTP tekstiredaktori aknas, kasutades kindlasti pealkirjade eristamiseks ette seadistatud pealkirjastiile (heading 1, heading 2 jne) ja jälgides, et pealkirjastiili tasand vastaks tegelikule tekstilõigu tasandile.

Pealkirjade, tasandite ja struktuuri vastuolulisus on ligipääsetavuse seisukohast laiem ja väga oluline teema, kus peamised vead automaattestides välja ei tulegi ja korrektse tulemuse saamiseks tuleb testida lisaks manuaalselt. Suur probleem on tihtipeale pealkirjade eristamine mitte eelseadistatud peakirjastiiliga, vaid lihtsalt suurema, rasvasema või teist värvi kirjatüübi valimisega. Viimasel juhul pealkirjad koodis ei kajastu ja nt ekraanilugejale üldse ligipääsetavad ei ole.

Pildil on ligipääsetav nimi (image has accessible name)

Selle teema juures tuleb taas automaattestidega välja ainult vigade jäämäe tipp ehk vaid need juhud, kui alt-atribuuti üldse lisatud ei ole (KOVTP puhul nt väliste pildilinkide korral või erandjuhul, kui alt-atribuut on spetsiaalselt kustutatud).

Reegel on, et alternatiivne tekst lisatakse ainult nendele piltidele, mis annavad kasutajale edasi unikaalset infot. Kui on tegemist puhtalt illustratsiooniga, tuleb lisada tühi alt-atribuut. Sel juhul jätab ekraanilugeja sellise pildi vahele. Kui alt-atribuuti aga üldse pole, loeb ekraanilugeja ette pildifaili nime ja see on vale.

KOVTP lisab pildile alati alt-atribuudi, ja kui alternatiivse teksti väli on pildi omaduste aknas jäetud täitmata, siis on tulemuseks tühi alt-atribuut, mis automaattesti silmis pole vale, küll aga osutub sageli puuduseks manuaalsel hindamisel.

Vea vältimiseks tuleb alati iga pildi lisamisel kaaluda, kas tegu on unikaalset infot edastava pildiga, ning sel juhul lisada kindlasti pildi omaduste aknas ka alternatiivne tekst. Eriti tähtis on see ainult pildivormingus esitatava info puhul (eeskätt bännerid).

 

Nagu eespool mainitud, tuvastatakse automaattestidega ainult üks osa ligipääsetavuse vigadest, aga kui jälgite sisu üles panemisel eespool nimetatud 4 reeglit, on KOVTP üldine ligipääsetavus päris hea.

 

PS. Mõne igal alamlehel korduva KOVTP-poolse vea saab eemaldada jägneva kohandatud CSS-koodiga. Soovitame need read lisada oma portaali avalike lehtede kohandatud CSSi alla.

/*Varade publitseerija metadata (kuupäev, vaatamiste arv, toimetaja jms) kontrastsuse parandamine ligipääsetavause nõuetele vastavaks*/
.portlet-asset-publisher .metadata-entry { color: #000; }
/*Mitte kuvatava print-nupu lingi eemaldamine ligipääsetavuse nõuetest tulenevalt*/
.print-button { display: none; }

Soovitame ka mitte kasutada lehe jaluses veebiaadressi välja ehk jätta see lihtsalt tühjaks, sest see põhjustab nimetute linkide viga.

 

Ligipääsetavuse nõuete kohta täpsema ülevaate saamiseks soovitame alustada siit.

 

Toimetaja: SIGNE RUMMO