Veebijuurdepääsetavus (a11y): Praktiline juhend esisüsteemi arendajatele

Veebijuurdepääsetavus (sageli lühendatult a11y, kus 11 tähistab tähtede arvu 'a' ja 'y' vahel) on veebisaitide ja -rakenduste disainimise ja arendamise praktika, mis tagab nende kasutatavuse puuetega inimestele. See hõlmab nägemis-, kuulmis-, motoorika-, kognitiivsete ja kõnepuudega inimesi. Juurdepääsetavate veebisaitide loomine ei tähenda ainult nõuetele vastavust; see on kaasavate ja õiglaste digitaalsete kogemuste loomine kõigile, olenemata nende võimetest või tehnoloogiatest, mida nad veebile juurdepääsemiseks kasutavad. See on oluline ka laiema publikuni jõudmiseks. Näiteks hea värvikontrastsus on kasulik kasutajatele eredas päikesevalguses ja selged paigutused aitavad kognitiivsete häiretega või lihtsalt rööprähklevatel inimestel.

Miks on veebijuurdepääsetavus oluline?

Veebijuurdepääsetavuse eelistamiseks on mitu kaalukat põhjust:

• Eetilised kaalutlused: Kõik väärivad võrdset juurdepääsu teabele ja teenustele veebis. Puuetega inimeste digitaalsest maailmast väljajätmine on diskrimineeriv.
• Juriidilised nõuded: Paljudes riikides ja piirkondades on seadused ja määrused, mis nõuavad veebijuurdepääsetavust, näiteks Ameerika puuetega inimeste seadus (ADA) Ameerika Ühendriikides, Ontariolaste puuetega inimeste juurdepääsetavuse seadus (AODA) Kanadas ja Euroopa juurdepääsetavuse akt (EAA) Euroopa Liidus. Nõuete eiramine võib kaasa tuua õiguslikke meetmeid. Näiteks mõnedes jurisdiktsioonides võidakse mittejuurdepääsetavate veebisaitide vastu esitada hagi.
• Parem kasutajakogemus: Juurdepääsetavuse parimad tavad kattuvad sageli üldiste kasutatavuse põhimõtetega. Veebisaidi juurdepääsetavaks muutmine võib parandada kasutajakogemust kõigi kasutajate jaoks, olenemata puudest. Näiteks vormiväljadele selgete siltide lisamine on kasulik nii kognitiivsete häiretega kasutajatele kui ka aeglase internetiühendusega kasutajatele, kes soovivad iga välja otstarbest kiiresti aru saada.
• Laiema sihtrühmani jõudmine: Ligikaudu 15% maailma elanikkonnast on puudega. Oma veebisaidi juurdepääsetavaks muutes avate selle oluliselt suuremale publikule. See võib tähendada suuremat äritegevust, kaasatust ja mõju. WHO hinnangul elab üle 1 miljardi inimese mingisuguse puudega.
• SEO eelised: Otsingumootorid nagu Google eelistavad veebisaite, mis on hästi struktureeritud, semantilised ja kasutajasõbralikud. Paljud juurdepääsetavuse parimad tavad, näiteks õigete pealkirjastruktuuride kasutamine ja piltidele alternatiivteksti pakkumine, võivad parandada ka teie veebisaidi otsingumootoritele optimeerimist (SEO).
• Parem brändi maine: Juurdepääsetavusele pühendumise näitamine võib parandada teie brändi mainet ja luua klientidega usaldust. Tarbijad eelistavad üha enam brände, mis on sotsiaalselt vastutustundlikud ja kaasavad.

Juurdepääsetavuse standardite ja suuniste mõistmine

Veebijuurdepääsetavuse peamine standard on Veebisisu juurdepääsetavuse suunised (WCAG), mille on välja töötanud World Wide Web Consortium (W3C). WCAG pakub testitavate edukriteeriumide kogumit, mida saab kasutada veebisisu juurdepääsetavuse hindamiseks. WCAG on rahvusvaheliselt tunnustatud ja sellele viidatakse sageli juurdepääsetavust käsitlevates seadustes ja määrustes üle maailma.

WCAG on üles ehitatud neljale põhimõttele, mida sageli nimetatakse lühendiga POUR:

