Pristupačnost za programere: izgradnja inkluzivnog koda
Programeri su arhitekti pristupačnosti na razini implementacije. Dok dizajneri postavljaju vizualne i interakcijske temelje, upravo kod u konačnici određuje funkcionira li web stranica s navigacijom tipkovnicom, komunicira li pravilno s čitačima zaslona i održava li pristupačnost kroz preglednike i uređaje.
Dobra vijest je da se većina najboljih praksi pristupačnosti podudara s općim najboljim praksama za čist, semantički, standardima usklađeni kod. Pisanje pristupačnog koda ne znači dodavanje složenosti — to znači ispravno pisanje koda od samog početka.
Semantički HTML na prvom mjestu
Najutjecajnija stvar koju možete učiniti za pristupačnost je ispravno korištenje semantičkih HTML elemenata. HTML5 pruža bogat vokabular elemenata koji nose inherentno značenje i značajke pristupačnosti. Element <button> automatski je fokusabilan, aktivabilan tipkovnicom i najavljivan kao gumb od strane čitača zaslona. <div> s onclick rukovateljem nema nijednu od tih značajki bez značajnog dodatnog rada.
Koristite <nav> za navigacijske regije, <main> za primarni sadržaj, <header> i <footer> za njihove odgovarajuće sekcije, <section> i <article> za područja sadržaja, <h1> do <h6> za naslove u ispravnom hijerarhijskom redoslijedu, <ul> i <ol> za popise, <table> s <th> za tabularne podatke, <label> s for atributima za kontrole obrazaca, te izvorne <button> i <a> elemente za interaktivne kontrole.
Ovi elementi stvaraju stablo pristupačnosti koje pomoćne tehnologije koriste za prezentiranje vašeg sadržaja korisnicima. Kada ih koristite ispravno, velik dio pristupačnosti obrađen je automatski.
Struktura naslova
Naslovi stvaraju strukturni okvir vaše stranice. Korisnici čitača zaslona često navigiraju po naslovima kako bi razumjeli organizaciju sadržaja i pronašli specifične sekcije. Svaka stranica trebala bi imati točno jedan <h1>, a naslovi bi trebali slijediti logičku hijerarhiju bez preskakanja razina — <h3> ne bi trebao slijediti <h1> bez <h2> između.
Nikada ne koristite elemente naslova za vizualno stiliziranje. Ako trebate veliki podebljani tekst koji nije naslov, koristite CSS na drugom elementu. Obrnuto, ako sadržaj funkcionira kao naslov, označite ga kao takav bez obzira na njegovu vizualnu prezentaciju.
Pristupačnost tipkovnice
Sve funkcionalnosti moraju biti operabilne isključivo putem sučelja tipkovnice. To znači da svaki interaktivni element — linkovi, gumbi, kontrole obrazaca, izbornici, modali, klizači, kartice — mora biti dostupan putem tipke Tab (ili Shift+Tab za obrnuti smjer), aktivabilan s Enter ili Space, i izlaziv gdje je to primjereno.
Nikada ne stvarajte zamke tipkovnice u kojima korisnici mogu pritisnuti Tab za ulazak u element, ali ne mogu pritisnuti Tab za izlazak iz njega. Modalni dijalozi trebaju zadržati fokus unutar dijaloga dok je otvoren i vratiti fokus na element koji ga je pokrenuo kada se zatvori, ali pritisak na Escape uvijek bi trebao zatvoriti dijalog.
Osigurajte da redoslijed fokusa slijedi logičan slijed koji odgovara vizualnom rasporedu. DOM redoslijed bi općenito trebao odgovarati vizualnoj prezentaciji. Izbjegavajte korištenje pozitivnih tabindex vrijednosti, koje nadjačavaju prirodni redoslijed fokusa i stvaraju konfuziju. Koristite tabindex="0" da neinteraktivne elemente učinite fokusabilnim kada je to potrebno, i tabindex="-1" za elemente koji trebaju biti fokusabilni samo programatski.
Jezik stranice
Postavite zadani jezik svake stranice koristeći lang atribut na <html> elementu. To govori čitačima zaslona koja pravila izgovora koristiti. Ako se jezik mijenja unutar sadržaja — na primjer, francuska fraza unutar hrvatske stranice — označite promjenu s lang atributom na sadrživom elementu.
Pristupačnost obrazaca
Obrasci su mjesto gdje korisnici pružaju unos i čest su izvor grešaka pristupačnosti. Svaka kontrola obrasca mora imati programatski povezanu oznaku, obično koristeći <label> element s for atributom koji odgovara id-u kontrole. Grupirajte povezane kontrole koristeći <fieldset> i <legend>.
Kada se otkriju pogreške unosa, identificirajte polje s pogreškom i opišite pogrešku u tekstu. Pružite prijedloge za ispravak gdje je to moguće. Za polja koja prihvaćaju specifične formate, pružite jasne upute o očekivanom formatu. Koristite autocomplete atribut za omogućavanje automatskog popunjavanja preglednika za uobičajena polja poput imena, e-pošte, adrese i telefonskog broja.
Statusne poruke koje ne primaju fokus — poput "artikl dodan u košaricu" ili "pronađena 3 rezultata" — moraju se objaviti korisnicima čitača zaslona putem ARIA živih regija ili statusnih uloga.
Alternativni tekst
Svaka nedekorativna slika mora imati smislen alternativni tekst koji opisuje njezin sadržaj ili funkciju. Za informativne slike, opišite što slika prenosi. Za funkcionalne slike (poput logotipa koji vodi na početnu stranicu), opišite funkciju. Za dekorativne slike koje ne dodaju informacije, koristite prazan alt atribut (alt="") kako bi ih čitači zaslona u potpunosti preskočili.
Složene slike poput grafikona, dijagrama ili shema mogu trebati duže opise pružene kroz legendu, susjedni tekst ili povezani detaljni opis.
WAI-ARIA
Specifikacija Accessible Rich Internet Applications pruža dodatnu semantiku za situacije u kojima izvorni HTML nije dovoljan. ARIA vam omogućuje komunikaciju uloga, stanja i svojstava prema pomoćnim tehnologijama za prilagođene widgete i dinamički sadržaj.
Međutim, ARIA se treba koristiti razborito. Prvo pravilo ARIA-e je: ako možete koristiti izvorni HTML element koji ima semantiku i ponašanje koje trebate, učinite to. ARIA ne dodaje funkcionalnost — samo dodaje semantiku. <div role="button"> i dalje treba JavaScript za rukovanje tipkovnicom, dok izvorni <button> to obrađuje automatski.
Koristite ARIA uloge orijentira (ili njihove HTML5 ekvivalente) za definiranje regija stranice. Koristite aria-label i aria-labelledby za pružanje pristupačnih imena gdje vidljivi tekst nije dovoljan. Koristite aria-expanded, aria-selected, aria-checked i druge atribute stanja za komunikaciju trenutnog stanja interaktivnih widgeta. Koristite aria-live regije za najavu ažuriranja dinamičkog sadržaja.
Responzivni dizajn i preformulacija
Sadržaj se mora moći prezentirati bez gubitka informacija na širini od 320 CSS piksela bez potrebe za horizontalnim pomicanjem. To osigurava da korisnici koji zumiraju na 400% na standardnom prikazu radne površine i dalje mogu pristupiti svom sadržaju. Dizajnirajte svoje rasporede tako da sadržaj preformulirate u jedan stupac na uskim širinama umjesto da zahtijevate pomicanje u dva smjera.
Skip linkovi
Osigurajte mehanizam za korisnike tipkovnice da zaobiđu ponovljene blokove sadržaja, poput navigacijskih izbornika, i skoče izravno na glavni sadržaj. Najčešća implementacija je link "Preskoči na glavni sadržaj" koji je prvi fokusabilni element na stranici i postaje vidljiv kada je fokusiran.
Kontrolna lista testiranja za programere
Prije implementacije bilo koje značajke, provjerite: sve funkcionalnosti rade samo s tipkovnicom; redoslijed fokusa je logičan; fokus je vidljiv na svim interaktivnim elementima; sve slike imaju odgovarajući alt tekst; sve kontrole obrazaca imaju oznake; jezik stranice je postavljen; hijerarhija naslova je ispravna; ARIA se koristi ispravno i samo kada je to potrebno; sadržaj se preformulirava na širini od 320px; i ažuriranja dinamičkog sadržaja objavljuju se čitačima zaslona.
U ovom odjeljku
Je li vaša web stranica pristupačna?
Besplatno skenirajte svoju web stranicu i saznajte svoj WCAG rezultat u nekoliko minuta.
Besplatno skenirajte svoju stranicu