Zahteve po spletnem oblikovanju vse bolj vključujejo izboljšano spletno dostopnost. Toda ali ni dovolj optimiziranje spletnega mesta za vse večje brskalnike z združljivostjo z več napravami? Z Googlovim svetilnikom lahko preprosto izmerite uspešnost svojega spletnega mesta, dostopnost, najboljše prakse in SEO. Zakaj je torej dostopnost pomembna?

Po podatkih CDC (Centri za nadzor in preprečevanje bolezni) več kot 60 milijonov Američanov živi z invalidnostjo. Po smernicah za dostopnost spletne vsebine lahko predstavite nekaj predhodnih premislekov, ki bodo prispevali k oblikovanju dostopnega spletnega mesta. Tukaj je vse, kar potrebujete, da začnete s spletnimi dostopnostmi z uporabo HTML in CSS.

Strukturiran HTML z ustrezno semantiko

Čeprav je spletno mesto vizualno privlačno, se uporabniki podporne tehnologije ne smejo zmesti. Čeprav številni sistemi za upravljanje vsebine, kot je WordPress, uporabljajo HTML, je vaša odgovornost, da znova preverite in potrdite, da je pravilno uporabljen.

Na primer, a

Preberi več: Preprosti primeri HTML kode, ki se jih lahko naučite v 10 minutah

Semantični HTML je lažje razviti, saj boste skupaj z njim dobili dodatne funkcionalnosti. Na mobilnem telefonu deluje odlično. Ko dajete pomembnost ključnim besedam, zavitim v notranjost

ali tag, pomaga pri SEO.

Strukturirana vsebina za uporabnike bralnikov zaslona

Tukaj je primer pomenskega HTML dobrega vs. slab.

Dober pomenski HTML
Moj naslov

Evo, kako lahko naredite dostopno spletno mesto z uporabo HTML in CSS

Moj drugi naslov

Slab pomenski HTML
Moj naslov

Evo, kako lahko naredite dostopno spletno mesto z uporabo HTML in CSS

Prvi primer je za bralce zaslona precej enostaven za krmarjenje. Prebral bo glavo, ki obvešča o naslovu in odstavku. Po vsakem elementu se bo ustavil za sekundo. Nekatere naslove lahko preskočite ali se vrnete na prejšnje s tipko Enter/Return. Z oznako glave lahko sestavite tudi kazalo.

Ko namesto semantičnega HTML (v drugem primeru) napišete predstavitveni HTML, se vrstica po nepotrebnem zlomi in povzroči slabo izkušnjo. To je kot priprava velikanskega bloka, ki ga je težje kaskadno in manipulirati, saj ni potencialnih izbirnikov.

Jezik in postavitve za dostopno spletno mesto

Uporabiti morate natančen jezik z razširjenimi okrajšavami in okrajšavami. Če je mogoče, se poskusite izogniti pomišljajem tako, da napišete 9-5 -> 9 do 5. Prej so bile za ustvarjanje postavitev strani uporabljene tabele HTML. Včasih je oviral pravilne odčitke zaradi ugnezdenih tabel, ki so tvorile precej zapleteno postavitev. Tu je sodobna struktura spletnega mesta:

To je glava



Vsebina glavne strani

ki vsebuje članek

Naslov članka

vsebina članka



Noga spletnega mesta

Kot vidite, je ta postavitev prijazna bralniku zaslona. Oznaka je razumljiva z jasno in jedrnato kodo. Prav tako je enostaven za vzdrževanje in zahteva manj pasovne širine med prenosom. Prepričajte se, da ste izvorno kodo postavili logično; vse bo naredilo razliko.

Ponovno preučite kontrole uporabniškega vmesnika, tabele in nadomestno besedilo

Najpogosteje so kontrolniki uporabniškega vmesnika gumbi, oblike in povezave vašega spletnega dokumenta. Splošno pravilo je, da z njimi lahko upravljate s tipkovnico. Imajo privzeti slog (lahko se razlikujejo v različnih brskalnikih), kjer lahko s tipko tabulatorja preskočite na druge možnosti in pritisnete Enter/Return, da dosežete zaključek. Besedilne oznake lahko upravljate tako, da namesto »kliknite tukaj« dodate značilna in smiselna sidrna besedila.

Če želite ustvariti dostopne tabele, dodajte glave tabel

in podajte vrstice ali stolpce z atributom obsega. Poleg tega lahko uporabite ali povzetek, ki bralcem zaslona omogoča hiter pregled vsebine tabele.

