Vodnik oblikovalca za osnove oblikovanja spletne dostopnosti

Splet mora biti kraj, kjer lahko vsakdo dostopa do iste vsebine s kjerkoli na svetu. Odzivne tehnike so daleč daleč naprave za analizo naprav. Kaj pa? načini dostopnosti - agnostik?

Spletna dostopnost obstaja že vrsto let, vendar njeno izvajanje zahteva nov napredek na področju tehnologije in spletnega razvoja. Mnogi razvijalci želijo pomagati, vendar je težko razumeti, kako oblikovati dostopnost, saj je toliko gibljivih delov. To vključuje besedilo z visokim kontrastom, zvočne strani za slepe, optimizirane medije in povratne informacije za brskalnike, ki niso JS / CSS..

V tej objavi bom zajemal osnove oblikovanja dostopnosti, kaj je, kaj želi rešiti, in korake, ki jih lahko naredite, da začnete. Upoštevajte, da je to izjemno podrobna tema in da boste potrebovali mesece ali leta prakse, da boste popolnoma razumeli. Toda koristi so vredne truda in vsi vaši spletni projekti bodo vsakemu obiskovalcu pustili trajen vtis dostopne vsebine.

Uvod v dostopnost

Na splošno je dostopnost ideja o gradnji vsebine uživa jo lahko kdorkoli. To lahko vključuje slepe osebe, ki ne znajo brati, in lahko vključujejo osebe z motnjami v telesnem razvoju, ki ne morejo upravljati z miško ali tipkovnico (ali pa z njimi).

Lahko pa vključuje tudi ljudi z neznatne pomanjkljivosti v viziji. Vključuje lahko ljudi z disleksijo ali bralno razumevanje. Pravzaprav je ideja “spletna dostopnost” vključuje vsaka možna okvara, ki bi lahko vplivala na to, kako nekdo sodeluje ali porabi spletno mesto.

Morda je še pomembneje, kaj lahko ponudi spletna dostopnost, kot je opisano v definiciji Wikipedije:

Kljub temu pa Anne Gibson v svoji rubriki List Apart navaja, da je definicija Wikipedije preveč nejasna in ni prav o invalidih. To je res vsem na spletu iz vsega sveta morda nima optimalnega dostopa do interneta.

Mnogi razvijalci mislijo, da je dostopnost namenjena le slepim ljudem, ki ne znajo brati. Vendar pa obstajajo štiri osnovne kategorije spletne dostopnosti:

1. Vizualno - slabo vida ali slabo / brez vida
2. Zvočni - gluhe ali naglušne
3. Kognitivna - težave, ki razumejo ali porabijo informacije
4. Motor - težave s fizično dostopnostjo, ki lahko zahtevajo posebne vhodne naprave, kot so tipkovnice ali programi glasovnih ukazov

Vsaka od teh kategorij ima obsežne tehnike, ki so tako hitro kot spletni standardi. Vendar pa so ti standardi potrjeni v WCAG (Smernice za dostopnost spletne vsebine).

Nekatere spletne strani, kot je Državne institucije morajo po zakonu slediti tem smernicam. Uporabljajo se na mednarodni ravni preko W3C.

Oglejmo si birokracijo za dostopnostjo do spleta in se nato potopimo v nekaj ustreznih nasvetov za oblikovanje.

W3C & Dostopna oblika

Obstaja kar nekaj kratice, povezane z dostopnostjo do spleta. To je lahko zapleteno, če ste popolnoma nov pri tem vprašanju, vendar po poenostavitvi upam, da bodo bolj smiselni.

• W3C (Konzorcij World Wide Web) - Mednarodna skupina, ki opredeljuje spletne standarde za protokole, jezike in predpise. Vse uradne smernice za dostopnost spadajo v to organizacijo.
• WAI (Pobuda za spletno dostopnost) - Uradni program, ki zajema vse o dostopnosti. Ta krovni izraz vsebuje vsa pravila, smernice in tehnike sodobne dostopnosti.
• WCAG (Smernice za dostopnost spletne vsebine) - Skupina standardov in pravil za pomoč oblikovalcem pri ocenjevanju svojih spletnih strani glede na stopnjo dostopnosti.
• ARIA (Dostopne bogate internetne aplikacije) - Poseben standard, ki opredeljuje, kako zgraditi dostopne bogate aplikacije, ki se zanašajo na JavaScript / Ajax in podobne tehnologije. Več o tem preberite v tem prispevku Anna Monus.

Druge smernice obstajajo pod okriljem WAI, tudi UAAG za uporabniške agente in ATAG za spletna orodja za avtoring. Zaenkrat bi vas najbolj zanimale predloge WAI in smernice, ki jih je postavil nabor pravil WAI pod imenom WCAG.

Dober vir za učenje več je to delovno mesto W3C o invalidnosti, ki razkriva zgodbe o tem, kako invalidi dostopajo do interneta. Težko je razumeti vse zapletene probleme, kaj šele razumeti, kako jih rešiti. Toda najboljši vir so ljudje, ki se vsak dan soočajo s temi težavami.

Druga pomembna tema, ki jo morate razumeti, je skladnost WCAG. To se nanaša na raven dostopnosti spletne strani ki zajemajo veliko različnih dejavnikov. Ravni temeljijo na skladnosti z bonitetni sistem A, AA in AAA. To lahko preverite z orodjem za preverjanje spletne dostopnosti. Najboljši rezultat je AAA.

Če želite izvedeti več o teh smernicah, si oglejte članek W3C Uvod v razumevanje WCAG 2.0. Če želite več podrobnosti, si oglejte tudi te povezane povezave:

• Poenostavljeno WCAG 2.0
• Poglavje 508 Uspešnost storitve WCAG

Koraki za dostopnost Oblikovanje

Priporočam obisk spletne strani projekta A11Y za praktične nasvete glede dostopnosti. A11Y (ki je tudi numeronym) je brezplačen odprtokodni projekt, ki ga gosti GitHub, ponujanje tehnik za dostopno spletno oblikovanje.

Ogledate si lahko seznam kontrolnih seznamov elementov za dostopnost ali celo vrsto vzorcev oblikovanja za elemente, kot so spustni seznami, zavihki, harmonike, gumbi in modalna okna (med drugimi elementi).

Težko se je naučiti vse te stvari in jih izvajati hkrati. Vzemite ga korak za korakom in bodite pripravljeni raziskati več, če boste zmedeni.

Oglejte si navodila in navodila za hitri začetek. Naleteli boste na posebne predloge, kot so povezave s skokom na vsebino in barvne sheme z visokim kontrastom. Vsaka od teh tehnik ima svojo raven podrobnosti, zato je izvajanje predvsem v zvezi s testiranjem, da bi videli, kaj deluje.

Razmislite o slepih uporabnikih, ki morda uporabljajo samodejni bralnik vsebine. Morda imajo tudi prevajalnik zvoka ali celo posebno tipkovnico za navigacijo po spletu s ključi in ne z miško. To je razlog, zakaj ustrezni semantični HTML (poglejte ta članek) je tako pomemben z lastnostmi, kot je tabindex in accesskey.

Če se želite potopiti, preberite temo, ki je pripravljena na dostopnost. Lahko preučite arhitekturo in prilagodite načrt, da ustreza vašemu projektu.

Orodja za testiranje dostopnosti

Če želite začeti, izberite območje dostopnosti in ga preizkusite. Nato lahko uporabite orodja za testiranje, da izmerite svojo stopnjo uspeha.

To je vredno omeniti, da je ta proces je lahko frustrirajuće. Toliko je za razmislek in smernice WCAG-ja so tako težko razumljive, da lahko dobite preobremenjenost z informacijami.

Pomembno je, da se samo premikate. Izberite eno območje dostopnosti in ga naredite osredotočeno. Nato uporabite ta orodja za pomoč pri izboljšanju in izboljšanju svojega dela.

Na primer, poskusite delati z očmi za kontrast WCAG izboljšati berljivost. Ko izberete barve, uporabite ta brezplačni kontrolnik kontrastnega razmerja, da vidite, ali delajo skupaj.

Žal so smernice WCAG 2.0 tako zmedene, da morda imate težave pri razumevanju zahtev. Bolj ko boste poskusili, se boste naučili več in bolj boste razumeli.

Za testiranje spletnega mesta, ki je že na spletu, preverite WAVE. Je brezplačno vizualno preverjanje ki prikazuje napake, opozorila, težave s kontrasti in druge posebnosti spletnega mesta. V stranski vrstici boste dobili vizualni pogled in seznam težav.

Na spletni strani Cynthia Says je še ena brezplačna aplikacija, ki lahko preverite spletne strani za ocene uspeha WCAG za A, AA, AAA, in 508 za vladno skladnost.

In če ste v odprti kodi, si jih oglejte brezplačno orodje za testiranje dostopnosti na GitHubu.

• HTML CodeSniffer
• Avtomatsko orodje za testiranje dostopnosti
• WCAG Validator

Dodatki za brskalnik

Dodatek brskalnika najverjetneje zagotavlja najhitrejše in najlažje metode za testiranje dostopnosti. Lahko jih zaženete iz katerega koli računalnika na kateri koli spletni strani, da bi dobili resnično koristne rezultate.

AInspector za Firefox velja za obvezno dostopnost. To preverja vse in je veliko bolj temeljito kot tester WAVE.

Uporabniki programa Mozilla bodo morda želeli tudi pregledovalnik kontrasta WCAG, ki je tudi brezplačen dodatek.

Uporabniki Chroma nimajo orodja AInspector, vendar imajo orodja za razvijalce za dostopnost, ki jih je Google uradno ustvaril. To doda dodatna orodja v okno inšpektorja za preverjanje smernic za dostopnost.

Uporabniki Chromea imajo tudi kontrolnike za svetilnost za barvni kontrast in nekatere druge proste razširitve.

Na žalost za uporabnike Safarija nisem našel veliko, vendar sem našel eno razširitev za Opera, ki preverja skladnost z WCAG 2.0. Če ste pripravljeni iskati Google dovolj močno, boste morda našli več orodij.

Nadaljnje branje

Če ste resni glede učenja spletne dostopnosti, potem bodite pripravljeni na dolgo pot. To ni enostavno, vendar je zelo dobro.

Sedaj bi morali bolje razumeti dejansko definicijo spletne dostopnosti, zakaj obstaja in manjše podrobnosti o tem, kaj naj bi razvijalci storili za izboljšanje svojih spletnih mest. Naslednji korak je nadaljnja raziskava in praksa, da se ta načela prenesejo v vaš potek dela.

Za več informacij si oglejte naslednje objave in se posvetujte s smernicami WCAG, če želite znanje neposredno iz vira.

• Kako izboljšati dostopnost do tabele HTML z označevanjem
• Dostopna oblika za uporabnike s posebnimi potrebami
• 6 Nasveti za izboljšanje dostopnosti spletnega mesta
• Zagotovite, da je vaše mesto dostopno za slabovidne