Dostopnost za razvijalce: gradnja vključujoče kode
Razvijalci so arhitekti dostopnosti na ravni implementacije. Medtem ko oblikovalci postavijo vizualne in interakcijske temelje, je koda tista, ki na koncu določa, ali spletno mesto deluje s tipkovnično navigacijo, pravilno komunicira z bralniki zaslona ter ohranja dostopnost na različnih brskalnikih in napravah.
Dobra novica je, da se večina najboljših praks dostopnosti ujema s splošnimi najboljšimi praksami za čisto, semantično, s standardi skladno kodo. Pisanje dostopne kode ne pomeni dodajanja kompleksnosti — pomeni pravilno pisanje kode od samega začetka.
Najprej semantični HTML
Najučinkovitejša stvar, ki jo lahko storite za dostopnost, je pravilna uporaba semantičnih HTML elementov. HTML5 ponuja bogat besednjak elementov, ki nosijo inherenten pomen in funkcije dostopnosti. Element <button> je samodejno fokusabilen, aktivabilen s tipkovnico in ga bralniki zaslona najavijo kot gumb. Element <div> z upravljavcem onclick nima nobene od teh funkcij brez znatnega dodatnega dela.
Uporabite <nav> za navigacijska področja, <main> za primarno vsebino, <header> in <footer> za njuna področja, <section> in <article> za vsebinska področja, <h1> do <h6> za naslove v pravilnem hierarhičnem vrstnem redu, <ul> in <ol> za sezname, <table> s <th> za tabelarične podatke, <label> z atributi for za kontrolne elemente obrazcev ter izvorne elemente <button> in <a> za interaktivne kontrole.
Ti elementi ustvarjajo drevo dostopnosti, ki ga pomožne tehnologije uporabljajo za predstavitev vaše vsebine uporabnikom. Ko jih pravilno uporabljate, se velik del dostopnosti obravnava samodejno.
Struktura naslovov
Naslovi ustvarjajo strukturni oris vaše strani. Uporabniki bralnikov zaslona pogosto navigirajo po naslovih, da razumejo organizacijo vsebine in najdejo določene razdelke. Vsaka stran mora imeti natanko en <h1>, naslovi pa morajo slediti logični hierarhiji brez preskakovanja ravni — <h3> ne sme slediti <h1> brez vmesnega <h2>.
Nikoli ne uporabljajte elementov naslovov za vizualno oblikovanje. Če potrebujete veliko krepko besedilo, ki ni naslov, uporabite CSS na drugem elementu. Obratno, če vsebina deluje kot naslov, jo označite kot takega ne glede na njeno vizualno predstavitev.
Dostopnost s tipkovnico
Vsa funkcionalnost mora biti upravljiva izključno prek tipkovničnega vmesnika. To pomeni, da mora biti vsak interaktivni element — povezave, gumbi, kontrolni elementi obrazcev, meniji, modalna okna, drsniki, zavihki — dosegljiv s tipko Tab (ali Shift+Tab za obratno smer), aktivabilen s tipko Enter ali preslednico ter zapustljiv, kjer je to primerno.
Nikoli ne ustvarjajte tipkovničnih pasti, kjer uporabniki s tabulatorjem pridejo v element, vendar iz njega ne morejo izstopiti. Modalna okna morajo med odprtostjo ujeti fokus znotraj dialoga in vrniti fokus na sprožilni element ob zaprtju, vendar mora pritisk tipke Escape vedno zapreti dialog.
Zagotovite, da vrstni red fokusa sledi logičnemu zaporedju, ki se ujema z vizualno postavitvijo. Vrstni red DOM mora na splošno ustrezati vizualni predstavitvi. Izogibajte se uporabi pozitivnih vrednosti tabindex, ki preglasijo naravni vrstni red fokusa in povzročajo zmedo. Uporabite tabindex="0", da naredite neinteraktivne elemente fokusabilne, ko je to potrebno, in tabindex="-1" za elemente, ki morajo biti fokusabilni le programsko.
Jezik strani
Nastavite privzeti jezik vsake strani z atributom lang na elementu <html>. To pove bralnikom zaslona, katera pravila izgovorjave uporabiti. Če se jezik znotraj vsebine spremeni — na primer, francoski izraz znotraj slovenske strani — spremembo označite z atributom lang na vsebujočem elementu.
Dostopnost obrazcev
Obrazci so mesto, kjer uporabniki zagotavljajo vhodne podatke, in so pogost vir napak pri dostopnosti. Vsak kontrolni element obrazca mora imeti programsko povezano oznako, običajno z elementom <label> z atributom for, ki se ujema z id kontrolnega elementa. Sorodno kontrolne elemente združite z <fieldset> in <legend>.
Ko so zaznane napake pri vnosu, identificirajte polje z napako in opišite napako v besedilu. Če je mogoče, zagotovite predloge za popravek. Za polja, ki sprejemajo specifične formate, zagotovite jasna navodila o pričakovanem formatu. Uporabite atribut autocomplete, da omogočite samodejno izpolnjevanje brskalnika za pogosta polja, kot so ime, e-pošta, naslov in telefonska številka.
Statusna sporočila, ki ne prejmejo fokusa — kot sta »izdelek dodan v košarico« ali »najdeni 3 rezultati« — morajo biti najavljena uporabnikom bralnikov zaslona skozi žive regije ARIA ali statusne vloge.
Alternativno besedilo
Vsaka nedekorativna slika mora imeti smiselno alternativno besedilo, ki opisuje njeno vsebino ali funkcijo. Za informativne slike opišite, kaj slika sporoča. Za funkcionalne slike (kot je logotip, ki se povezuje na domačo stran) opišite funkcijo. Za dekorativne slike, ki ne dodajajo nobenih informacij, uporabite prazen atribut alt (alt=""), da jih bralniki zaslona v celoti preskočijo.
Kompleksne slike, kot so grafikoni, diagrami ali sheme, morda potrebujejo daljše opise, zagotovljene skozi napis, sosednje besedilo ali povezan podroben opis.
WAI-ARIA
Specifikacija za dostopne bogate internetne aplikacije (Accessible Rich Internet Applications) zagotavlja dodatno semantiko za primere, ko izvorni HTML ni zadosten. ARIA vam omogoča, da pomožnim tehnologijam sporočate vloge, stanja in lastnosti za prilagojene gradnike in dinamično vsebino.
Vendar je treba ARIO uporabljati preudarno. Prvo pravilo ARIE je: če lahko uporabite izvorni HTML element, ki ima semantiko in vedenje, ki ga potrebujete, to storite. ARIA ne dodaja funkcionalnosti — dodaja le semantiko. Element <div role="button"> še vedno potrebuje JavaScript za upravljanje tipkovnice, medtem ko izvorni <button> to obravnava samodejno.
Uporabite vloge orientirjev ARIA (ali njihove ekvivalente v HTML5) za opredelitev področij strani. Uporabite aria-label in aria-labelledby za zagotavljanje dostopnih imen, kjer vidno besedilo ni zadostno. Uporabite aria-expanded, aria-selected, aria-checked in druge atribute stanja za sporočanje trenutnega stanja interaktivnih gradnikov. Uporabite žive regije aria-live za najavjanje posodobitev dinamične vsebine.
Odzivno oblikovanje in prelivanje
Vsebina mora biti predstavljiva brez izgube informacij pri širini 320 CSS pikslov brez zahteve po vodoravnem pomikanju. To zagotavlja, da uporabniki, ki povečajo na 400 % na standardnem namiznem zaslonu, še vedno lahko dostopajo do vse vsebine. Oblikujte svoje postavitve tako, da se vsebina pri ozkih širinah prelije v en stolpec, namesto da zahteva pomikanje v dveh dimenzijah.
Preskočne povezave
Zagotovite mehanizem, ki uporabnikom tipkovnice omogoča, da preskočijo ponavljajoče se bloke vsebine, kot so navigacijski meniji, in skočijo neposredno na glavno vsebino. Najpogostejša implementacija je povezava »Preskoči na glavno vsebino«, ki je prvi fokusabilni element na strani in postane vidna, ko prejme fokus.
Kontrolni seznam za razvijalce
Preden uvedete katero koli funkcijo, preverite: vsa funkcionalnost deluje le s tipkovnico; vrstni red fokusa je logičen; fokus je viden na vseh interaktivnih elementih; vse slike imajo ustrezno alternativno besedilo; vsi kontrolni elementi obrazcev imajo oznake; jezik strani je nastavljen; hierarhija naslovov je pravilna; ARIA je pravilno uporabljena in le, ko je to potrebno; vsebina se pri širini 320px preliva; in posodobitve dinamične vsebine so najavljene bralnikom zaslona.
V tem razdelku
Je vaše spletno mesto dostopno?
Brezplačno skenirajte svoje spletno mesto in prejmite svojo oceno WCAG v nekaj minutah.
Brezplačno skenirajte svoje spletno mesto