• Tajutav: Teave ja kasutajaliidese komponendid peavad olema esitatud kasutajatele viisil, mida nad suudavad tajuda. See tähendab tekstivälisele sisule tekstialternatiivide pakkumist, videotele subtiitrite lisamist ja piisava värvikontrastsuse tagamist.
• Toimiv: Kasutajaliidese komponendid ja navigeerimine peavad olema toimivad. See hõlmab veendumist, et kogu funktsionaalsus on kättesaadav klaviatuuri abil, kasutajatele piisava aja andmist sisu lugemiseks ja kasutamiseks ning sisu vältimist, mis võiks põhjustada krambihooge.
• Mõistetav: Teave ja kasutajaliidese toimimine peavad olema mõistetavad. See tähendab selge ja lühikese keelekasutust, juhiste ja tagasiside pakkumist ning veebisaidi ennustatavuse ja järjepidevuse tagamist.
• Tugev: Sisu peab olema piisavalt tugev, et seda saaksid usaldusväärselt tõlgendada mitmesugused kasutajaagendid, sealhulgas abitehnoloogiad. See hõlmab kehtiva HTML-i ja ARIA atribuutide kasutamist ning sisu ühilduvuse tagamist erinevate brauserite ja seadmetega.

WCAG-l on kolm vastavustaset: A, AA ja AAA. Tase A on kõige elementaarsem juurdepääsetavuse tase, samas kui tase AAA on kõige laiaulatuslikum. Enamik organisatsioone püüdleb AA-taseme vastavuse poole, kuna see pakub head tasakaalu juurdepääsetavuse ja praktilisuse vahel. Paljud seadused ja määrused nõuavad AA-taseme vastavust.

Praktilised tehnikad esisüsteemi arendajatele

Siin on mõned praktilised tehnikad, mida esisüsteemi arendajad saavad kasutada oma veebisaitide ja -rakenduste juurdepääsetavuse parandamiseks:

1. Semantiline HTML

Semantiliste HTML-elementide kasutamine on juurdepääsetavuse seisukohalt ülioluline. Semantiline HTML annab teie sisule tähenduse ja struktuuri, muutes selle abitehnoloogiatele lihtsamini mõistetavaks ja tõlgendatavaks. Selle asemel, et kasutada kõige jaoks üldisi <div> ja <span> elemente, kasutage HTML5 semantilisi elemente nagu:

• <header>: Esindab dokumendi või jaotise päist.
• <nav>: Esindab navigeerimislinkide jaotist.
• <main>: Esindab dokumendi põhisisu.
• <article>: Esindab iseseisvat kompositsiooni dokumendis, lehel, rakenduses või saidil.
• <aside>: Esindab sisu, mis on dokumendi põhisisuga kaudselt seotud.
• <footer>: Esindab dokumendi või jaotise jalust.
• <section>: Esindab temaatilist sisu rühmitust.

Näide:

<header>
  <h1>Minu Veebisait</h1>
  <nav>
    <ul>
      <li><a href="#">Avaleht</a></li>
      <li><a href="#">Meist</a></li>
      <li><a href="#">Kontakt</a></li>
    </ul>
  </nav>
</header>

<main>
  <article>
    <h2>Artikli pealkiri</h2>
    <p>Artikli sisu siin...</p>
  </article>
</main>

<footer>
  <p>© 2023 Minu Veebisait</p>
</footer>

Õigete pealkirjatasemete (<h1> kuni <h6>) kasutamine on samuti oluline loogilise dokumendistruktuuri loomiseks. Kasutage pealkirju oma sisu organiseerimiseks ja kasutajatel navigeerimise lihtsustamiseks. <h1> peaks olema lehe peapealkiri ja järgnevaid pealkirju tuleks kasutada teabe hierarhia loomiseks. Vältige pealkirjatasemete vahelejätmist (nt minnes <h2>-lt <h4>-le), kuna see võib ekraanilugeja kasutajaid segadusse ajada.

2. Piltide alternatiivtekst

Kõigil piltidel peaks olema tähendusrikas alternatiivtekst (alt-tekst), mis kirjeldab pildi sisu ja funktsiooni. Alt-teksti kasutavad ekraanilugejad, et edastada pildi teavet kasutajatele, kes seda ei näe. Kui pilt on puhtalt dekoratiivne ega edasta olulist teavet, tuleks alt-atribuut seada tühjaks stringiks (alt="").

