Veebijuurdepääsetavus: Veebisaidi optimeerimine ekraanilugeja kasutajatele

Tänapäeva digiajastul ei ole veebijuurdepääsetavus enam pelgalt tore lisavõimalus, vaid see on fundamentaalne nõue. Juurdepääsetav veebisait tagab, et puuetega inimesed, sealhulgas need, kes kasutavad ekraanilugejaid, saavad veebisisu tajuda, mõista, selles navigeerida ja sellega suhelda.

See põhjalik juhend süveneb veebisaidi optimeerimise spetsiifikasse ekraanilugeja kasutajate jaoks, käsitledes olulisi tehnikaid, parimaid tavasid ja reaalseid näiteid.

Mis on ekraanilugeja?

Ekraanilugeja on abitehnoloogia, mis muudab arvutiekraanil oleva teksti ja muud elemendid kõneks või punktkirjas väljundiks. See võimaldab nägemispuudega inimestel digitaalsele sisule juurde pääseda ja sellega suhelda. Populaarsed ekraanilugejad on näiteks:

• JAWS (Job Access With Speech): Laialdaselt kasutatav ekraanilugeja Windowsi jaoks.
• NVDA (NonVisual Desktop Access): Tasuta ja avatud lähtekoodiga ekraanilugeja Windowsi jaoks.
• VoiceOver: Apple'i sisseehitatud ekraanilugeja macOS-i ja iOS-i jaoks.
• ChromeVox: Ekraanilugeja laiendus Google Chrome'i ja Chrome OS-i jaoks.
• Orca: Tasuta ja avatud lähtekoodiga ekraanilugeja Linuxi jaoks.

Ekraanilugejad töötavad, tõlgendades veebisaidi aluskoodi ja edastades kasutajale teavet sisu ja struktuuri kohta. On ülioluline, et veebisaidid oleksid struktureeritud viisil, mida ekraanilugejad saavad kergesti mõista ja milles navigeerida.

Miks on ekraanilugeja jaoks optimeerimine oluline?

Veebisaidi optimeerimine ekraanilugejate jaoks pakub mitmeid eeliseid:

• Kaasatus: Tagab, et nägemispuudega kasutajad saavad teie veebisaiti tõhusalt kasutada.
• Õigusnormidele vastavus: Paljudes riikides on seadused ja määrused, mis nõuavad veebijuurdepääsetavust (nt Ameerika Ühendriikides puuetega ameeriklaste seadus (ADA), Kanadas Ontario puuetega inimeste juurdepääsetavuse seadus (AODA) ja Euroopas standard EN 301 549).
• Parem kasutajakogemus: Juurdepääsetav disain toob sageli kaasa parema kasutajakogemuse kõigile kasutajatele, sõltumata puudest.
• Laiem sihtrühm: Muutes oma veebisaidi juurdepääsetavaks, avate selle suuremale potentsiaalsele sihtrühmale.
• SEO eelised: Otsingumootorid eelistavad juurdepääsetavaid veebisaite, mis võib parandada teie positsiooni otsingutulemustes.

Ekraanilugeja jaoks optimeerimise põhiprintsiibid

Järgmised põhimõtted on ekraanilugejasõbralike veebisaitide loomisel olulised:

1. Semantiline HTML

Semantiliste HTML-elementide korrektne kasutamine on teie sisu struktuuri ja tähenduse andmisel ülioluline. Semantilised elemendid edastavad ekraanilugejatele teie veebisaidi eri osade eesmärgi, võimaldades kasutajatel tõhusamalt navigeerida.

Näited:

• Kasutage <header> saidi päise jaoks.
• Kasutage <nav> navigeerimismenüüde jaoks.
• Kasutage <main> põhisialue jaoks.
• Kasutage <article> iseseisvate sisuplokkide kapseldamiseks.
• Kasutage <aside> täiendava sisu jaoks.
• Kasutage <footer> saidi jaluse jaoks.
• Kasutage pealkirjade jaoks <h1> kuni <h6>.
• Kasutage <p> lõikude jaoks.
• Kasutage <ul> ja <ol> loendite jaoks.

Koodinäide:

<header> <h1>Minu Veebisait</h1> <nav> <ul> <li><a href="#">Avaleht</a></li> <li><a href="#">Meist</a></li> <li><a href="#">Teenused</a></li> <li><a href="#">Kontakt</a></li> </ul> </nav> </header> <main> <article> <h2>Artikli pealkiri</h2> <p>See on artikli põhisisu.</p> </article> </main> <footer> <p>Autoriõigus 2023</p> </footer>

