WCAG 2.1 nõuetele vastavus: ülemaailmne testimise ja rakendamise juhend

Üha enam ühendatud maailmas ei ole digitaalse ligipääsetavuse tagamine pelgalt vastavuse küsimus; see on fundamentaalne vastutus. Veebisisu ligipääsetavuse suunised (WCAG) 2.1 pakuvad ülemaailmselt tunnustatud standardit veebisisu muutmiseks puuetega inimestele ligipääsetavamaks. See põhjalik juhend uurib WCAG 2.1 nõuetele vastavust, käsitledes testimisstrateegiaid ja praktilisi rakendusviise, mis on asjakohased ülemaailmsele publikule.

Mis on WCAG 2.1?

WCAG 2.1 on rahvusvaheliselt tunnustatud juhiste kogum, mille on välja töötanud World Wide Web Consortium (W3C) oma veebiligipääsetavuse algatuse (WAI) raames. See tugineb standardile WCAG 2.0, käsitledes arenevaid ligipääsetavuse vajadusi, eriti kognitiivsete ja õpiraskustega kasutajate, vaegnägijate ning mobiilseadmetes veebile juurdepääsevate kasutajate jaoks.

WCAG 2.1 on üles ehitatud neljale põhiprintsiibile, mida sageli meenutatakse akronüümi POUR abil:

• Tajutav: Teave ja kasutajaliidese komponendid peavad olema kasutajatele esitatud viisil, mida nad suudavad tajuda. See hõlmab tekstialternatiivide pakkumist mittetekstuaalsele sisule, subtiitrite lisamist videotele ja piisava värvikontrasti tagamist.
• Talitletav: Kasutajaliidese komponendid ja navigeerimine peavad olema talitletavad. See hõlmab klaviatuuriga ligipääsetavust, 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 lihtsa keele kasutamist, prognoositava navigeerimise pakkumist ning kasutajate abistamist vigade vältimisel ja parandamisel.
• Töökindel: Sisu peab olema piisavalt töökindel, et seda saaksid usaldusväärselt tõlgendada mitmesugused kasutajaagendid, sealhulgas abistavad tehnoloogiad. See hõlmab valideeritud HTML-i kasutamist ja ligipääsetavuse kodeerimistavade järgimist.

Miks on WCAG 2.1 nõuetele vastavus oluline?

WCAG 2.1 nõuetele vastavus pakub mitmeid olulisi eeliseid:

• Juriidilised nõuded: Paljudes riikides ja piirkondades on seadused ja määrused, mis nõuavad veebiligipääsetavust, viidates sageli WCAG-le. Näiteks Ameerika Ühendriikide puuetega ameeriklaste seadus (ADA), USA föderaalvalitsuse Section 508, Kanadas Accessibility for Ontarians with Disabilities Act (AODA) ja Euroopas EN 301 549 nõuavad või viitavad kõik WCAG standarditele. Nõuete eiramine võib kaasa tuua kohtumenetluse ja maine kahjustumise.
• Laienenud turuulatus: Veebisaidi ligipääsetavaks muutmine avab selle laiemale publikule, sealhulgas miljonitele puuetega inimestele üle maailma. See tähendab suuremat liiklust, kaasatust ja potentsiaalset tulu.
• Parem kasutajakogemus kõigile: Ligipääsetavuse parandused toovad sageli kasu kõigile kasutajatele, mitte ainult puuetega inimestele. Näiteks selge ja lühike sõnastus, hästi struktureeritud sisu ja klaviatuuriga navigeerimine muudavad veebisaidi kõigi jaoks lihtsamini kasutatavaks.
• Eetilised kaalutlused: Võrdse juurdepääsu tagamine teabele ja teenustele veebis on sotsiaalse vastutuse küsimus. WCAG 2.1 nõuetele vastavus on kooskõlas kaasamise ja võrdsuse eetiliste põhimõtetega.
• Parem SEO: Otsingumootorid eelistavad veebisaite, mis pakuvad head kasutajakogemust. Rakendades ligipääsetavuse parimaid tavasid, saate parandada oma veebisaidi positsiooni otsingumootorites.

WCAG 2.1 edukuse kriteeriumid: põhjalikum ülevaade

WCAG 2.1 edukuse kriteeriumid on testitavad väited, mis määratlevad, kuidas iga juhist täita. Need on jaotatud kolme vastavustasemesse:

