Ligipääsetavus ei ole luksus, vaid elementaarne hügieen

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

Tegelikkuses võidavad ligipääsetavuse nõuete järgmisest kõik kasutajad. Suuremas osas ei tähenda ligipääsetavuse nõuete järgmine mitte lisatööd, vaid lihtsalt korrektset, puhast ja kõigi kasutajate sõbralikku veebilehe haldust.

Peamised tehnilised nõuded on ligipääsetavuse osas Veebiplatsi 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.

Enamiku lehest aga moodustab sisu, mille lisab iga haldur ise, ja siin tuleb järgida teatud reegleid, mida ükski platvorm automaatselt rakendada ei saa.

Peamised reeglid ligipääsetava sisu lisamiseks

  1. Sisu peab olema puhas, ei tohi sisaldada mittevajalike silmale nähtamatuid vorminguid, linke jms.
  2. Sisu peab olema õigesti ja loogiliselt struktureeritud ehk pealkirjade ja loetelude tasandid peavad olema korrektsed ning tuleb kasutada õigeid elemente (pealkiri alati h1, h2 jne, mitte visuaalselt eristuvaks tehtud sisutekst).
  3. Kõigil mittetekstilistel unikaalset infot edastavatel elementidel (pildid, lingid, videod, raamid) peab olema ligipääsetav nimi.
  4. Sisu peab kohanduma eri ekraanitüüpide ja -suurustega.
  5. Tekst peab taustaga moodustama piisava kontrasti.

Sagedasemad vead, mis sisu lisamisel kipuvad tekkima

Lingil peab olema ligipääsetav nimi

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.
  • Link on lisatud sõnale, mis ei ole ligipääsetav nimi, nt „Lisainfot leiate siit.“ Lingi nimi on „Siit“.
  • Teksti sisse on kogemata jäänud link, mida polegi näha (link on nt tühiku küljes).

Raami elemendil peab olema ligipääsetav nimi

Raami lähtekoodi lisamisel 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>

Pealkirjal peab olema ligipääsetav nimi

Ekraanilugejad eristavad korrektselt määratud pealkirju ja pealkirjade tasandeid (h1, h2 jne). 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).

Suur probleem on tihtipeale pealkirjade eristamine mitte pealkirja plokina, vaid lihtsalt suurema, rasvasema või teist värvi kirjatüübi valimisega. Viimasel juhul pealkirjad koodis ei kajastu ja ekraanilugejale üldse ligipääsetavad ei ole.

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.

Pildil peab olema ligipääsetav nimi

Reegel on, et alternatiivne tekst lisatakse ainult nendele piltidele, mis annavad kasutajale edasi unikaalset infot. Kui on tegemist puhtalt illustratsiooniga, peab alt-atribuut olema tühi. Sel juhul jätab ekraanilugeja sellise pildi vahele.

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).

Sisu peab kohanduma eri suuruses ekraanidega

Üldiselt hoolitseb Veebiplats automaatselt selle eest, et lisatud sisu kohanduks eri suuruses ekraanidega.

Viga tekib enamasti seoses tabelitega. Tabel sobib veebi lisamiseks üldselt ainult juhul, kui see on kahes veerus ja vähese tekstiga, nii et kogu sisu mahub kenasti ära ka mobiilivaates.

Suuremaid tabeleid üldjuhul lisada ei tohiks, sisu tuleks esitada teisel kujul.

Mõnel juhul aitab ka, kui lisada tabelile Veebiplatsi klass “table-wrapper” (mobiilivaates liigutatakse tabeli read üksteise alla ning tabeli päis peidetakse), aga see oleneb tabeli sisust. Haldaja peab iga kord ise olukorda hindama ja eri ekraanidel kontrollima.

Teksti kontrastsus võrreldes taustaga peab olema piisav

Stiiliraamatus on meie poolt kontrasti- ja taustavärvid määratud sellised, et need moodustavad piisava kontrasti. Aktsentvärvide või ise kohandatud värvide korral tuleb alati kontrollida, et teksti ja tausta värv annaksid piisava kontrasti. Hea abivahend lisaks ligipääsetavuse automaatkontrollijatele on siin ka WebAIMi kontrastikontroll.

Kuidas ise oma lehele automaatkontrolli teha

Soovitame lihtsat vahendit, Chrome’i ja MIcrosoft Edge’i laiendust Accessibility Insights for Web.