2. Piltide alternatiivtekst

Piltidel peaks alati olema kirjeldav alternatiivtekst (alt-tekst), mis edastab pildi sisu ja eesmärgi ekraanilugeja kasutajatele. Alt-tekst peaks olema lühike ja informatiivne.

Parimad tavad:

• Lisage alt-tekst kõigile piltidele, sealhulgas dekoratiivsetele piltidele.
• Hoidke alt-tekst lühike ja kirjeldav.
• Vältige fraase nagu "pilt sellest:" või "foto sellest:".
• Keerukate piltide puhul kaaluge pika kirjelduse (longdesc atribuut või eraldi kirjeldav tekst) kasutamist.
• Kui pilt on puhtalt dekoratiivne ja ei lisa tähendust, kasutage tühja alt-atribuuti (alt=""), et vältida ekraanilugejate poolt selle ettelugemist.

Koodinäide:

<img src="logo.png" alt="Ettevõtte logo"> <img src="decorative.png" alt="">

3. ARIA atribuudid

ARIA (Accessible Rich Internet Applications) atribuudid pakuvad ekraanilugejatele lisateavet elementide rolli, oleku ja omaduste kohta, eriti dünaamilise sisu ja keerukate vidinate puhul. ARIA atribuudid võivad parandada juurdepääsetavust, kui semantilisest HTML-ist üksi ei piisa.

Levinud ARIA atribuudid:

• role: Määratleb elemendi rolli (nt role="button", role="navigation").
• aria-label: Pakub tekstisildi elemendile, kui visuaalne silt puudub või pole piisav.
• aria-labelledby: Seostab elemendi teise elemendiga, mis on selle sildiks.
• aria-describedby: Seostab elemendi teise elemendiga, mis pakub kirjeldust.
• aria-hidden: Peidab elemendi ekraanilugejate eest.
• aria-live: Näitab, et elemendi sisu uuendatakse dünaamiliselt (nt aria-live="polite", aria-live="assertive").
• aria-expanded: Näitab, kas kokkupandav element on hetkel laiendatud või kokku pandud.
• aria-haspopup: Näitab, et elemendil on hüpikmenüü.

Koodinäide:

<button role="button" aria-label="Sule dialoog" onclick="closeDialog()">X</button> <div id="description">See on pildi kirjeldus.</div> <img src="example.jpg" aria-describedby="description" alt="Näidispilt">

Oluline märkus: Kasutage ARIA atribuute läbimõeldult. ARIA liigne kasutamine võib tekitada juurdepääsetavusprobleeme. Kasutage alati esmalt semantilisi HTML-elemente ja kasutage ARIA-t ainult siis, kui see on vajalik vaikimisi semantika täiendamiseks või ülekirjutamiseks.

4. Klaviatuurinavigatsioon

Veenduge, et kõik teie veebisaidi interaktiivsed elemendid oleksid navigeeritavad ainult klaviatuuri abil. See on ülioluline kasutajatele, kes ei saa hiirt või muud osutusseadet kasutada. Klaviatuurinavigatsioon tugineb suuresti fookusindikaatorite ja loogilise tabulatsioonijärjekorra korrektsele kasutamisele.

Parimad tavad:

• Fookusindikaatorid: Veenduge, et kõigil interaktiivsetel elementidel (nt lingid, nupud, vormiväljad) oleks valituna selge ja nähtav fookusindikaator. Kasutage CSS-i :focus oleku stiilimiseks.
• Tabulatsioonijärjekord: Tabulatsioonijärjekord peaks järgima lehe loogilist lugemisjärjekorda (tavaliselt vasakult paremale, ülevalt alla). Kasutage tabindex atribuuti tabulatsioonijärjekorra kohandamiseks, kui see on vajalik. Vältige tabindex="0" ja tabindex="-1" kasutamist, kui see pole absoluutselt vajalik, kuna valesti kasutamisel võivad need tekitada juurdepääsetavusprobleeme.
• Navigatsiooni vahelejätmise lingid: Pakkuge lehe ülaosas linki "liigu põhisisu juurde", mis võimaldab kasutajatel peamisest navigeerimismenüüst mööda minna ja otse põhisisu juurde hüpata. See on eriti abiks kasutajatele, kes kasutavad ekraanilugejaid, kuna see vähendab vajadust navigeerida läbi korduvate navigeerimislinkide igal lehel.
• Modaaldialoogid: Kui modaaldialoog avatakse, veenduge, et fookus oleks lukustatud dialoogi sisse, kuni see suletakse. Takistage kasutajatel dialoogist väljapoole tabuleerimist.