• Tase A: Kõige elementaarsem ligipääsetavuse tase. Nende kriteeriumide täitmine on mõne kasutaja jaoks veebisaidi kasutamiseks hädavajalik.
• Tase AA: Käsitleb kõige levinumaid takistusi puuetega kasutajatele. Tase AA on sageli juriidilise vastavuse sihttase.
• Tase AAA: Kõrgeim ligipääsetavuse tase. Kuigi seda ei ole alati võimalik täielikult saavutada, võib AAA-taseme kriteeriumide täitmine oluliselt parandada kasutajakogemust laiemale kasutajaskonnale.

Siin on mõned näited WCAG 2.1 edukuse kriteeriumidest erinevatel tasemetel:

A-taseme näited:

• 1.1.1 Mittetekstuaalne sisu: Pakkuge tekstialternatiive igale mittetekstuaalsele sisule, et seda saaks muuta teistesse vormidesse, mida inimesed vajavad, näiteks suures kirjas tekst, punktkiri, kõne, sümbolid või lihtsam keel. Näide: piltidele nende sisu kirjeldava alt-teksti lisamine.
• 1.3.1 Info ja seosed: Esitluse kaudu edastatud teave, struktuur ja seosed peavad olema programmiliselt määratletavad või tekstina kättesaadavad. Näide: semantiliste HTML-elementide, nagu <h1>-<h6> pealkirjade jaoks ning <ul> ja <ol> loendite jaoks, kasutamine.
• 2.1.1 Klaviatuur: Kogu sisu funktsionaalsus on talitletav klaviatuuriliidese kaudu, ilma et see nõuaks üksikute klahvivajutuste jaoks spetsiifilist ajastust. Näide: tagamine, et kõigile interaktiivsetele elementidele, nagu nupud ja lingid, pääseb juurde ja neid saab aktiveerida ainult klaviatuuri abil.

AA-taseme näited:

• 1.4.3 Kontrastsus (minimaalne): Teksti ja teksti kujutiste visuaalse esitluse kontrastsussuhe on vähemalt 4,5:1. Näide: piisava värvikontrasti tagamine teksti ja taustavärvide vahel. Abiks võivad olla tööriistad nagu WebAIM'i Contrast Checker.
• 2.4.4 Lingi eesmärk (kontekstis): Iga lingi eesmärk peab olema määratletav lingi tekstist endast või lingi tekstist koos selle programmiliselt määratud lingi kontekstiga, välja arvatud juhul, kui lingi eesmärk oleks kasutajatele üldiselt mitmetähenduslik. Näide: vältige üldisi lingitekste nagu "Kliki siia" ja kasutage selle asemel kirjeldavat teksti nagu "Loe lähemalt WCAG 2.1 kohta."
• 3.1.1 Lehe keel: Iga lehe vaikimisi kasutatav inimkeel peab olema programmiliselt määratletav. Näide: lehe keele määramiseks atribuudi <html lang="en"> kasutamine. Mitmekeelsete veebisaitide puhul kasutage erinevate jaotiste jaoks erinevaid keeleatribuute.

AAA-taseme näited:

• 1.4.6 Kontrastsus (täiustatud): Teksti ja teksti kujutiste visuaalse esitluse kontrastsussuhe on vähemalt 7:1. Näide: see on kõrgem kontrastsusnõue kui AA-tasemel ja sobib raskema nägemispuudega kasutajatele.
• 2.2.3 Ajastus puudub: Ajastus ei ole sisu poolt esitatud sündmuse või tegevuse oluline osa, välja arvatud mitteinteraktiivse sünkroniseeritud meedia ja reaalajas sündmuste puhul. Näide: kasutajatel lubatakse interaktiivsete elementide ajalimiite peatada, peatada või pikendada.
• 3.1.3 Ebatavalised sõnad: On olemas mehhanism ebatavalisel või piiratud viisil kasutatud sõnade või fraaside, sealhulgas idioomide ja žargooni, spetsiifiliste definitsioonide tuvastamiseks. Näide: sõnastiku või kohtspikrite pakkumine tehniliste terminite või slängi selgitamiseks.

WCAG 2.1 nõuetele vastavuse testimisstrateegiad

Põhjalik testimine on WCAG 2.1 nõuetele vastavuse tagamiseks ülioluline. Soovitatav on kasutada kombineeritult automaatseid ja manuaalseid testimismeetodeid.

