Kako napraviti pregled pristupačnosti?

Dobiti uvid u to koliko je vaš modul, tema ili sajt pristupačan može delovati kao zahtevan zadatak. Ako ste početnik u oblasti pristupačnosti, sama tema može vas zbuniti i nećete znati odakle da krenete. Prilagođavanje širokom spektru sposobnosti podrazumeva razmatranje raznovrsnih pitanja. U ovoj dokumentaciji smo naveli potrebne aspekte u logičan, korak-po-korak proces provere pristupačnosti teme ili sajta vašeg modula.

Počnite sa pokretanjem automatizovanih alata

Mnoge probleme sa pristupačnošću možete otkriti pokretanjem stranice kroz automatizovane alate. Neki od ovih alata su WAVE, Tenon, Accessibility Insights, Google Lighthouse, Siteimprove i Siteimprove ekstenzija za Chrome. Delimično se može automatizovati i pomoću axe-core. Ovi alati pomažu brzo u identifikaciji nekih problema pristupačnosti, kao što su nepravilna struktura markup-a, nedostajući ARIA atributi i nedovoljan kontrast boja.

Testiranje navigacije tastaturom

Navigacija tastaturom je osnovni način pristupa svim elementima na ekranu za korisnike koji ne mogu ili ne žele da koriste miš. To uključuje korisnike čitača ekrana, kao i osobe sa motoričkim teškoćama, poput ponovljenih povreda od stresa (RSI) ili paralize. Za dobar rad sa tastaturom, trudite se da imate logičan redosled tabovanja i jasno vidljive stilove fokusa. Takođe, korisnik ne bi trebalo da mora da tabuje kroz preveliki broj elemenata.

Na šta obratiti pažnju

• Možete li preskočiti ponovljeni sadržaj?

Treba postojati link za preskakanje koji vodi korisnike direktno do jedinstvenog sadržaja stranice, preskačući ponavljajuće elemente poput navigacionih menija. Taj link treba da bude prva tačka tabovanja na stranici i da bude vidljiv kada je fokusiran.

• Da li su svi kontrolni elementi potpuno funkcionalni?

Svaki interaktivni element treba biti dostupan preko tastature. Otvaranje/zatvaranje, prikazi u vidu stabla, slideri, dijalozi i preklapanja – sve to. Ili treba postojati alternativni način za izvršenje akcije.

• Možete li tabovati u oba smera?

U nekim aplikacijama moguće je tabovati unapred, ali nije moguće tabovati unazad (Shift + Tab), što pravi tastaturnu zamku. Proverite da li je moguće kretanje tabulatorom u oba smera kroz interfejs.

• Postoje li tastaturne zamke?

Izbegavajte potpuni zarobljavanje fokusa na bilo kojoj tački. Postoji li način za korisnika da izađe iz overlaya, modalnih prozora i autocomplete vidžeta koristeći samo tastaturu? Ako ne, napravili ste tastaturnu zamku.

• Da li je fokus ograničen kada postoji dijalog?

Kada je otvoren dijalog, fokus tastature treba biti ograničen unutar njega. U suprotnom, korisnik može tabovati van dijaloga, što može biti zbunjujuće.

• Da li je fokus uvek vidljiv?

Opšte pravilo je da svaki interaktivni element sa kojim korisnici mogu komunicirati ili unositi podatke treba biti fokusabilan i da prikazuje indikator fokusa (npr. okvir fokusa). Ako korisnik tastature ne vidi gde je fokus, nema mogućnost interakcije sa stranicom.

• Postoji li sadržaj koji nije vidljiv, ali je dostupan tastaturom?

Proverite da nema sadržaja koji bi trebalo biti skriven, ali je ipak dostupan tabiranjem.

• Postoje li tastaturni ekvivalenti sadržaju vidljivom na hover?

Koristite miš da proverite da li postoji sadržaj koji se vidi samo na hover i kojem ne možete pristupiti samo tastaturom. Takav sadržaj mora imati alternativni pristup. Ovo je važno ne samo za korisnike tastature, već i za korisnike dodirnih uređaja.

• Postoje li elementi koji mogu dobiti fokus, a ne bi trebalo da mogu?

- Neinteraktivni sadržaj ne treba biti fokusabilan. Ako nešto može biti fokusirano, korisnik očekuje da može da sa tim nešto uradi. Fokusabilni ali nefunkcionalni elementi mogu zbuniti i frustrirati korisnike.

- Ne stavljajte tabindex="0" na elemente osim ako korisnik ne treba da njima upravlja.

- Dodavanje nepotrebnih tabindex atributa neinteraktivnim elementima povećava broj koraka za navigaciju kroz sadržaj.

• Da li je redosled tabovanja prirodan i logičan?