Koodinäide (navigatsiooni vahelejätmise link):

<a href="#main-content" class="skip-link">Liigu põhisisu juurde</a> <header> <nav> <!-- Navigeerimismenüü --> </nav> </header> <main id="main-content"> <!-- Põhisisu --> </main>

Koodinäide (CSS fookusindikaatorile):

a:focus, button:focus, input:focus, textarea:focus, select:focus { outline: 2px solid blue; outline-offset: 2px; }

5. Vormide juurdepääsetavus

Vormid on paljude veebisaitide kriitiline osa ja on oluline tagada, et need oleksid ekraanilugeja kasutajatele juurdepääsetavad. Korralik sildistamine, selged juhised ja veakäsitlus on vormide juurdepääsetavuse seisukohalt üliolulised.

Parimad tavad:

• Sildistamine: Kasutage <label> elementi siltide seostamiseks vormiväljadega. <label> elemendi for atribuut peaks vastama vastava vormivälja id atribuudile.
• Juhised: Pakkuge selgeid ja lühikesi juhiseid vormi täitmiseks. Kasutage aria-describedby atribuuti juhiste seostamiseks vormiväljadega.
• Veakäsitlus: Kuvage veateated selgelt ja nähtavalt. Kasutage aria-live atribuuti veateadete edastamiseks ekraanilugeja kasutajatele. Seostage veateated vastavate vormiväljadega, kasutades aria-describedby atribuuti.
• Kohustuslikud väljad: Märkige kohustuslikud väljad selgelt, nii visuaalselt kui ka programmiliselt. Kasutage required atribuuti kohustuslike väljade märkimiseks. Kasutage aria-required atribuuti, et anda ekraanilugeja kasutajatele teada, et väli on kohustuslik.
• Seotud väljade grupeerimine: Kasutage <fieldset> ja <legend> elemente seotud vormiväljade grupeerimiseks.

Koodinäide:

<label for="name">Nimi:</label> <input type="text" id="name" name="name" required aria-required="true"> <div id="name-instructions">Palun sisestage oma täisnimi.</div> <label for="name">Nimi:</label> <input type="text" id="name" name="name" aria-describedby="name-instructions"> <form> <fieldset> <legend>Kontaktandmed</legend> <label for="email">E-post:</label> <input type="email" id="email" name="email" required aria-required="true"><br><br> <label for="phone">Telefon:</label> <input type="tel" id="phone" name="phone"> </fieldset> </form>

6. Dünaamilise sisu juurdepääsetavus

Kui teie veebisaidi sisu muutub dünaamiliselt (nt AJAX-i või JavaScripti kaudu), on ülioluline tagada, et ekraanilugeja kasutajaid teavitataks muudatustest. Kasutage ARIA live-piirkondi dünaamilise sisu uuendustest teatamiseks.

ARIA live-piirkonnad:

• aria-live="off": Vaikimisi väärtus. Piirkonna uuendustest ei teatata.
• aria-live="polite": Teatab uuendustest, kui kasutaja on ooterežiimis. See on kõige levinum ja soovitatavam väärtus.
• aria-live="assertive": Teatab uuendustest kohe, kasutajat katkestades. Kasutage seda väärtust säästlikult, kuna see võib olla häiriv.

Koodinäide:

<div aria-live="polite" id="status-message"></div> <script> // Kui sisu uuendatakse, uuendage olekuteadet document.getElementById('status-message').textContent = "Sisu on edukalt uuendatud!"; </script>

7. Värvikontrastsus

Veenduge, et teksti ja taustavärvide vahel oleks piisav värvikontrastsus. See on oluline vaegnägijatele või värvipimedatele kasutajatele. Veebisisu juurdepääsetavuse suunised (WCAG) nõuavad kontrastsussuhet vähemalt 4.5:1 tavalise teksti ja 3:1 suure teksti puhul.

Tööriistad värvikontrastsuse kontrollimiseks:

• WebAIM Color Contrast Checker (webaim.org/resources/contrastchecker/)
• Coolors (coolors.co)
• Adobe Color (color.adobe.com)

8. Meedia juurdepääsetavus

Kui teie veebisait sisaldab heli- või videosisu, pakkuge alternatiive kasutajatele, kes ei näe ega kuule sisu. See hõlmab:

• Subtiitrid: Pakkuge subtiitreid kogu videosisu jaoks. Subtiitrid on heliraja sünkroniseeritud tekstilised transkriptsioonid.
• Transkriptsioonid: Pakkuge tekstilisi transkriptsioone kogu heli- ja videosisu jaoks. Transkriptsioonid peaksid sisaldama kogu räägitud sisu, samuti oluliste helide ja visuaalsete elementide kirjeldusi.
• Helikirjeldused: Pakkuge helikirjeldusi videosisu jaoks. Helikirjeldused jutustavad video visuaalseid elemente pimedatele või vaegnägijatest kasutajatele.

9. Testimine ekraanilugejatega

Kõige tõhusam viis tagada, et teie veebisait on ekraanilugeja kasutajatele juurdepääsetav, on testida seda erinevate ekraanilugejatega. See aitab teil tuvastada ja parandada võimalikke juurdepääsetavusprobleeme.

Testimisvahendid:

• Käsitsi testimine: Kasutage oma veebisaidil navigeerimiseks ekraanilugejaid nagu NVDA (tasuta), JAWS (tasuline) või VoiceOver (sisseehitatud macOS-is ja iOS-is). Proovige sooritada tavalisi ülesandeid ja toiminguid.
• Automaatne testimine: Kasutage juurdepääsetavuse testimisvahendeid võimalike juurdepääsetavusprobleemide tuvastamiseks. Need tööriistad aitavad teil leida levinud vigu, kuid neid ei tohiks kasutada käsitsi testimise asendajana. Mõned populaarsed juurdepääsetavuse testimisvahendid on:
• WAVE (Web Accessibility Evaluation Tool)
• axe DevTools
• Lighthouse (Chrome'i arendaja tööriistades)

Nõuanded ekraanilugejatega testimiseks:

• Õppige põhitõdesid: Tutvuge kasutatava ekraanilugeja põhikäskude ja navigeerimistehnikatega.
• Kasutage erinevaid ekraanilugejaid: Testige oma veebisaiti erinevate ekraanilugejatega, kuna iga ekraanilugeja tõlgendab veebisisu erinevalt.
• Kaasake puuetega kasutajaid: Parim viis tagada oma veebisaidi juurdepääsetavus on kaasata testimisprotsessi puuetega kasutajaid. Hankige ekraanilugeja kasutajatelt tagasisidet oma veebisaidi kasutatavuse ja juurdepääsetavuse kohta.

WCAG (Veebisisu juurdepääsetavuse suunised)

Veebisisu juurdepääsetavuse suunised (WCAG) on rahvusvaheliselt tunnustatud juhiste kogum veebisisu juurdepääsetavamaks muutmiseks. WCAG on välja töötanud World Wide Web Consortium (W3C) ja seda kasutatakse laialdaselt veebijuurdepääsetavuse standardina.

WCAG on korraldatud nelja põhimõtte ümber, mida tuntakse lühendiga POUR:

• Tajutav: Teave ja kasutajaliidese komponendid peavad olema esitatud kasutajatele viisil, mida nad saavad tajuda.
• Toimiv: Kasutajaliidese komponendid ja navigeerimine peavad olema toimivad.
• Mõistetav: Teave ja kasutajaliidese toimimine peavad olema mõistetavad.
• Töökindel: Sisu peab olema piisavalt töökindel, et seda saaksid usaldusväärselt tõlgendada mitmesugused kasutajaagendid, sealhulgas abitehnoloogiad.

WCAG on jaotatud kolmeks vastavustasemeks: A, AA ja AAA. Tase A on kõige elementaarsem juurdepääsetavuse tase, samas kui tase AAA on kõrgeim. Enamik organisatsioone püüdleb vastavusse tasemega AA.

Kokkuvõte

Veebisaidi optimeerimine ekraanilugeja kasutajatele on oluline samm tõeliselt kaasava ja juurdepääsetava veebikogemuse loomisel. Järgides selles juhendis toodud põhimõtteid ja parimaid tavasid, saate tagada, et teie veebisait on juurdepääsetav kõigile kasutajatele, sõltumata puudest.

Pidage meeles, et veebijuurdepääsetavus on pidev protsess. Testige oma veebisaiti regulaarselt ekraanilugejate ja juurdepääsetavuse testimisvahenditega ning hoidke end kursis viimaste juurdepääsetavuse suuniste ja parimate tavadega. Seades juurdepääsetavuse esikohale, saate luua parema veebi kõigile.

Lisamaterjalid:

• WebAIM: https://webaim.org/
• W3C Web Accessibility Initiative (WAI): https://www.w3.org/WAI/
• Deque University: https://dequeuniversity.com/