Juurdepaasetavus arendajatele: kaasava koodi ehitamine
Arendajad on juurdepaasetavuse arhitektid rakendamise tasandil. Kuigi disainerid seavad visuaalsed ja interaktsiooni alused, on just kood see, mis loplikult maarab, kas veebisait toootab klaviatuurinavigeerimisega, suhtleb korrektselt ekraanilugejatega ja sailitab juurdepaasetavuse laabi brauserite ja seadmete.
Hea uudis on see, et enamik juurdepaasetavuse parimaid tavasid langevad kokku uldiste parimatev tavadega puhta, semantilise, standarditele vastava koodi jaoks. Juurdepaasetava koodi kirjutamine ei tahenda keerukuse lisamist — see tahendab koodi oiget kirjutamist ennekoeike.
Koigepealt semantiline HTML
Koeige moejukam asi, mida saad juurdepaasetavuse jaoks teha, on kasutada semantilisi HTML-elemente oigesti. HTML5 pakub rikkalikku elementide soenavara, millel on loomupaerane tahendus ja juurdepaasetavuse funktsioonid. <button> element on automaatselt fookusesse seatav, klaviatuuriga aktiveeritav ja ekraanilugejad teatatavad selle nupuna. <div> onclick-kasitlejaga ei oma uhtegi neist funktsioonidest ilma maaerkimisvaeaerse lisakoeta.
Kasuta <nav> navigeerimispiirkondade jaoks, <main> peamise sisu jaoks, <header> ja <footer> vastavate jaotiste jaoks, <section> ja <article> sisupiirkondade jaoks, <h1> kuni <h6> pealkirjade jaoks oiges hierarhilises jaerjekorras, <ul> ja <ol> loendite jaoks, <table> koos <th>-ga tabeliandmete jaoks, <label> koos for atribuutidega vormi juhtelementide jaoks ning natiivseid <button> ja <a> elemente interaktiivsete juhtimiste jaoks.
Need elemendid loovad juurdepaasetavuse puu, mida abistavad tehnoloogiad kasutavad sinu sisu kasutajatele esitamiseks. Kui kasutad neid oigesti, on suur osa juurdepaasetavusest automaatselt lahendatud.
Pealkirjade struktuur
Pealkirjad loovad sinu lehe strukturaalse kontuuri. Ekraanilugeja kasutajad navigeerivad sageli pealkirjade jargi, et moista sisu korraldust ja leida konkreetseid jaotisi. Igal lehel peaks olema tapselt uks <h1> ja pealkirjad peaksid jargima loogilist hierarhiat ilma tasemeid vahele jatmata — <h3> ei tohiks jaergneda <h1>-le ilma <h2>-ta vahepeal.
Ara kunagi kasuta pealkirjaelemente visuaalse stiilivormingu jaoks. Kui vajad suurt paksu teksti, mis ei ole pealkiri, kasuta CSS-i moel elemendil. Vastupidi, kui sisu tooeotab pealkirjana, margi see pealkirjana olenemata selle visuaalsest esitusest.
Klaviatuuri juurdepaasetavus
Koik funktsionaalsus peab olema ainult klaviatuuri kaudu kasutatav. See tahendab, et iga interaktiivne element — lingid, nupud, vormi juhtelemendid, menuued, modaalid, liuguerid, vahekaardid — peab olema Tab-klahviga kattesaadav (voi Shift+Tab tagasisuunas), Enter voi Space klahviga aktiveeritav ja vajaduse korral vaeljumiseks kasutataiv.
Ara kunagi loo klaviatuuriloeekse, kus kasutajad saavad Tab-iga elemendile liikuda, kuid ei saa sealt valja liikuda. Modaaldialooogid peaksid fookust loeksis hoidma, kuni need on avatud, ja tagastama fookuse kaeivitavale elemendile sulgemise korral, kuid Escape peaks alati dialoogii sulgemist voeimaldama.
Taga, et fookuse jaerkord jaergib loogilist jaerjeveerdu, mis vastab visuaalsele paigutusele. DOM-i jaerkord peaks ueldiselt vastama visuaalsele esitlusele. Valti positiivsete tabindex vaertuste kasutamist, mis tuehistavad loomuliku fookuse jaerkorra ja tekitavad segadust. Kasuta tabindex="0", et muuta mitteinteraktiivsed elemendid vajaduse korral fookusesse seatavaks, ja tabindex="-1" elementide jaoks, mis peaksid olema fookusesse seatavad ainult programmiliselt.
Lehe keel
Maara iga lehe vaikekeel lang atribuudiga <html> elemendil. See uetleb ekraanilugejatele, milliseid haeaeldusreegleid kasutada. Kui keel muutub sisu sees — naeiteks prantsuse fraas ingliskeelsel lehel — maergi muudatus lang atribuudiga umberitseival elemendil.
Vormide juurdepaasetavus
Vormid on koht, kus kasutajad esitavad sisestust, ja need on sage juurdepaasetavuse vigade allikas. Igal vormi juhtelemendil peab olema programmiliselt seostatud silt, tavaliselt kasutades <label> elementi koos for atribuudiga, mis vastab juhtelemendi id-le. Grupeeri seotud juhtelemendid kasutades <fieldset> ja <legend>.
Kui tuvastatakse sisestusvead, tuvasta viga sisaldav vaeeli ja kirjelda viga tekstina. Paku voimalusel parandussoovitusi. Vaeljade jaoks, mis noueavad konkreetseid formaate, paku selgeid juhiseid oodatava formaadi kohta. Kasuta autocomplete atribuuti brauseri automaattaeitmise lubamiseks tavaliste vaeljade nagu nimi, e-post, aadress ja telefoninumber jaoks.
Olekuteated, mis ei saa fookust — nagu "toode lisatud ostukorvi" voi "leiti 3 tulemust" — tuleb ekraanilugeja kasutajatele teatavaks teha ARIA reaalajas piirkondade voi olekurollide kaudu.
Alternatiivne tekst
Igal mittedekoratiivsel pildil peab olema tahendusrikas alternatiivne tekst, mis kirjeldab selle sisu voi funktsiooni. Informatiivsete piltide puhul kirjelda, mida pilt edastab. Funktsionaalsete piltide puhul (nagu logo, mis viitab avalehele) kirjelda funktsiooni. Dekoratiivsete piltide puhul, mis ei lisa teavet, kasuta tuehja alt atribuuti (alt=""), et ekraanilugejad need taielikult vahele jaetaksid.
Keerukamad pildid nagu diagrammid, graafikud voi skeemid voivad vajada pikemaid kirjeldusi, mida pakutakse pealkirja, koervalolevad teksti voi lingitud ueeksikasjaliku kirjelduse kaudu.
WAI-ARIA
Accessible Rich Internet Applications spetsifikatsioon pakub lisaksemantikat olukordade jaoks, kus natiivne HTML on ebapiisav. ARIA voeimoeldab edastada rolle, olekuid ja omadusi abistavatele tehnoloogiatele kohandatud vidinaste ja duenaamilise sisu jaoks.
Siiski tuleks ARIA-t kasutada karsinalt. ARIA esimene reegel on: kui saad kasutada natiivset HTML-elementi, millel on vajalik semantika ja kaietumine, tee seda. ARIA ei lisa funktsionaalsust — see lisab ainult semantikat. <div role="button"> vajab endiselt JavaScripti klaviatuurikaeisitlemiseks, samas kui natiivne <button> kasitleb seda automaatselt.
Kasuta ARIA maamaeerigiemolle (voi nende HTML5 vasteid) lehepiirkondade maaeramiseks. Kasuta aria-label ja aria-labelledby, et pakkuda juurdepaasetavaid nimesid, kus naehtav tekst on ebapiisav. Kasuta aria-expanded, aria-selected, aria-checked ja muid oleku atribuute interaktiivsete vidinaste praeguse oleku edastamiseks. Kasuta aria-live piirkondi duenaamilise sisu uuenduste teatamiseks.
Responsiivne disain ja uembervool
Sisu peab olema esitatav ilma teabe kaotuseta 320 CSS piksli laiusel ilma horisontaalset kerimist noedmata. See tagab, et kasutajad, kes suurendavad 400%-ni tavalise toeoelaoeiekraeni peal, paeaesevad koigile sisule ligi. Kujunda oma paigutused umber, et sisu voolaks kitsastel laiustel uhte veergu, selle asemel et nouda kerimist kahes moeoeotmes.
Vahelelingid
Paku mehhanism klaviatuuri kasutajatele korduvate sisuplokkide, nagu navigeerimismenueude, moedakaeisimiseks ja otse peamise sisu juurde huepoeamiseks. Levinuim rakendus on "Huepoe poehisisule" link, mis on lehe esimene fookusesse seatav element ja muutub naehtavaks, kui see saab fookuse.
Arendaja testimise kontrollnimekiri
Enne mis tahes funktsiooni juurutamist kontrolli: koik funktsionaalsus tooeotab ainult klaviatuuriga; fookuse jaerkord on loogiline; fookus on naehtav koigil interaktiivsetel elementidel; koigil piltidel on sobiv alt-tekst; koigil vormi juhtelementidel on sildid; lehe keel on maeeratud; pealkirjade hierarhia on koerektne; ARIA on kasutatud oigesti ja ainult vajaduse korral; sisu voolab uember 320px laiusel; ja duenaamilise sisu uuendused teatatakse ekraanilugejatele.
Selles jaotises
Kas sinu veebisait on juurdepaasetav?
Skanni oma veebisaiti tasuta ja saa oma WCAG-skoor monikuminutiga.
Skanni oma saiti tasuta