Pieejamība izstrādātājiem: iekļaujoša koda veidošana
Izstrādātāji ir pieejamības arhitekti ieviešanas līmenī. Kamēr dizaineri nosaka vizuālos un mijiedarbības pamatus, galu galā tieši kods nosaka, vai tīmekļa vietne darbojas ar tastatūras navigāciju, pareizi komunicē ar ekrānlasītājiem un uztur pieejamību dažādās pārlūkprogrammās un ierīcēs.
Labā ziņa ir tā, ka lielākā daļa pieejamības labāko prakšu sakrīt ar vispārīgajām labākajām praksēm tīram, semantiskam, standartiem atbilstošam kodam. Pieejama koda rakstīšana nav par sarežģītības pievienošanu — tā ir par koda pareizu rakstīšanu jau no paša sākuma.
Vispirms semantiskais HTML
Visietekmīgākais, ko jūs varat darīt pieejamības labā, ir pareizi izmantot semantiskos HTML elementus. HTML5 nodrošina bagātu elementu vārdnīcu, kas nes iebūvētu nozīmi un pieejamības funkcijas. Elements <button> automātiski ir fokusējams, aktivizējams ar tastatūru un tiek paziņots kā poga ekrānlasītājiem. Elementam <div> ar onclick apdarinātāju nav nevienas no šīm īpašībām bez ievērojama papildu darba.
Izmantojiet <nav> navigācijas reģioniem, <main> galvenajam saturam, <header> un <footer> attiecīgajām sadaļām, <section> un <article> satura apgabaliem, <h1> līdz <h6> virsrakstiem pareizā hierarhiskā secībā, <ul> un <ol> sarakstiem, <table> ar <th> tabulārajiem datiem, <label> ar for atribūtiem formu vadīklām un natīvos <button> un <a> elementus interaktīvajām vadīklām.
Šie elementi veido pieejamības koku, ko palīgtehnoloģijas izmanto, lai prezentētu jūsu saturu lietotājiem. Kad jūs tos izmantojat pareizi, liela daļa pieejamības tiek apstrādāta automātiski.
Virsrakstu struktūra
Virsraksti veido jūsu lapas strukturālo izklāstu. Ekrānlasītāju lietotāji bieži navigē pa virsrakstiem, lai saprastu satura organizāciju un atrastu konkrētas sadaļas. Katrā lapā ir jābūt tieši vienam <h1>, un virsrakstiem jāseko loģiskai hierarhijai, neizlaižot līmeņus — <h3> nedrīkst sekot <h1> bez <h2> starpā.
Nekad neizmantojiet virsrakstu elementus vizuālajai stilizācijai. Ja jums nepieciešams liels treknraksta teksts, kas nav virsraksts, izmantojiet CSS citam elementam. Un otrādi — ja saturs funkcionē kā virsraksts, iezīmējiet to kā tādu neatkarīgi no tā vizuālās prezentācijas.
Tastatūras pieejamība
Visai funkcionalitātei ir jābūt darbināmai tikai ar tastatūras saskarni. Tas nozīmē, ka katram interaktīvajam elementam — saitēm, pogām, formu vadīklām, izvēlnēm, modāļiem, slīdņiem, cilnēm — jābūt sasniedzamam ar Tab taustiņu (vai Shift+Tab atpakaļgaitā), aktivizējamam ar Enter vai Space un, kur piemērots, aizvēramam.
Nekad neveidojiet tastatūras slazdus, kur lietotāji var ieiet elementā ar Tab, bet nevar no tā izkļūt. Modālajiem dialogiem vajadzētu ierobežot fokusu dialoga ietvaros, kamēr tas ir atvērts, un atgriezt fokusu uz aktivizējošo elementu, kad tas tiek aizvērts, bet Escape taustiņam vienmēr vajadzētu aizvērt dialogu.
Nodrošiniet, lai fokusa secība seko loģiskai secībai, kas atbilst vizuālajam izkārtojumam. DOM secībai parasti vajadzētu atbilst vizuālajai prezentācijai. Izvairieties no pozitīvu tabindex vērtību izmantošanas, kas pārraksta dabisko fokusa secību un rada apjukumu. Izmantojiet tabindex="0", lai padarītu neinteraktīvos elementus fokusējamus, kad nepieciešams, un tabindex="-1" elementiem, kam jābūt fokusējamiem tikai programmatiski.
Lapas valoda
Iestatiet katras lapas noklusējuma valodu, izmantojot lang atribūtu elementā <html>. Tas norāda ekrānlasītājiem, kurus izrunas noteikumus izmantot. Ja valoda mainās satura ietvaros — piemēram, franču frāze angļu lapā — atzīmējiet izmaiņas ar lang atribūtu saturošajā elementā.
Formu pieejamība
Formas ir vieta, kur lietotāji sniedz ievadi, un tās ir biežs pieejamības kļūmju avots. Katrai formas vadīklai ir jābūt programmatiski saistītai etiķetei, parasti izmantojot elementu <label> ar for atribūtu, kas atbilst vadīklas id. Grupējiet saistītās vadīklas, izmantojot <fieldset> un <legend>.
Kad tiek konstatētas ievades kļūdas, identificējiet lauku ar kļūdu un aprakstiet kļūdu tekstā. Kur iespējams, sniedziet ieteikumus labojumam. Laukiem, kas pieņem konkrētus formātus, sniedziet skaidras instrukcijas par gaidāmo formātu. Izmantojiet autocomplete atribūtu, lai iespējotu pārlūka automātisko aizpildi parastajiem laukiem, piemēram, vārds, e-pasts, adrese un tālruņa numurs.
Statusa ziņojumi, kas nesaņem fokusu — piemēram, "prece pievienota grozam" vai "atrasti 3 rezultāti" — jāpaziņo ekrānlasītāja lietotājiem caur ARIA tiešraides reģioniem vai statusa lomām.
Alternatīvais teksts
Katram nedekoratīvam attēlam ir nepieciešams jēgpilns alternatīvais teksts, kas apraksta tā saturu vai funkciju. Informatīvajiem attēliem aprakstiet, ko attēls nodod. Funkcionālajiem attēliem (piemēram, logotips, kas saista uz sākumlapu) aprakstiet funkciju. Dekoratīvajiem attēliem, kas nepievieno informāciju, izmantojiet tukšu alt atribūtu (alt=""), lai ekrānlasītāji tos pilnībā izlaistu.
Sarežģītiem attēliem, piemēram, diagrammām, grafikiem vai shēmām, var būt nepieciešami garāki apraksti, ko nodrošina caur parakstu, blakus esošu tekstu vai saistītu detalizētu aprakstu.
WAI-ARIA
Pieejamo bagātināto interneta lietotņu specifikācija nodrošina papildu semantiku situācijām, kad natīvais HTML ir nepietiekams. ARIA ļauj jums komunicēt lomas, stāvokļus un īpašības palīgtehnoloģijām pielāgotām logrīkām un dinamiskiem saturam.
Tomēr ARIA jāizmanto apdomīgi. Pirmais ARIA noteikums ir: ja jūs varat izmantot natīvu HTML elementu, kam ir nepieciešamā semantika un uzvedība, dariet to. ARIA nepievieno funkcionalitāti — tā pievieno tikai semantiku. Elementam <div role="button"> joprojām ir nepieciešams JavaScript tastatūras apstrādei, turpretim natīvais <button> to apstrādā automātiski.
Izmantojiet ARIA orientiera lomas (vai to HTML5 ekvivalentus), lai definētu lapas reģionus. Izmantojiet aria-label un aria-labelledby, lai nodrošinātu pieejamus nosaukumus, kur redzamais teksts ir nepietiekams. Izmantojiet aria-expanded, aria-selected, aria-checked un citus stāvokļa atribūtus, lai komunicētu interaktīvo logrīku pašreizējo stāvokli. Izmantojiet aria-live reģionus, lai paziņotu dinamiskas satura atjaunināšanas.
Adaptīvais dizains un pārplūde
Saturam jābūt prezentējamam bez informācijas zuduma 320 CSS pikseļu platumā, neprasot horizontālu ritināšanu. Tas nodrošina, ka lietotāji, kuri pietuvina līdz 400% standarta darbvirsmas displejā, joprojām var piekļūt visam saturam. Veidojiet savus izkārtojumus tā, lai saturs pārplūstu vienā kolonnā šauros platumos, nevis prasītu ritināšanu divās dimensijās.
Izlaišanas saites
Nodrošiniet mehānismu tastatūras lietotājiem, lai apietu atkārtotus satura blokus, piemēram, navigācijas izvēlnes, un pārietu tieši uz galveno saturu. Visbiežākā ieviešana ir "Pāriet uz galveno saturu" saite, kas ir pirmais fokusējamais elements lapā un kļūst redzama, kad saņem fokusu.
Izstrādātāja testēšanas kontrolsaraksts
Pirms jebkuras funkcijas izvietošanas pārbaudiet: visa funkcionalitāte darbojas tikai ar tastatūru; fokusa secība ir loģiska; fokuss ir redzams uz visiem interaktīvajiem elementiem; visiem attēliem ir atbilstošs alternatīvais teksts; visām formu vadīklām ir etiķetes; lapas valoda ir iestatīta; virsrakstu hierarhija ir pareiza; ARIA tiek izmantots pareizi un tikai tad, kad nepieciešams; saturs pārplūst 320px platumā; un dinamiskas satura atjaunināšanas tiek paziņotas ekrānlasītājiem.
Šajā sadaļā
Vai jūsu tīmekļa vietne ir pieejama?
Skenējiet savu tīmekļa vietni bezmaksas un iegūstiet savu WCAG rezultātu dažu minūšu laikā.
Skenēt savu vietni bezmaksas