Automaatne testimine:

Automaatsed testimisvahendid suudavad kiiresti tuvastada levinud ligipääsetavusprobleeme, nagu puuduv alt-tekst, ebapiisav värvikontrastsus ja katkised lingid. Need tööriistad suudavad skannida terveid veebisaite ja genereerida aruandeid, mis toovad esile potentsiaalsed probleemid. Siiski ei ole automaatsest testimisest üksi piisav, kuna see ei suuda tuvastada kõiki ligipääsetavusprobleeme, eriti neid, mis on seotud kasutatavuse ja kontekstiga.

Automaatsete testimisvahendite näited:

• WAVE (Web Accessibility Evaluation Tool): Tasuta brauserilaiendus ja veebitööriist, mis annab visuaalset tagasisidet ligipääsetavusprobleemide kohta.
• AXE (Accessibility Engine): Avatud lähtekoodiga JavaScripti teek, mida saab integreerida automaatsetesse testimisvoogudesse.
• Lighthouse (Google Chrome DevTools): Automaatne tööriist veebilehtede kvaliteedi, sealhulgas ligipääsetavuse parandamiseks.
• Tenon.io: Tasuline teenus, mis pakub üksikasjalikke ligipääsetavuse aruandeid ja integreerub erinevate arendustööriistadega.

Automaatse testimise parimad tavad:

• Integreerige automaatne testimine oma arendustöövoogu.
• Käivitage automaatteste regulaarselt, näiteks pärast iga koodimuudatust.
• Kasutage mitut automaatset testimisvahendit, et saada põhjalikum hinnang.
• Käsitlege automaattestide tulemusi edasise uurimise lähtepunktina.

Manuaalne testimine:

Manuaalne testimine hõlmab veebisisu ja funktsionaalsuse ülevaatamist puuetega kasutajate vaatenurgast. Seda tüüpi testimine on hädavajalik ligipääsetavusprobleemide tuvastamiseks, mida automaatsed tööriistad ei suuda tuvastada, näiteks kasutatavusprobleemid, klaviatuuriga navigeerimise probleemid ja semantilised vead.

Manuaalse testimise tehnikad:

• Klaviatuuriga navigeerimise testimine: Veenduge, et kõigile interaktiivsetele elementidele pääseb juurde ja neid saab aktiveerida ainult klaviatuuri abil.
• Ekraanilugejaga testimine: Kasutage ekraanilugejat, näiteks NVDA (tasuta ja avatud lähtekoodiga) või JAWS (kommertslik), et kogeda veebisaiti nii, nagu seda teeks pime kasutaja. See hõlmab sisu kuulamist, pealkirjade ja orientiiride abil navigeerimist ning vormielementidega suhtlemist.
• Suurendusega testimine: Kasutage ekraanisuurendajat, et testida veebisaidi kasutatavust erinevatel suumitasemetel. Veenduge, et sisu ümber paigutuks korrektselt ja et teave ei läheks kaduma.
• Värvikontrasti testimine: Kontrollige värvikontrasti suhteid käsitsi, kasutades värvikontrasti analüsaatori tööriista.
• Kognitiivse ligipääsetavuse testimine: Hinnake veebisaidil kasutatava keele selgust ja lihtsust. Veenduge, et juhised on selged ja lühikesed ning navigeerimine on prognoositav.

Puuetega kasutajate kaasamine:

Kõige tõhusam viis ligipääsetavuse tagamiseks on kaasata testimisprotsessi puuetega kasutajaid. Seda saab teha kasutajatestide, fookusgruppide või puuetega ligipääsetavuse konsultantide poolt läbi viidud ligipääsetavuse auditite kaudu. Nende elukogemused ja arusaamad võivad anda väärtuslikku tagasisidet, mis aitab teil tuvastada ja lahendada ligipääsetavusprobleeme, mis muidu võiksid märkamatuks jääda.

Ligipääsetavuse auditid:

Ligipääsetavuse audit on veebisaidi või rakenduse põhjalik hindamine, et tuvastada ligipääsetavuse takistused ja hinnata vastavust WCAG 2.1 nõuetele. Auditeid viivad tavaliselt läbi ligipääsetavuse eksperdid, kes kasutavad kombineeritult automaatseid ja manuaalseid testimistehnikaid. Auditi aruanne sisaldab üksikasjalikku loetelu ligipääsetavusprobleemidest koos parandusettepanekutega.