Näide:

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

Alt-teksti kirjutamisel olge kirjeldav ja lühike. Keskenduge pildi pakutava olulise teabe edastamisele. Vältige fraase nagu „pilt millestki” või „foto millestki”, kuna ekraanilugejad teatavad tavaliselt, et tegemist on pildiga.

Keeruliste piltide, näiteks diagrammide ja graafikute puhul kaaluge üksikasjalikuma kirjelduse pakkumist ümbritsevas tekstis või kasutage <figure> ja <figcaption> elemente.

3. Klaviatuuri juurdepääsetavus

Kõik interaktiivsed elemendid teie veebisaidil peaksid olema ligipääsetavad klaviatuuri abil. See on ülioluline kasutajatele, kes ei saa kasutada hiirt või muud osutusseadet. Veenduge, et kasutajad saaksid teie veebisaidil navigeerida Tab-klahvi abil ja suhelda elementidega Enter- või Tühikuklahvi abil.

Pöörake tähelepanu oma lehe elementide fookusjärjekorrale. Fookusjärjekord peaks järgima loogilist ja intuitiivset rada läbi sisu. Fookusjärjekorra kontrollimiseks saate kasutada atribuuti tabindex, kuid üldiselt on kõige parem tugineda elementide loomulikule järjekorrale HTML-is. Kasutage tabindex'it ainult vaikimisi fookusjärjekorraga seotud probleemide parandamiseks.

Pakkuge visuaalseid fookuse indikaatoreid, et näidata kasutajatele, milline element on hetkel fookuses. Brauseri vaikimisi fookuse indikaator ei pruugi olla piisav, seega kaaluge oma stiili lisamist CSS-i abil. Veenduge, et fookuse indikaatoril oleks taustaga piisav kontrast.

Näide:

/* CSS */
a:focus, button:focus {
  outline: 2px solid blue;
  outline-offset: 2px;
}

4. ARIA atribuudid

ARIA (Accessible Rich Internet Applications) on atribuutide kogum, mida saab lisada HTML-elementidele, et pakkuda abitehnoloogiatele täiendavat semantilist teavet. ARIA atribuute saab kasutada dünaamilise sisu, keerukate vidinate ja muude interaktiivsete elementide juurdepääsetavuse parandamiseks.

Mõned levinumad ARIA atribuudid on:

• aria-label: Annab elemendile tekstisildi.
• aria-describedby: Seostab elemendi kirjeldusega.
• aria-labelledby: Seostab elemendi sildiga.
• aria-hidden: Peidab elemendi abitehnoloogiate eest.
• aria-live: Näitab, et elemendi sisu uuendatakse dünaamiliselt.
• role: Määratleb elemendi rolli (nt nupp, märkeruut, dialoog).
• aria-expanded: Näitab, kas element on laiendatud või ahendatud.
• aria-selected: Näitab, kas element on valitud.

Näide:

<button aria-label="Sule dialoog" onclick="closeDialog()">X</button>
<div role="dialog" aria-labelledby="dialog-title">
  <h2 id="dialog-title">Minu dialoog</h2>
  <p>Dialoogi sisu siin...</p>
</div>

ARIA atribuutide kasutamisel on oluline järgida ARIA kasutusreegleid:

• 1. reegel: Kui saate kasutada natiivset HTML-elementi või atribuuti, millel on juba vajalik semantika ja käitumine sisse ehitatud, siis tehke seda, selle asemel et elementi ümber kohandada ja lisada ARIA rolli, olekut või omadust, et see juurdepääsetavaks muuta.
• 2. reegel: Ärge muutke natiivset HTML-semantikat, kui te seda tõesti tegema ei pea.
• 3. reegel: Kõik interaktiivsed ARIA-kontrollid peavad olema klaviatuuriga kasutatavad.
• 4. reegel: Ärge kasutage role="presentation" ega aria-hidden="true" fookustatavatel elementidel.
• 5. reegel: Kõigil elementidel, millel on ARIA-roll, peavad olema kõik nõutavad atribuudid.

5. Värvikontrastsus