Ako je tabindex promenjen ili je raspored stranice reorganizovan, korisnik može doživeti zbunjujući tok prilikom tabovanja kroz stranicu.

Proverite svoje kontrolne tačke

Nakon što završite sve tastaturne testove, povećajte zoom u pregledaču dok ne dostignete kontrolnu tačku i ponovite testove. Korisnici sa visokim nivoom zoom-a će komunicirati sa vašom „tablet“ ili „telefon“ verzijom na svom laptopu. Mobilne kontrolne tačke nisu namenjene samo korisnicima dodirnih ekrana.

Naslovi

Naslovi su osnova vašeg sadržaja. Dobar naslov odražava sadržaj stranice, kao što je sadržaj knjige. Bitno je imati deskriptivne naslove i logične nivoe jer neki korisnici čitača ekrana ih koriste da bi pregledali sadržaj stranice.

Ako ste već pokrenuli neki od automatizovanih alata za pristupačnost, verovatno ste proverili većinu pitanja vezanih za naslove.

Na šta obratiti pažnju

• Da li postoji samo jedan H1 element na stranici?

Na stranici treba biti samo jedan H1 koji opisuje o čemu je stranica.

• Da li nivoi naslova odgovaraju sadržaju?

Važno je koristiti ostale naslove u skladu sa njihovim nivoima, a ne samo po veličini fonta. Važno je ne preskakati nivoe naslova.

• Da li su naslovi dovoljno deskriptivni?

Dobar tekst naslova sažeto opisuje sadržaj koji sledi.

Boja i kontrast

Dovoljan kontrast boja

Kontrast boja predstavlja odnos boje teksta i pozadine. Tekst treba da ima odnos 4,5:1 ili veći u odnosu na pozadinu. Možete koristiti alatke za proveru kontrasta boja da biste proverili da li vaše boje zadovoljavaju ovaj zahtev.

Boja ne sme biti jedini način prenošenja vizuelnih informacija

Iako je boja prihvatljiv način prikaza vizuelnih informacija, ne sme biti jedini način za prenošenje informacija. Osobe sa daltonizmom mogu imati poteškoće ako se jedna boja koristi za prenos važne informacije (što mogu i potpuno propustiti).

Ako koristite boju za prenos informacije, koristite bar jedan od sledećih dodatnih načina:

• Korisite značenjski tekst da pružite informaciju, npr. „uključeno“ i „isključeno“ pored kružića koji menja boju sa zelene na crvenu.
• Korisite ikone koje jasno prenose značenje, da bi korisnici mogli da razlikuju značenje po obliku.
• Za označavanje grešaka u formama, nemojte samo reći „polja označena crvenom bojom“, već navedite ime polja i koristite prepoznatljiv simbol greške.

Primer: obeležavanje obaveznih polja crvenom bojom. Neki korisnici ne mogu razlikovati crvenu od drugih boja, pa im neće biti jasno da popune formu. Ovo se može rešiti dodavanjem zvezdice na oznaku polja.

Stanja fokusa ne treba da se oslanjaju samo na boju. Fokus mora biti vidljiv i dodatno naglašen. Obično je to okvir oko interaktivnog kontrolnog elementa koji ima fokus.

Nije samo ikonica

Ako je ikonica važan deo funkcionalnosti, treba je pratiti tekstom koji opisuje njenu svrhu. Uverite se da su interaktivni elementi kao što su navigacioni meniji označeni. Nije svima jasno značenje ikona koje su vama očigledne. Oznake su potrebne i da čitači ekrana mogu pročitati element.

Zvuk i video

Ako stranica koristi zvuk ili video za prenos informacija, uverite se da su dostupni titlovi ili transkripti. Više informacija potražite u WebAim članku o titlovima, transkriptima i audio opisima.

• Kada koristite informativni video na web stranici sa ili bez zvuka, vaš video treba da ima i tekstualni transkript za osobe sa oštećenjem vida.
• Kada koristite informativni video na web stranici sa zvukom, video treba da ima skrivene titlove za osobe sa oštećenjem sluha.
• Kada koristite informativni i složeni video sa zvukom, možda će vam biti potreban audio opis scena i radnji koje nisu dostupne kroz skrivene titlove, za osobe sa oštećenjem vida.
• Kada koristite live video, titlovi treba da budu dostupni osobama sa oštećenjem sluha.
• Kada koristite live audio, tekstualna alternativa treba da bude dostupna osobama sa oštećenjem vida.

Ovo se odnosi na Vremenski zasnovane medije, WCAG smernice 1.2.

Animacije i automatska reprodukcija video i audio zapisa

Animacije, video i/ili audio koji se automatski reprodukuju bez kontrole korisnika mogu ometati pažnju na druge delove stranice. Čak i ako se animacija ili video nalaze na mestu koje smatrate bezbednim, ne možete znati kako korisnici zaista pregledaju stranicu.

