Kas yra žiniatinklio prieinamumas? WCAG ir įtraukus dizainas paprastai paaiškinti
Žiniatinklio prieinamumas – tai svetainių ir programėlių kūrimas taip, kad žmonės su negalia galėtų jomis naudotis: ar jie būtų neregiai ir naudotųsi ekrano skaitytuvu, ar negalėtų naudotis pele, turėtų silpną regėjimą ar spalvų aklumą, būtų kurtieji ar turėtų kognityvinių ar mokymosi sunkumų. Praktiškai tai reiškia tokius dalykus kaip tekstinės alternatyvos vaizdams, pakankamas spalvų kontrastas, formos su tinkamomis etiketėmis ir viskas, kas veikia vien klaviatūra. Tarptautinis šios srities standartas – WCAG, Žiniatinklio turinio prieinamumo gairės, kurias skelbia W3C.
Prieinamumas dažnai trumpinamas a11y – „a“, tada 11 raidžių, tada „y“.
Kodėl prieinamumas svarbus kuriant su DI
DI kūrimo įrankiai gerai kuria programėles, kurios atrodo teisingai. Prieinamumas pirmiausia susijęs su tuo, ko nematyti ekrano nuotraukoje: ar mygtukas iš tikrųjų yra mygtukas, ar įvesties laukas turi etiketę, kurią ekrano skaitytuvas gali perskaityti, ar meniu galima pasiekti klavišu Tab.
Todėl verta klausti:
- Tai lengva praleisti. Pasirinktinai stilizuotas išskleidžiamasis sąrašas gali atrodyti puikiai, bet be pelės jo naudoti neįmanoma. Nepastebėsite, nebent tai patikrinsite.
- Anksti tai padaryti pigiau. Prašymas prieinamų komponentų jau pirmoje užklausoje beveik nekainuoja. Baigtos programėlės pritaikymas reiškia, kad reikia keisti kiekvieną ekraną.
- Tai padeda visiems. Subtitrai padeda žmonėms triukšmingose vietose, geras kontrastas – telefono naudotojams saulėje, o aiškios etiketės padeda visiems greičiau užpildyti formas.
- Tai persidengia su SEO. Tinkamos antraštės, aprašomos nuorodos ir alt tekstas padeda ir paieškos sistemoms suprasti jūsų puslapius – žr. SEO DI kuriamoms svetainėms.
- Tai gali būti privaloma. Priklausomai nuo to, kur veikiate ir kam teikiate paslaugas, prieinamumas gali būti teisinė pareiga.
Kasdienė analogija
Įsivaizduokite pastato įėjimą.
Laiptai daugeliui žmonių tinka. Rampa tinka žmonėms vežimėliuose – ir taip pat tėvams su vežimėliais, kurjeriams su vežimėliais krovinėms ir keliautojams su lagaminais. Automatinės durys, aiškūs ženklai, Brailio raštas ant liftų mygtukų ir gera apšvietimas kiekvienas pašalina kliūtį kažkam.
Žiniatinklio prieinamumas – ta pati idėja skaitmeninėms erdvėms: programėlės rampos, ženklai ir turėklai. Ir kaip ir su pastatu, rampą lengviau įtraukti į planus, nei pridėti ją tada, kai betonas jau sukietėjęs.
WCAG trumpai
WCAG skelbia W3C Prieinamumo iniciatyva (Web Accessibility Initiative). Dabartinė versija – WCAG 2.2, pirmą kartą paskelbta 2023 m. spalį. Ji yra atgaline kryptimi suderinama: turinys, atitinkantis WCAG 2.2, atitinka ir 2.1, ir 2.0, o W3C rekomenduoja naudoti naujausią versiją. WCAG 2.2 taip pat patvirtintas kaip tarptautinis standartas ISO/IEC 40500:2025. Visiškai kitokia WCAG 3 rengiama kaip ankstyvas projektas, o ne baigtas standartas.
WCAG sudaryta iš keturių principų, dažnai įsimenamų kaip POUR:
| Principas | Reikšmė | Pavyzdžiai |
|---|---|---|
| Suvokiamumas | Žmonės gali priimti turinį pojūčiais, kuriuos naudoja | Alt tekstas vaizdams, subtitrai vaizdo įrašams, pakankamas kontrastas |
| Valdomumas | Žmonės gali naudotis valdikliais ir naršyti | Prieiga klaviatūra, laiko apribojimai, kurių nebūtų galima pratęsti, matomas fokusas |
| Suprantamumas | Turinys ir elgsena aiškūs | Aiškios etiketės, naudingi klaidų pranešimai, nuoseklus naršymas |
| Patikimumas | Veikia su įvairiomis naršyklėmis ir pagalbinėmis technologijomis | Tinkami HTML elementai, teisingi valdiklių pavadinimai ir vaidmenys |
Kiekviena gairė turi patikrinamus sėkmės kriterijus trijuose lygiuose:
- A lygis – minimalus. Šių kriterijų neatitikimas visiškai blokuoja kai kuriuos žmones.
- AA lygis – standartinis tikslas, kurio reikalauja dauguma įstatymų ir politikų.
- AAA lygis – aukščiausias. Verta siekti kai kur, tačiau W3C nerekomenduoja reikalauti jo visoms svetainėms, nes kai kuris turinys jo negali atitikti.
WCAG 2.2 prie 2.1 pridėjo devynis sėkmės kriterijus, įskaitant Tikslinis dydis (minimalus) AA lygiu – spustelėjami elementai paprastai turėtų būti bent 24 x 24 CSS pikselių, su išimtimis – ir Prieinama autentifikacija (minimali), kuri riboja prisijungimo žingsnius, priklausančius nuo atminties ar galvosūkių, pavyzdžiui, reikalavimą perrašyti slaptažodį, neleidžiant jo įklijuoti. Ji taip pat pašalino senąjį kriterijų „Parsing“ kaip pasenusį.
Darbo pavyzdys: registracijos forma
Štai registracijos forma, kurią gali sukurti DI, ir ką parodo prieinamumo patikra:
| Problema | Kam paveikia | Pataisymas |
|---|---|---|
| Įvesties laukai naudoja vietos žymeklio tekstą („El. paštas“) vietoj etikečių | Ekrano skaitytuvo naudotojai; visi, kas pamiršta, koks laukas buvo, kai pradeda rašyti | Matoma <label>, susieta su kiekvienu įvesties lauku |
| Šviesiai pilkas tekstas baltame fone, gerokai žemiau 4,5:1 kontrasto | Žmonės su silpnu regėjimu, visi lauke | Tamsesnis tekstas, atitinkantis 4,5:1 kontrastą |
| Klaidos rodomos tik raudonu rėmeliu | Spalvų akli naudotojai, ekrano skaitytuvo naudotojai | Teksto pranešimas šalia lauko, kurį perskaito ekrano skaitytuvai |
„Registruotis“ yra stilizuotas <div>, o ne <button> | Naudotojai klaviatūra ir ekrano skaitytuvu negali jo aktyvuoti | Naudoti tikrą <button> elementą |
| Naršant laukus Tab klavišu nerodomas matomas kontūras | Klaviatūros naudotojai praranda orientaciją | Aiškus fokuso stilius |
| Logotipo paveikslėlis neturi alt teksto | Ekrano skaitytuvo naudotojai girdi failo pavadinimą | Alt tekstas, pvz., „Acme Bookings“ |
Nė vienas iš šių pataisymų labai nepakeičia formos išvaizdos. Visi jie pakeičia tai, ar kai kurie žmonės gali ją apskritai naudoti.
Pagrindinės sąvokos
| Terminas | Reikšmė |
|---|---|
| Ekrano skaitytuvas | Programinė įranga, kuri perskaito ekraną garsiai arba Brailio ekranui, pavyzdžiui, VoiceOver, NVDA arba JAWS. |
| Alt tekstas | Vaizdo tekstinis aprašymas, kurį perskaito ekrano skaitytuvai. Dekoratyviems vaizdams naudojamas tuščias alt tekstas, kad jie būtų praleisti. |
| Kontrastinis santykis | Kiek skiriasi teksto ir fono spalvos, nuo 1:1 iki 21:1. |
| Navigacija klaviatūra | Svetainės naudojimas klavišais Tab, Enter, tarpo ir rodyklių klavišais vietoj pelės. |
| Fokuso indikatorius | Matomas kontūras, rodantis, kuriuo elementu yra klaviatūros fokusas. |
| Semantinis HTML | Tinkamo elemento naudojimas – <button>, <nav>, <h2> – kad naršyklės ir pagalbinės technologijos suprastų puslapį. |
| ARIA | Papildomi atributai, apibūdinantys pasirinktinius valdiklius pagalbinėms technologijoms. Naudokite saikingai; pirmenybė teikiama vietiniams HTML elementams. |
| Pagalbinės technologijos | Įrankiai, kuriais žmonės naudojasi kompiuteriais – nuo ekrano skaitytuvų iki jungiklių įrenginių ir balso valdymo. |
Dažni klaidingi įsitikinimai
- „Prieinamumas svarbus tik neregiams naudotojams.“ Jis apima regos, motorikos, klausos, kalbos ir kognityvines negalias, taip pat laikinas situacijas, pavyzdžiui, sulaužytą ranką.
- „Prieinamos svetainės atrodo nuobodžiai.“ Prieinamumas riboja kelis dalykus – kontrastą, fokuso stilius, teksto dydį, – bet gražios ir prieinamos svetainės yra norma, o ne išimtis.
- „Automatinis tikrintuvas parodo 100, vadinasi, baigta.“ Automatiniai įrankiai pagauna tik dalį problemų. Ar alt tekstas tikrai prasmingas arba ar srautas su ekrano skaitytuvu logiškas, turi patikrinti žmogus.
- „Perdangos valdiklis padarys mus atitinkančius reikalavimus.“ Ant viršaus uždėti įrankiai negali ištaisyti trūkstamų etikečių ar sugedusios klaviatūros prieigos jūsų kode. Taisykite šaltinį.
- „Mūsų tarpe nėra neįgalių naudotojų.“ Galbūt tiesiog nežinote. Daugelis negalių nėra matomos, o žmonės, susidūrę su kliūtimi, paprastai tiesiog išeina.
Ko paklausti savo DI kūrimo įrankio
- „Sukurk tai taip, kad atitiktų WCAG 2.2 AA lygį.“
- „Naudok semantinį HTML: tikrus mygtukus, nuorodas, antraštes eilės tvarka ir etiketes kiekvienam formos laukui.“
- „Įsitikink, kad kiekvienas interaktyvus elementas veikia vien klaviatūra ir turi matomą fokuso stilių.“
- „Patikrink visų teksto ir piktogramų spalvų kontrastą – 4,5:1 įprastam tekstui, 3:1 dideliam tekstui ir piktogramoms.“
- „Pridėk prasmingą alt tekstą informatyviems vaizdams, o dekoratyviems – tuščią alt tekstą.“
- „Rodyk formos klaidas tekstu, susietu su lauku, o ne vien spalva.“
- „Gerbk naudotojo sumažinto judesio nustatymą animacijoms.“
- „Paleisk automatinę prieinamumo patikrą ir pateik sąrašą to, ko ji negali patikrinti, kad galėčiau patikrinti rankiniu būdu.“
Tada patikrinkite patys: nuleiskite pelę ir pabandykite užbaigti pagrindinį srautą naudodami tik Tab, Shift+Tab, Enter ir tarpo klavišą. Išbandykite savo telefono įmontuotą ekrano skaitytuvą pagrindiniame puslapyje. Priartinkite naršyklę iki 200 % ir pažiūrėkite, ar kas nors sugenda.
Prieinamumas Mythex
Mythex neturi atskiro prieinamumo tikrintuvo, todėl su prieinamumu elkitės kaip su jūsų užklausų ir testavimo dalimi. Prašykite WCAG 2.2 AA jau pirmoje užklausoje, patikrinkite rezultatą Peržiūroje naudodami klaviatūrą ir naudokite /test, kad agentas paspaustų per pagrindinius srautus prieš publikuodamas – žr. Programėlės testavimas. SEO receptas taip pat prašo semantinių antraščių ir prasmingo alt teksto, kurie tarnauja abiem tikslams.
Praktinį kontrolinį sąrašą rasite: kaip padaryti savo svetainę prieinamą. Dizainui skaitykite kaip sukurti gerai atrodančią programėlę su DI, o prieš paleidimą – kaip išbandyti programėlę prieš paleidimą. Patikimiausias šaltinis – W3C WCAG apžvalga.
Klausimai
Kas yra žiniatinklio prieinamumas paprastais žodžiais?
Žiniatinklio prieinamumas – tai svetainių ir programėlių kūrimas taip, kad žmonės su negalia galėtų jas suvokti, suprasti, naršyti ir naudotis. Tai apima neregius naudotojus, kurie naudojasi ekrano skaitytuvais, žmones, kurie negali naudotis pele, žmones su silpnu regėjimu ar spalvų aklumu, kurčius naudotojus ir žmones su kognityvine negalia.
Kas yra WCAG?
WCAG (Web Content Accessibility Guidelines – žiniatinklio turinio prieinamumo gairės) – tai tarptautinis žiniatinklio prieinamumo standartas, kurį skelbia W3C. Dabartinė versija – WCAG 2.2, pirmą kartą paskelbta 2023 m. spalį. Jos sėkmės kriterijai skirstomi į lygius A, AA ir AAA, o AA lygis – tai tikslas, kurio siekia dauguma organizacijų ir į kurį remiasi įstatymai.
Kokio spalvų kontrasto reikalauja WCAG?
AA lygiu įprastas tekstas turi būti ne mažesnio kaip 4,5:1 kontrastinio santykio su fonu, o didelis tekstas (maždaug 18 pt arba 14 pt pusjuodis) – ne mažesnio kaip 3:1. Piktogramos ir matomos valdiklių dalys turi būti ne mažesnio kaip 3:1 kontrasto su gretimu elementu.
Ar žiniatinklio prieinamumas yra teisinis reikalavimas?
Daugelyje vietų ir daugeliui organizacijų – taip. Taisyklės skiriasi pagal šalį ir sektorių – pavyzdžiui, Europos prieinamumo aktas apima daugelį vartotojams skirtų skaitmeninių produktų ir paslaugų ES. Patikrinkite, kokios taisyklės jums taikomos, arba pasikonsultuokite su teisės specialistu.
Ar prieinamumo perdangos ar valdiklis gali padaryti mano svetainę atitinkančią reikalavimus?
Ne, savaime – ne. Perdangos prideda įrankių juostą virš svetainės, bet patikimai negali ištaisyti pagrindinių problemų, pavyzdžiui, trūkstamų etikečių, nenaudojamos klaviatūros navigacijos ar neaiškios struktūros. Patikimas būdas – ištaisyti svetainės kodą ir turinį.