Veenduge, et teksti ja selle tausta vahel oleks piisav värvikontrastsus. Ebapiisav värvikontrastsus võib muuta teksti lugemise raskeks vaegnägijatele või värvipimedatele kasutajatele.

WCAG nõuab kontrastisuhet vähemalt 4.5:1 tavalise teksti ja 3:1 suure teksti (18pt või 14pt rasvane) puhul. Saate kasutada värvikontrastsuse kontrollijaid, et veenduda, kas teie veebisait vastab neile nõuetele. Saadaval on palju tasuta veebitööriistu, näiteks WebAIM Contrast Checker.

Näide:

/* CSS */
body {
  color: #333; /* Tumehall tekst */
  background-color: #fff; /* Valge taust */
}

(Sellel näitel on kontrastisuhe 7:1, mis vastab WCAG nõuetele.)

Vältige värvi kasutamist ainsa teabe edastamise vahendina. Värvipimedad kasutajad ei pruugi olla võimelised eristama erinevaid värve. Kasutage värvi tähenduse tugevdamiseks täiendavaid vihjeid, nagu tekstisildid või ikoonid.

6. Vormid ja sildid

Vormielementide korrektne sildistamine on juurdepääsetavuse seisukohalt ülioluline. Kasutage <label> elementi, et seostada tekstisilt iga vormi sisendiga. <label> elemendi for-atribuut peaks vastama vastava sisendelemendi id-atribuudile.

Näide:

<label for="name">Nimi:</label>
<input type="text" id="name" name="name">

Keerukate vormide puhul kaaluge seotud vormikontrollide rühmitamiseks <fieldset> ja <legend> elementide kasutamist. See aitab kasutajatel mõista iga kontrollirühma eesmärki.

Esitage selged ja lühikesed veateated, kui kasutajad teevad vormi täitmisel vigu. Veateated peaksid kuvatama vastava vormivälja lähedal ja andma juhiseid vea parandamiseks.

Kasutage required-atribuuti, et näidata, millised vormiväljad on kohustuslikud. See aitab kasutajatel vältida kogemata mittetäielike vormide esitamist.

7. Multimeedia juurdepääsetavus

Veenduge, et multimeediasisu, nagu videod ja helisalvestised, oleks puuetega kasutajatele juurdepääsetav. Pakkuge videotele subtiitreid ja helisalvestistele transkriptsioone. Subtiitrid peaksid täpselt transkribeerima video räägitud sisu, sealhulgas kõik olulised heliefektid või taustamüra.

Otsevideo puhul kaaluge reaalajas subtiitriteenuste kasutamist. Need teenused saavad pakkuda subtiitreid reaalajas, võimaldades kuulmispuudega kasutajatel sisuga kursis olla. Paljud videokonverentsiplatvormid pakuvad sisseehitatud reaalajas subtiitrite funktsioone.

Pakkuge videotele audiokirjeldusi. Audiokirjeldused pakuvad video visuaalse sisu jutustust, kirjeldades, mis ekraanil toimub. Audiokirjeldused on hädavajalikud pimedatele või vaegnägijatele kasutajatele.

Veenduge, et multimeedia juhtnupud, nagu esitus-, paus- ja helitugevuse nupud, oleksid klaviatuuriga ligipääsetavad.

8. Dünaamiline sisu ja uuendused

Kui teie veebisaidi sisu uuendatakse dünaamiliselt, on oluline kasutajaid muudatustest teavitada. See on eriti oluline kasutajatele, kes kasutavad ekraanilugejaid, kuna nad ei pruugi olla teadlikud sisu muutumisest.

Kasutage ARIA live-piirkondi, et teatada dünaamilistest uuendustest ekraanilugejatele. ARIA live-piirkonnad on lehe alad, mis on määratud uuenduste vastuvõtmiseks. Kui live-piirkonna sisu muutub, teatab ekraanilugeja muudatustest kasutajale. Live-piirkonna määratlemiseks kasutage atribuuti aria-live. Atribuute aria-atomic ja aria-relevant saab kasutada selleks, et täpsustada, kuidas ekraanilugeja muudatustest teatab.

Näide:

<div aria-live="polite">
  <p id="status-message">Laadin...</p>
</div>