Ligipääsetavuse auditite tüübid:

• Algtaseme audit: Veebisaidi üldise ligipääsetavuse põhjalik hindamine.
• Sihipärane audit: Keskendub veebisaidi konkreetsetele valdkondadele või teatud tüüpi ligipääsetavusprobleemidele.
• Regressiooniaudit: Kontrollib uute ligipääsetavusprobleemide olemasolu pärast koodimuudatusi või uuendusi.

WCAG 2.1 nõuetele vastavuse rakendusstrateegiad

WCAG 2.1 rakendamine nõuab ennetavat ja süstemaatilist lähenemist. See ei ole ühekordne parandus, vaid pidev protsess, mis tuleks integreerida teie arendustsüklisse.

Planeerige ja seadke prioriteedid:

• Töötage välja ligipääsetavuse poliitika: Määratlege selgelt oma organisatsiooni pühendumus ligipääsetavusele.
• Viige läbi esialgne ligipääsetavuse audit: Tehke kindlaks oma veebisaidi praegune ligipääsetavuse staatus.
• Seadke parandustööde prioriteedid: Keskenduge esmalt kõige kriitilisemate ligipääsetavusprobleemide lahendamisele. A-taseme probleemid tuleks lahendada enne AA-taset ja AA-tase enne AAA-taset.
• Looge ligipääsetavuse tegevuskava: Tooge välja sammud, mida teete WCAG 2.1 vastavuse saavutamiseks ja säilitamiseks.

Kaasake ligipääsetavus oma arendustöövoogu:

• Ligipääsetavuse koolitus arendajatele ja disaineritele: Pakkuge koolitust WCAG 2.1 juhiste ja ligipääsetavuse parimate tavade kohta.
• Kasutage ligipääsetavaid kodeerimistavasid: Kirjutage semantilist HTML-i, kasutage ARIA atribuute asjakohaselt ja tagage piisav värvikontrastsus.
• Valige ligipääsetavad komponendid ja teegid: Kasutage eelnevalt loodud kasutajaliidese komponente ja teeke, mis on disainitud ligipääsetavaks.
• Integreerige ligipääsetavuse testimine oma CI/CD konveierisse: Automatiseerige ligipääsetavuse testimine oma ehitusprotsessi osana.
• Viige läbi regulaarseid ligipääsetavuse ülevaatusi: Vaadake oma veebisaiti perioodiliselt üle, et tagada selle ligipääsetavuse säilimine selle arenedes.

Sisu loomise parimad tavad:

• Pakkuge tekstialternatiive kogu mittetekstuaalsele sisule: Kirjutage piltidele kirjeldav alt-tekst, videotele subtiitrid ja helifailidele transkriptsioonid.
• Kasutage selget ja lühikest keelt: Vältige žargooni ja tehnilisi termineid. Kirjutage lihtsas keeles, mis on kergesti mõistetav.
• Struktureerige sisu loogiliselt: Kasutage sisu organiseerimiseks pealkirju, alapealkirju ja loendeid.
• Veenduge, et lingid on kirjeldavad: Vältige üldisi lingitekste nagu "Kliki siia". Kasutage kirjeldavat teksti, mis osutab selgelt lingi eesmärgile.
• Pakkuge piisavat värvikontrasti: Veenduge, et teksti ja taustavärvide vahel oleks piisav värvikontrastsus.
• Vältige teabe edastamiseks ainult värvi kasutamist: Pakkuge teabe mõistmiseks alternatiivseid viise, näiteks teksti või sümboleid.

Abistava tehnoloogia kaalutlused:

• Ekraanilugejad: Veenduge, et sisu on semantiliselt struktureeritud ja ARIA atribuute kasutatakse korrektselt. Testige mitme ekraanilugejaga (NVDA, JAWS, VoiceOver), kuna need tõlgendavad koodi erinevalt.
• Ekraanisuurendajad: Disainige sisu ümberpaigutamiseks. Sisu peaks suurendamisel kohanema ilma teabe või funktsionaalsuse kadumiseta.
• Häältuvastustarkvara (nt Dragon NaturallySpeaking): Veenduge, et kõiki funktsioone saab aktiveerida häälkäsklustega. Märgistage vormielemendid asjakohaselt.
• Alternatiivsed sisendseadmed (nt lülitusseadmed): Tagage klaviatuuriga ligipääsetavus ja kohandatavad kiirklahvid.