Alternativno besedilo daje kontekstualne informacije o sliki ali videoposnetku spletnim pajkom in bralnikom zaslona. Če je vaša slika v dekorativne namene, je bolje, da oznako alt pustite prazno. Sicer pa podroben opis slike veliko pomaga.

V večini primerov bralnik zaslona prebere nadomestno besedilo, ime datoteke in naslovni atribut (lahko ga preskočite). Če tudi ne želite uporabljati nadomestnega besedila ali želite dodati isto oznako na več slik, je tu hiter nasvet:

Rdeča roža ...

Za sklicevanje na ta ID ste uporabili atribut aria-labelledby. Bralcem zaslona bo omogočil uporabo nadomestnega besedila v obliki tega odstavka.

Standardni CSS za boljšo dostopnost

Oblikovanje značilnosti strani, ki je dostopna, pomeni, da bi se morala vaša oblika obnašati v skladu z osnovno vsebino strani. Na primer, za a

,

, in

element, tipičen CSS bi moral biti:

h1 {
velikost pisave: 4rem;
}
p, li {
velikost pisave: 1,5rem;
barva: modra;
}

Velikost pisave, razmik med črkami, družina pisav itd. Bi morala pomagati pri udobnem branju. Naslovi naj izstopajo iz besedila (privzeti slog je tudi dober). Poleg tega mora biti besedilo v kontrastni barvi iz ozadje, ki ga izberete s CSS.

Oblikovanje besedila, povezav in nalepk

Mikro interakcije so možne z dostopnim CSS. Lahko je tako majhen, kot je poudarjanje besedila, da na ustrezen način označite povezave. Uporabite lahko in označite izrazito. Črtkano podčrtaje lahko dodate z element.

Standardna povezava mora biti podčrtana s privzeto barvo: modro in predhodno obiskano povezavo s privzeto barvo: vijolično (lahko jo prilagodite).

a {
barva: #ff0000;
}
a: aktivno {
barva: #000000;
barva ozadja: #a60000;
}
a: hover, a: obiskan, a: focus {
barva: #a60000;
okras besedila: brez;
}

Torej, s spremembo kazalca miške, morate poudariti osredotočeno besedilo. Kazalec kazalke in oris imata pomembno vlogo pri dostopnosti do spleta.

Uporabite CSS, da elementom obrazca in oznakam zagotovite čist videz. Odločite se tudi za stanje ostrenja/lebdenja, ki je dosledno v večini brskalnikov. Ne pozabite, da ti majhni znaki ljudem pomagajo razumeti vašo spletno stran.

Barvni kontrast in skrivalne vrednosti

Barvno shemo spletnega mesta prilagodite tako, da bo barva ospredja (besedilo/slika) v nasprotju z barvo ozadja predvsem zato, ker ljudje z motnjami vida (npr. barvna slepota) težje berejo vsebino pravilno. Lahko uporabiš Preverjanje barvnega kontrasta pridobiti spodobno barvno shemo po merilih WCAG. Poskusite dodati tudi označevalne znake (na primer zvezdico) skupaj z opozorili ali določili in pogoji (ne le rdeče opozorilo).

Bralce zaslona ni treba skrbeti, dokler vrstni red izvorne kode ni spodobno napisan. Poskusite se izogniti uporabi display: none ali visibility: skritih lastnosti, saj skrivajo vsebino pred bralniki zaslona.

Olajšajte preglasitev sloga

Ključna točka je, ne glede na to, kako dobro ste oblikovali spletno mesto, imajo uporabniki različne razloge, da preglasijo slog. Na primer, morda nekateri želijo večjo velikost besedila ali želijo spremeniti barvo besedila in ozadja za berljivost. Tako bi moralo biti vaše vsebinsko področje v celoti zmožno.

Zaključek: Združite HTML in CSS

Zdaj poznate osnove začetka uporabe pomenskega HTML -ja in pisanja smiselne izvorne kode v pravem vrstnem redu za dostopno spletno mesto. Osredotočite se na HTML in pojdite k ustvarjanju dostopnega CSS -ja, ko bo to končano.

Z uporabo zgornjih tehnik lahko izboljšate uporabniško izkušnjo in postrežete s čudovitim občinstvom. Zato začnite izdelovati odzivna in dostopna spletna mesta.

Kako narediti spletno mesto: Za začetnike

Danes vas bom vodil skozi postopek izdelave celotnega spletnega mesta iz nič. Ne skrbite, če se to sliši težko. Na vsakem koraku vas bom vodil skozi to.

Preberite Naprej

O avtorju

Razširi, da prebereš celotno zgodbo