Prieinamumas kūrėjams: įtraukiančio kodo kūrimas
Kūrėjai yra prieinamumo architektai įgyvendinimo lygmenyje. Nors dizaineriai nustato vizualinius ir sąveikos pagrindus, būtent kodas galiausiai lemia, ar svetainė veikia su klaviatūros navigacija, tinkamai komunikuoja su ekrano skaitytuvais ir išlaiko prieinamumą skirtingose naršyklėse ir įrenginiuose.
Gera žinia ta, kad dauguma prieinamumo geriausių praktikų sutampa su bendromis švaraus, semantinio, standartus atitinkančio kodo praktikomis. Prieinamo kodo rašymas nėra sudėtingumo pridėjimas — tai teisingo kodo rašymas iš pat pradžių.
Pirmiausia semantinis HTML
Vienas veiksmingiausių dalykų, kuriuos galite padaryti prieinamumui, yra teisingai naudoti semantinius HTML elementus. HTML5 suteikia turtingą elementų žodyną, turintį savyje slypinčią reikšmę ir prieinamumo funkcijas. <button> elementas automatiškai fokusuojamas, aktyvuojamas klaviatūra ir skelbiamas kaip mygtukas ekrano skaitytuvams. <div> su onclick apdorotoju neturi nė vienos iš šių funkcijų be reikšmingo papildomo darbo.
Naudokite <nav> navigacijos sritims, <main> pagrindiniam turiniui, <header> ir <footer> atitinkamoms sekcijoms, <section> ir <article> turinio sritims, <h1> iki <h6> antraštėms teisinga hierarchine tvarka, <ul> ir <ol> sąrašams, <table> su <th> lenteliniams duomenims, <label> su for atributais formos valdikliams ir natūralius <button> bei <a> elementus interaktyviems valdikliams.
Šie elementai sukuria prieinamumo medį, kurį pagalbinės technologijos naudoja jūsų turiniui pateikti naudotojams. Kai juos naudojate teisingai, didelė dalis prieinamumo yra tvarkoma automatiškai.
Antraščių struktūra
Antraštės sukuria jūsų puslapio struktūrinį planą. Ekrano skaitytuvo naudotojai dažnai naršo pagal antraštes, kad suprastų turinio organizavimą ir rastų konkrečias sekcijas. Kiekvienas puslapis turėtų turėti tiksliai vieną <h1>, ir antraštės turėtų sekti logine hierarchija nepraleidžiant lygių — <h3> neturėtų sekti po <h1> be tarpinio <h2>.
Niekada nenaudokite antraščių elementų vizualiniam stiliavimui. Jei jums reikia didelio pusjuodžio teksto, kuris nėra antraštė, naudokite CSS kitam elementui. Ir atvirkščiai, jei turinys funkcionuoja kaip antraštė, pažymėkite jį kaip tokią, nepriklausomai nuo vizualinio pateikimo.
Klaviatūros prieinamumas
Visas funkcionalumas turi būti valdomas tik per klaviatūros sąsają. Tai reiškia, kad kiekvienas interaktyvus elementas — nuorodos, mygtukai, formos valdikliai, meniu, modaliniai langai, slankikliai, skirtukai — turi būti pasiekiamas Tab klavišu (arba Shift+Tab atgalinei krypčiai), aktyvuojamas Enter arba Space, ir, kur tinka, uždaromas.
Niekada nekurkite klaviatūros spąstų, kur naudotojai gali patekti į elementą Tab klavišu, bet negali iš jo išeiti. Modaliniai dialogai turėtų sulaikyti fokusą dialogo viduje, kol jis atidarytas, ir grąžinti fokusą į paleidusį elementą, kai uždaromi, bet Escape paspaudimas visada turėtų uždaryti dialogą.
Užtikrinkite, kad fokuso tvarka sektų logine seka, atitinkančia vizualinį išdėstymą. DOM tvarka paprastai turėtų atitikti vizualinį pateikimą. Venkite teigiamų tabindex reikšmių, kurios perrašo natūralią fokuso tvarką ir sukuria painiavą. Naudokite tabindex="0", kad neinteraktyvūs elementai būtų fokusuojami, kai reikia, ir tabindex="-1" elementams, kurie turėtų būti fokusuojami tik programiškai.
Puslapio kalba
Nustatykite numatytąją kiekvieno puslapio kalbą naudodami lang atributą <html> elemente. Tai nurodo ekrano skaitytuvams, kokias tarimo taisykles naudoti. Jei kalba keičiasi turinio viduje — pavyzdžiui, prancūziška frazė angliškame puslapyje — pažymėkite pakeitimą lang atributu apimančiame elemente.
Formų prieinamumas
Formos yra ten, kur naudotojai pateikia duomenis, ir jos dažnai yra prieinamumo problemų šaltinis. Kiekvienas formos valdiklis turi turėti programiškai susietą etiketę, paprastai naudojant <label> elementą su for atributu, atitinkančiu valdiklio id. Grupuokite susijusius valdiklius naudodami <fieldset> ir <legend>.
Kai aptinkamos įvesties klaidos, identifikuokite klaidingą lauką ir aprašykite klaidą tekstu. Pateikite pataisymo pasiūlymus, kur įmanoma. Laukams, priimnantiems konkrečius formatus, pateikite aiškias instrukcijas apie numatomą formatą. Naudokite autocomplete atributą, kad naršyklė galėtų automatiškai užpildyti įprastus laukus, tokius kaip vardas, el. paštas, adresas ir telefono numeris.
Būsenos pranešimai, kurie negauna fokuso — tokie kaip „prekė pridėta prie krepšelio" ar „rasti 3 rezultatai" — turi būti pranešami ekrano skaitytuvo naudotojams per ARIA tiesioginių sričių ar būsenos vaidmenis.
Alternatyvus tekstas
Kiekvienas ne dekoratyvinis vaizdas turi turėti prasmingą alternatyvų tekstą, aprašantį jo turinį ar funkciją. Informatyviems vaizdams aprašykite, ką vaizdas perteikia. Funkciniams vaizdams (pvz., logotipas, nukreipiantis į pagrindinį puslapį) aprašykite funkciją. Dekoratyviniams vaizdams, kurie neprideda informacijos, naudokite tuščią alt atributą (alt=""), kad ekrano skaitytuvai juos visiškai praleistų.
Sudėtingiems vaizdams, tokiems kaip diagramos, grafikai ar schemos, gali prireikti ilgesnių aprašymų, pateikiamų per antraštę, gretimą tekstą ar nuorodą į detalų aprašymą.
WAI-ARIA
Accessible Rich Internet Applications specifikacija suteikia papildomą semantiką situacijoms, kai natūralaus HTML nepakanka. ARIA leidžia perduoti vaidmenis, būsenas ir savybes pagalbinėms technologijoms pasirinktiniams valdikliams ir dinaminiam turiniui.
Tačiau ARIA turėtų būti naudojama atsargiai. Pirmoji ARIA taisyklė yra: jei galite naudoti natūralų HTML elementą, turintį jums reikalingą semantiką ir elgseną, naudokite jį. ARIA neprideda funkcionalumo — ji tik prideda semantiką. <div role="button"> vis tiek reikia JavaScript klaviatūros valdymui, tuo tarpu natūralus <button> tai tvarko automatiškai.
Naudokite ARIA orientyrų vaidmenis (arba jų HTML5 atitikmenis) puslapio sritims apibrėžti. Naudokite aria-label ir aria-labelledby prieinamiems pavadinimams pateikti, kur matomo teksto nepakanka. Naudokite aria-expanded, aria-selected, aria-checked ir kitus būsenos atributus dabartinei interaktyvių valdiklių būsenai perduoti. Naudokite aria-live sritis dinaminio turinio atnaujinimams pranešti.
Prisitaikantis dizainas ir persitvarkymas
Turinys turi būti pateikiamas be informacijos praradimo 320 CSS pikselių pločiu be horizontalaus slinkimo. Tai užtikrina, kad naudotojai, padidinantys iki 400 % standartiniame staliniame ekrane, vis tiek galėtų pasiekti visą turinį. Projektuokite maketus taip, kad turinys persiformuotų į vieną stulpelį siauresniuose plotuose, o ne reikalautų slinkimo dviem kryptimis.
Praleisti nuorodos
Pateikite mechanizmą klaviatūros naudotojams apeiti pasikartojančius turinio blokus, tokius kaip navigacijos meniu, ir peršokti tiesiai prie pagrindinio turinio. Dažniausias įgyvendinimas yra „Praleisti prie pagrindinio turinio" nuoroda, kuri yra pirmasis fokusuojamas elementas puslapyje ir tampa matoma, kai gauna fokusą.
Kūrėjo testavimo kontrolinis sąrašas
Prieš diegiant bet kokią funkciją, patikrinkite: visas funkcionalumas veikia tik su klaviatūra; fokuso tvarka yra logiška; fokusas matomas ant visų interaktyvių elementų; visi vaizdai turi tinkamą alt tekstą; visi formos valdikliai turi etiketes; puslapio kalba nustatyta; antraščių hierarchija teisinga; ARIA naudojama teisingai ir tik kai būtina; turinys persiformuoja 320px pločiui; ir dinaminio turinio atnaujinimai pranešami ekrano skaitytuvams.
Šiame skyriuje
Ar jūsų svetainė prieinama?
Nemokamai nuskenuokite savo svetainę ir gaukite savo WCAG balą per kelias minutes.
Nuskenuokite savo svetainę nemokamai