Ülemaailmsed kaalutlused:

• Keel: Tagage atribuudi `lang` korrektne kasutamine sisu keele määramiseks. Pakkuge sisu jaoks tõlkeid mitmes keeles.
• Märgistikud: Kasutage laia valiku märkide toetamiseks UTF-8 kodeeringut.
• Kuupäeva- ja ajavormingud: Kasutage rahvusvahelisi standardseid kuupäeva- ja ajavorminguid (nt ISO 8601).
• Valuuta: Kasutage sihtrühmale sobivaid valuutasümboleid ja -koode.
• Kultuuriline tundlikkus: Olge teadlik kultuurilistest erinevustest ja vältige kujundite või keelekasutust, mis võiks olla solvav või sobimatu. Näiteks võivad teatud värvid või sümbolid eri kultuurides erinevat tähendust omada.

Näide: ligipääsetavate vormide rakendamine

Ligipääsetavad vormid on kasutaja interaktsiooni jaoks üliolulised. Siin on, kuidas neid rakendada:

1. Kasutage <label> elemente: Seostage sildid vormiväljadega, kasutades `for` atribuuti. See annab selge kirjelduse välja eesmärgi kohta.
2. Kasutage vajadusel ARIA atribuute: Kui silti ei saa otse vormiväljaga seostada, kasutage lisateabe andmiseks ARIA atribuute nagu `aria-label` või `aria-describedby`.
3. Pakkuge selgeid veateateid: Kui kasutaja sisestab valed andmed, pakkuge selgeid ja konkreetseid veateateid, mis ütlevad neile, kuidas viga parandada.
4. Kasutage fieldset ja legend elemente: Kasutage seotud vormiväljade grupeerimiseks ja grupi kirjelduse andmiseks elemente `<fieldset>` ja `<legend>`.
5. Tagage klaviatuuriga ligipääsetavus: Veenduge, et kasutajad saavad vormiväljadel navigeerida ainult klaviatuuri abil.

HTML-i näide:

<form>
  <fieldset>
    <legend>Kontaktandmed</legend>
    <label for="name">Nimi:</label>
    <input type="text" id="name" name="name" required><br><br>

    <label for="email">E-post:</label>
    <input type="email" id="email" name="email" required aria-describedby="emailHelp"><br>
    <small id="emailHelp">Me ei jaga kunagi teie e-posti aadressi kellegi teisega.</small><br><br>

    <button type="submit">Esita</button>
  </fieldset>
</form>

WCAG 2.1 nõuetele vastavuse säilitamine

WCAG 2.1 nõuetele vastavus ei ole ühekordne saavutus; see on pidev protsess. Veebisaidid ja rakendused arenevad pidevalt, seega on oluline regulaarselt jälgida ja testida ligipääsetavusprobleeme.

Regulaarne jälgimine ja testimine:

• Kehtestage regulaarsete ligipääsetavuse auditite ajakava.
• Integreerige automaatne ligipääsetavuse testimine oma arendustöövoogu.
• Julgustage kasutajaid ligipääsetavusprobleemidest teatama.
• Hoidke end kursis uusimate ligipääsetavuse juhiste ja parimate tavadega.

Koolitus ja teadlikkus:

• Pakkuge pidevat ligipääsetavuse koolitust kõigile töötajatele, kes on seotud teie veebisaidi arendamise ja hooldusega.
• Edendage ligipääsetavuse alast teadlikkust kogu oma organisatsioonis.
• Julgustage kaasamise ja ligipääsetavuse kultuuri.

Kokkuvõte

WCAG 2.1 nõuetele vastavus on hädavajalik ligipääsetavate digitaalsete kogemuste loomiseks ülemaailmsele publikule. Mõistes WCAG 2.1 põhimõtteid, rakendades tõhusaid testimisstrateegiaid ja integreerides ligipääsetavuse oma arendustöövoogu, saate tagada, et teie veebisait on kõigile ligipääsetav, olenemata nende võimetest. Pidage meeles, et ligipääsetavus ei ole ainult vastavuse küsimus; see on kaasavama ja õiglasema digitaalse maailma loomine.