<script>
  // Uuenda olekuteadet, kui andmed on laetud
  function updateStatus(message) {
    document.getElementById("status-message").textContent = message;
  }
</script>

Selles näites näitab atribuut aria-live="polite", et ekraanilugeja peaks teatama <div> elemendi sisu muudatustest, kuid ei tohiks katkestada kasutaja praegust tegevust. Funktsioon updateStatus() uuendab <p> elemendi sisu, mis käivitab ekraanilugeja uue olekuteate ettelugemise.

9. Juurdepääsetavuse testimine

Testige oma veebisaiti regulaarselt juurdepääsetavuse osas, et tuvastada ja parandada probleeme. Juurdepääsetavuse testimiseks on mitmesuguseid tööriistu ja tehnikaid.

• Automaatsed juurdepääsetavuse kontrollijad: Kasutage automaatseid juurdepääsetavuse kontrollijaid, et skannida oma veebisaiti levinud juurdepääsetavusvigade suhtes. Mõned populaarsed tööriistad on WAVE, A Checker ja Google Lighthouse. Need tööriistad suudavad tuvastada probleeme nagu puuduv alt-tekst, madal värvikontrastsus ja valed pealkirjastruktuurid. Siiski suudavad automaattööriistad tuvastada ainult osa juurdepääsetavusprobleemidest.
• Käsitsi testimine: Testige oma veebisaiti käsitsi, kasutades klaviatuuri ja ekraanilugejat. See aitab teil tuvastada probleeme, mida automaattööriistad ei suuda tuvastada, näiteks fookusjärjekorra probleemid ja ebaselge navigeerimine. Mõned populaarsed ekraanilugejad on NVDA (tasuta ja avatud lähtekoodiga), JAWS (kommertslik) ja VoiceOver (sisseehitatud macOS-i ja iOS-i).
• Kasutajatestimine: Kaasake testimisprotsessi puuetega kasutajaid. Hankige tagasisidet erinevat tüüpi puuetega kasutajatelt, et tagada oma veebisaidi juurdepääsetavus kõigile. Kasutajatestimine võib anda väärtuslikku teavet teie veebisaidi tegeliku juurdepääsetavuse kohta.

Juurdepääsetavus väljaspool veebilehitsejat

Kuigi see juhend keskendub peamiselt veebijuurdepääsetavusele brauseri kontekstis, on oluline meeles pidada, et juurdepääsetavus laieneb veebist kaugemale. Kaaluge juurdepääsetavust ka teistes digitaalsetes valdkondades, näiteks:

• Mobiilirakendused: Rakendage sarnaseid juurdepääsetavuse põhimõtteid mobiilirakenduste arendamisel iOS-ile ja Androidile. Kasutage operatsioonisüsteemide pakutavaid natiivseid juurdepääsetavuse funktsioone.
• Töölauarakendused: Veenduge, et töölauarakendused oleksid klaviatuuriga navigeeritavad, pakuksid piisavat kontrasti ja ühilduksid ekraanilugejatega.
• Dokumendid (PDF, Word jne): Looge juurdepääsetavaid dokumente, kasutades õigeid pealkirjastruktuure, piltidele alt-teksti ja tagades piisava kontrasti.
• E-kirjad: Kujundage juurdepääsetavaid e-kirju, kasutades semantilist HTML-i, pakkudes piltidele alt-teksti ja kasutades selget ning lühikest keelt.

Kokkuvõte

Veebijuurdepääsetavus on esisüsteemi arenduse oluline aspekt. Järgides selles juhendis toodud põhimõtteid ja tehnikaid, saate luua kaasavaid ja juurdepääsetavaid veebikogemusi kõigile kasutajatele, olenemata nende võimetest. Pidage meeles, et juurdepääsetavus on pidev protsess. Testige oma veebisaiti regulaarselt ja koguge tagasisidet puuetega kasutajatelt, et tagada selle juurdepääsetavus ka aja jooksul. Juurdepääsetavust eelistades saate muuta veebi kaasavamaks ja õiglasemaks paigaks kõigile.

Juurdepääsetavust omaks võttes ei järgi te mitte ainult eeskirju; te ehitate paremat veebi kõigile, laiendate oma haaret ja tugevdate oma brändi mainet ülemaailmses mastaabis.