Ligipääsetavuse probleemid, mida tekitavad veebiarendajad

Nagu mainitud, loeb ekraanilugeja programm kasutajale ette kogu lehel oleva info. Et infot õiges keeles (õige hääldusega) esitada, on oluline, et lehel oleks korrektne keelekood.

Klaviatuuriga navigeerides ilmneb kiiresti, et see on üpris tüütu – kuna liikumine käib lineaarselt ülevalt alla, vasakult paremale, tuleb iga lehe alguses läbi käia palju korduvat sisu (päis, menüüpunktid), enne kui põhisisuni jõutakse.

Selle vältimiseks on oluline, et lehe üks esimestest elementidest oleks „Liigu põhisisu juurde“ link, millele klikkides viiakse fookus (nii klaviatuuri- kui ka ekraanilugeja fookus) lehe sisuosa algusesse.

Link võib olla peidetud, kuni kasutaja fookuse selle peale viib. On levinud müüt, et ülehüppamislinki kasutavad ainult pimedad ning seetõttu võib see olla nähtamatu. Tegelikult kasutavad seda ka nägijad ning seetõttu on tähtis, et kui link on fokuseeritud, oleks see nähtav ning aktiveerides ka päriselt töötaks.

Klaviatuuri ja ekraanilugeja fookused erinevad sellepoolest, et klaviatuuriga saab liikuda ainult mööda klikitavaid elemente, kuid ekraanilugejaga saab liikuda mööda kõiki veebilehe elemente (ka pealkirjad, pildid, tekstid). Fookuse juhtimine skriptiga tuleb mängu siis, kui klaviatuuri või ekraanilugeja fookuse liikumist lehel tuleb korrigeerida.

Kasutades lihtsat semantilist HTML-i, manipuleerimata elementide järjekorda skriptide või stiilidega, ei olegi tõenäoliselt vaja klaviatuuri ega ekraanilugeja fookust juhtida. Üldjuhul aga tekib teatud kohti, kus fookusjärjekorra loogilisena hoidmiseks tuleb teha vangerdusi.

Kõik elemendid, mida saab klikkida hiirega, peavad olema fokuseeritavad ka klaviatuuriga. Soovitatav on interaktiivsed asjad esitada koodis alati semantiliste elementidega nagu <a>, <button>, <input> jne. Mittesemantilised elemendid nagu <div> ei ole oma olemuselt klikitavad ning seetõttu ei saa nende peale ka klaviatuurifookusega (Tab-klahviga) liikuda.

Kui lehel on elemente, mis pole loomuselt interaktiivsed, kuid mille peale peab saama vajutada, tuleb nad lisada fookusjärjekorda kasutades tabindex atribuuti. Tabindex-ile saab anda erinevaid väärtuseid.

Ekraanilugeja, häälkäskluste ja muude tugitehnoloogiate kasutajatele on oluline, et elementidel, mida esitatakse ikooni või pildiga, oleks koodis tekstiline alternatiiv.

Kui pilt on esitatud <img> elemendiga, lisatakse tekstiline alternatiiv alt=“Pildi kirjeldus...“ atribuudiga. Muude elementide (näiteks erinevad ikoonid, X-iga sulgemisnupp) kirjeldamiseks võib kasutada näiteks aria-label=“Pildi kirjeldus...“ atribuuti.

Kui pildile pole lisatud alt atribuuti, loeb ekraanilugeja kasutajale ette pildi failinime, mis pole peaaegu kunagi eriti informatiivne. Kui alt atribuut tühjaks jätta, ei loe ekraanilugeja seda pilti üldse ette – see on hea dekoratiivsete piltide (nt taustapildid) puhul, mis ei anna edasi olulist lisainformatsiooni.

Kui tegemist on klikitava ikooniga, siis ilma tekstilise alternatiivita ei saa ekraanilugeja kasutaja teada, mida see nupp teeb. Samas iga ikoon ei vaja tekstilist alternatiivi. Näiteks kui printeriikooni kõrval on ka sõna “Prindi”, ei anna ikoon lisainformatsiooni ega vaja tekstilist alternatiivi.

Ka tekstilise alternatiivi kirjutamisel on omad reeglid – see peab olema konkreetne ning andma edasi sama mõtet, mis pilt/ikoon ise. Näiteks ümbriku ikooni alternatiiv peaks ilmselt olema „E-mail“ või „Saada kiri“ mitte „Ümbrik“.

Kindlasti tuleb vältida tekstilistes alternatiivides sõnu nagu „pilt“, „link“, „vajuta“ ning samuti ei tasu alternatiivset teksti täita failinime või suvalise tekstijadaga.
Vaata näiteid ja soovitusi alt tekstide kirjutamiseks.

Tihti juhtub, et üksteise järele paigutatakse mitu samasse kohta viivat linki. Näiteks ikoon ja tekst või hoopis uudise pilt, pealkiri ja „Loe edasi“ on kõik eraldi lingid, mis viivad samasse kohta. See tähendab, et klaviatuuri või ekraanilugeja kasutajad peavad igast uudisest üleliikumiseks tegema 3 klikki.

Olekuteated, nagu näiteks vea- või õnnestumisteated, otsingukasti seisundid („Oodake palun...“, „Leiti 34 tulemust“, „Tulemusi ei leitud“...), mitu protsenti on midagi laetud, kui palju on tehingu kinnitamiseks aega jne, peab ekraanilugeja automaatselt ette lugema, ilma teadete peale reaalselt liikumata.

Et panna ekraanilugeja midagi automaatselt ette lugema, võib kasutada aria-live või role atribuute. Kui antud atribuute mõne elemendi puhul kasutada, reageerib ekraanilugeja muudatustele, mis selle elemendi sees toimuvad.

Seega et veateade automaatselt ette lugeda, peab veateate kast koos aria-live või role atribuudiga olema lehel olemas juba lehe laadimisel. Seejärel kui sellesse kasti skriptiga mingi sõnum sisestada, loeb ekraanilugeja selle välja.