Primeri animacija, automatskog pokretanja videa i zvuka:

• Animacije: karusel koji automatski prikazuje niz slika;
• Automatsko pokretanje videa: YouTube video koji se reprodukuje čim se stranica učita;
• Automatsko pokretanje zvuka: radio stanica koja počinje da svira čim se stranica učita.

Da biste smanjili ometanja na stranici:

• Izbegavajte reprodukciju animacija, video i audio sadržaja duže od 5 sekundi.
• Omogućite korisniku kontrole da pauzira, pokrene ili zaustavi animaciju, video i audio.

Dinamčki sadržaj

JavaScript omogućava dinamičku izmenu delova stranice bez potpunog ponovnog učitavanja. Korisnici koji ne mogu u potpunosti da vide ove promene i dalje moraju biti obavešteni da se one dogodile. Primeri dinamičkih promena su ažuriranje liste rezultata pretrage u realnom vremenu ili prikaz posebne obavesti koja ne zahteva interakciju korisnika. Drupal API Drupal.announce() omogućava objavljivanje ovih dinamičkih promena u pomoćnim tehnologijama.

Drupal.announce() je API baziran na ARIA live regions. Neki primeri korišćenja su u dokumentaciji o ARIA live regions.

Najbolji način da testirate dinamički sadržaj je korišćenje čitača ekrana.

Testiranje pomoću čitača ekrana

Pokretanje automatizovanih provera pristupačnosti i ručno navigiranje po stranici je dobar početak. Ako niste upoznati sa korišćenjem čitača ekrana, mnogi problemi se mogu pronaći i bez njega.

Na šta obratiti pažnju

• Da li svi kontrolni elementi imaju oznaku?

Svi kontrolni elementi treba da imaju labelu koja opisuje njihovu funkciju. U većini slučajeva koristi se label element, ali u nekim složenijim slučajevima možda će biti potrebna aria-labelledby atribut.

• Da li postoje korisnički kontrolni elementi? Da li su opisani odgovarajućom ARIA ulogom i obaveznim ARIA atributima koji prenose njihovo stanje?

Korisnici pomoćnih tehnologija moraju imati pristup istoj informaciji koju vide vidljivi korisnici kroz vizuelne naznake, poput formatiranja, pokazivača ili pozicije. Nativni elementi imaju ovu semantičku informaciju ugrađenu u pretraživač, ali za prilagođene kontrole potrebno je koristiti ARIA. Na primer, prilagođeni slider može imati ARIA ulogu „slider“ sa atributima kao što su aria-valuenow, aria-valuemin i aria-valuemax.

• Da li tok informacija odgovara onome što vidite na ekranu i ima li smisla?

Tok informacija može biti promenjen CSS-om. Da li ima smisla i za korisnike čitača ekrana?

• Da li tekstovi linkova imaju smisla?

Većina čitača ekrana kaže „link“ pre svake veze. Na primer, link „Proizvodi“ bi se čitao kao „link Proizvodi“. Zbog toga linkovi ne treba da sadrže reč „link“ u tekstu, jer korisnici već znaju da je to link.

Prelazak sa linka na link je uobičajen način pregleda web sadržaja za korisnike čitača ekrana. Linkovi treba da budu razumljivi i van konteksta. Fraze poput „klikni ovde“, „više“, „pročitaj više“ itd. su nejasne kada se čitaju van konteksta.

• Da li sve slike imaju odgovarajući alternativni tekst?

Sve slike treba da imaju ispravan alt tekst. Izuzetak su slike koje su samo dekorativne i nisu bitan deo sadržaja. Ako slika treba da se preskoči u čitaču ekrana, alt atribut treba da bude prazan.

Ručno testiranje pomoću čitača ekrana

Neki problemi se mogu otkriti samo ručnim testiranjem sa čitačem ekrana. Najpopularniji čitači ekrana su VoiceOver (Mac OS) i NVDA (Windows). Za početak sa VoiceOver, možete pogledati video o osnovama VoiceOver-a i pročitati WebAIM tutorijal za VoiceOver. Za početak sa NVDA, pogledajte video o osnovama NVDA i tutorijal kako koristiti NVDA i Firefox za testiranje vaših web stranica od Marco Zehe.

Kada se upoznate sa čitačem ekrana i osnovnim tastaturnim komandama, pokušajte da isključite ekran i ostavite tastaturu. Imajte na umu da je izgovor čitača ekrana van okvira ovog testa.

Ako niste korisnik čitača ekrana, testiranje sa njim nije jednostavno. Potrebno je vreme i trud da se odviknete od vizuelne navigacije i naučite prečice i metode dostupne korisniku čitača. Takođe, svi čitači ekrana rade donekle drugačije, pa je važno testirati na što više različitih čitača, pregledača i platformi.