Vodič dizajnera za osnove dizajna web pristupačnosti

Web bi trebao biti mjesto gdje svatko može pristupiti istom sadržaju s bilo kojeg mjesta na svijetu. Odgovarajuće tehnike su dalek put uređaji-agnostici. Ali što je s tim pristupačnost-agnostički dizajn?

Web pristupačnost postoji već godinama, ali njezina implementacija zahtijeva nova poboljšanja u tehnologiji i razvoju weba. Mnogi programeri žele pomoći, ali teško je shvatiti kako dizajnirati pristupačnost, jer ima toliko pokretnih dijelova. To uključuje tekst visokog kontrasta, audio stranice za slijepe, optimizirane medije i povratne informacije za preglednike koji nisu JS / CSS.

U ovom postu pokrit ću osnove dizajna pristupačnosti, što je to, što želi riješiti i korake koje možete poduzeti da biste započeli. Imajte na umu, ovo je nevjerojatno detaljna tema i trebat će vam mjeseci ili godine prakse da biste u potpunosti razumjeli. Ali prednosti su vrijedne truda, a svi vaši web projekti ostavit će svakog posjetitelja s trajnim dojmom dostupnog sadržaja.

Uvod u dostupnost

Općenito govoreći, pristupačnost je ideja izgradnje sadržaja tako da može ga konzumirati svatko. To može uključivati slijepe osobe koje ne mogu čitati, a mogu uključivati osobe s tjelesnim invaliditetom koje ne mogu upravljati mišem ili tipkovnicom (ili bilo kojim od njih).

Ali može uključiti i ljude s neznatni nedostaci u viziji. Može uključivati i ljude s probleme s disleksijom ili razumijevanjem čitanja. Zapravo, ideja “web pristupačnost” uključuje svako moguće oštećenje koje bi moglo utjecati na interakciju ili trošenje web-lokacije.

Možda je još važnije što web-pristupačnost može ponuditi, kao što je opisano u definiciji na Wikipediji:

Ipak, Anne Gibson tvrdi u svom postu List Apart da je definicija Wikipedije previše nejasna i nije samo o osobama s invaliditetom. To je doista svatko na internetu iz cijelog svijeta možda nema optimalan pristup internetu.

Mnogi stručnjaci misle da je pristupačnost namijenjena samo slijepim osobama koje ne znaju čitati. No postoje četiri osnovne kategorije pristupačnosti weba:

vidni - slabog vida ili lošeg / bez vida
slušni - gluhih ili nagluhih
spoznajni - poteškoće u razumijevanju ili konzumiranju informacija
Motor - fizički problemi pristupačnosti koji mogu zahtijevati posebne ulazne uređaje kao što su tipkovnice ili programi glasovnih naredbi

Svaka od tih kategorija ima opsežne tehnike koje su mijenjaju se jednako brzo kao i web standardi. No, postoji osjećaj stabilnosti s tim standardima koji su ratificirani u WCAG (Smjernice za pristupačnost web-sadržaja).

Neke web-lokacije, npr Državne institucije dužne su po zakonu slijediti ove smjernice. Primjenjuju se na međunarodnoj razini putem W3C.

Pogledajmo birokraciju iza pristupačnosti weba, a zatim zaronimo u neke primjenjive savjete za dizajn.

W3C i pristupačan dizajn

Ima ih dosta akronimi koji se odnose na dostupnost weba. To može biti komplicirano ako ste potpuno novi u temi, ali kada se pojednostavi, nadam se da će imati više smisla.

W3C (Konzorcij za World Wide Web) - Međunarodna skupina koja definira web standarde za protokole, jezike i propise. Sve službene smjernice za pristupačnost potpadaju pod ovu organizaciju.
WAI (Inicijativa za dostupnost weba) - Službeni program koji pokriva sve o pristupačnosti. Ovaj krovni pojam sadrži sva pravila, smjernice i tehnike moderne pristupačnosti.
WCAG (Smjernice za pristupačnost web-sadržaja) - Skupina standarda i pravila koja dizajnerima pomažu ocjenjivati svoje web-stranice na temelju razine dostupnosti.
ARIJA (Dostupne bogate internetske aplikacije) - Specifičan standard koji definira kako izgraditi pristupačne bogate aplikacije koje se oslanjaju na JavaScript / Ajax i slične tehnologije. Više o tome pročitajte u ovom postu Anna Monus.

Ostale smjernice postoje pod WAI kišobranom, uključujući UAAG za korisničke agente i ATAG za alate za izradu web stranica. Zasad biste trebali biti najviše zainteresirani za prijedloge koje je dao WAI i smjernice koje postavlja skup pravila WAI pod imenom WCAG.

Veliki resurs za učenje više je ovaj post W3C o invaliditetu, dijeleći priče o tome kako osobe s invaliditetom pristupaju Internetu. Može biti teško razumjeti sve zamršene probleme, a kamoli razumjeti kako ih riješiti. Ali najbolji izvor je od ljudi koji se svakodnevno suočavaju s tim problemima.

Još jedna važna tema koju trebate razumjeti je WCAG usklađenost. To se odnosi na razina dostupnosti web-lokacije pokrivaju širok raspon čimbenika. Razine se temelje na usklađenosti sustav ocjenjivanja A, AA i AAA. To možete provjeriti pomoću alata za provjeru web-dostupnosti. Najbolji rezultat je AAA.

Da biste saznali više o ovim smjernicama, pogledajte članak W3C Uvod u razumijevanje WCAG 2.0. Također pogledajte ove srodne veze za više detalja:

WCAG 2.0 Pojednostavljeno
Odjeljak 508 Izvedba usluge WCAG

Koraci do pristupačnog dizajna

Preporučujem da posjetite web-mjesto projekta A11Y radi praktičnih savjeta za pristupačnost. A11Y (koji je također numeronym) je besplatan open source projekt hostiran na GitHubu, nudi tehnike za pristup web dizajnu.

Možete pregledati njihov popis stavki pristupačnosti, ili čak hrpu obrazaca dizajna za elemente kao što su padajući izbornici, kartice, harmonike, gumbi i modalni prozori (među ostalim stavkama).

Teško je naučiti sve te stvari i provesti ih u isto vrijeme. Uzmite ga korak po korak i budite spremni istraživati više ako se zbunite.

Pogledajte A11Y-ove upute i kratke savjete za početak. Naletjet ćete na određene prijedloge kao što su veze za prelazak na sadržaj i sheme boja visokog kontrasta. Svaka od tih tehnika ima svoju razinu detalja, tako da je implementacija uglavnom vezana uz testiranje kako bi se vidjelo što radi.

Razmotrite slijepe korisnike koji možda koriste automatizirani čitač sadržaja. Mogu imati i prevoditelja zvuka ili čak posebnu tipkovnicu za navigaciju webom pomoću tipki, a ne miša. To je razlog zašto pravilan semantički HTML (pogledajte ovaj članak) je toliko važno sa svojstvima poput TabIndex i pristupni ključ.

Ako želite zaroniti, razmislite o preuzimanju teme spremne za pristupačnost. Možete proučiti arhitekturu i prilagoditi dizajn tako da odgovara vašem projektu.

Alati za testiranje pristupačnosti

Ako želite započeti, jednostavno odaberite područje pristupačnosti i isprobajte ga. Tada možete koristiti alate za testiranje kako biste izmjerili razinu uspjeha.

Važno je spomenuti i taj proces može biti frustrirajuće. Toliko je toga potrebno uzeti u obzir, a WCAG smjernice je toliko teško razumjeti da možete završiti s preopterećenjem informacija.

Važno je samo se nastaviti kretati. Odaberite jedno područje pristupačnosti i učinite ga fokusiranim. Zatim upotrijebite ove alate kako biste pomogli pri podešavanju i poboljšanju rada.

Na primjer, možete pokušati raditi s specifikacijama kontrasta usluge WCAG poboljšati čitljivost. Jednom kada odaberete boje, koristite ovaj besplatni kontroler za kontrast kako biste vidjeli rade li zajedno.

Nažalost, smjernice WCAG 2.0 toliko su zbunjujuće da možda imate poteškoća s razumijevanjem zahtjeva. Ali što više pokušavate, više ćete naučiti i više ćete razumjeti.

Za testiranje stranice koja je već online provjerite WAVE. To je besplatni vizualni preglednik koja prikazuje pogreške, upozorenja, probleme s kontrastom i druge specifičnosti web-lokacije. Na bočnoj traci ćete dobiti vizualni prikaz i popis problema.

Postoji još jedna besplatna aplikacija na Cynthia Says web stranici koja može provjerite web-lokacije za ocjene uspjeha WCAG-a od A, AA, AAA, i Odjeljak 508 za vladinu usklađenost.

A ako ste u open source pogledajte ove besplatni alati za testiranje pristupačnosti na GitHubu.

HTML CodeSniffer
Alat za automatsko testiranje pristupačnosti
WCAG Validator

Dodaci preglednika

Dodaci preglednika vjerojatno pružaju najbrže i najlakše metode testiranja pristupačnosti. Možete ih pokrenuti s bilo kojeg računala na bilo kojoj web-lokaciji da biste dobili zaista korisne rezultate.

AInspector za Firefox smatra se nužnim za pristupačnost. To provjerava sve, i mnogo je temeljitije od WAVE testera.

Mozilla korisnici također mogu voljeti WCAG Contrast Checker koji je također besplatan dodatak.

Korisnici Chromea nemaju AInspector, ali imaju Googleove alate za razvojne programere za pristupačnost. To dodaje dodatne alate u prozor inspektora za provjeru smjernica za pristupačnost.

Korisnici Chromea imaju i kontrolne luminoznosti za kontrast boja i neke druge besplatne proširenja.

Nažalost, nisam pronašao mnogo za korisnike Safari, ali sam pronašao jedan nastavak za Opera koji provjerava sukladnost WCAG 2.0. Ako ste voljni pretraživati Google dovoljno teško možete pronaći više alata.

Daljnje čitanje

Ako ste ozbiljni u učenju web pristupačnosti, onda se pripremite za dugu cestu. Nije lako, ali je vrlo ispunjavajuće.

Do sada biste trebali bolje razumjeti stvarnu definiciju web-pristupačnosti, zašto ona postoji i manje pojedinosti o tome što se od razvojnih programera očekuje kako bi poboljšali svoje web-lokacije. Sljedeći korak je daljnje istraživanje i praksa uvođenja ovih načela u vaš tijek rada.

Za više informacija pogledajte sljedeće postove i provjerite upute WCAG-a ako želite znanje izravno iz izvora.

Kako poboljšati dostupnost tablice HTML s oznakom
Pristupačan dizajn za korisnike s invaliditetom
6 Savjeti za poboljšanje dostupnosti web-mjesta
Osigurajte da je vaše mjesto dostupno osobama oštećenog vida