Zahtjevi za web dizajnom sve više uključuju poboljšanu web pristupačnost. No, nije li optimiziranje web stranice za sve veće preglednike s kompatibilnošću s više uređaja dovoljno? Pomoću Google Lighthouse -a možete jednostavno mjeriti performanse svoje web stranice, pristupačnost, najbolje prakse i SEO. Pa zašto je pristupačnost važna?

Prema CDC -u (Centri za kontrolu i prevenciju bolesti), više od 60 milijuna Amerikanaca živi s invaliditetom. Slijedeći smjernice za pristupačnost web sadržaja, možete uvesti neka preliminarna razmatranja koja će pridonijeti stvaranju pristupačne web stranice. Evo svega što vam je potrebno za početak korištenja web pristupačnosti pomoću HTML -a i CSS -a.

Strukturirani HTML s odgovarajućom semantikom

Korisnici pomoćne tehnologije ne smiju se zbuniti dok web stranicu čine vizualno privlačnom. Iako mnogi sustavi za upravljanje sadržajem poput WordPressa primjenjuju HTML, vaša je odgovornost ponovno provjeriti i potvrditi da se pravilno primjenjuje.

Na primjer, a

Čitaj više: Jednostavni primjeri HTML koda koje možete naučiti za 10 minuta

Semantički HTML je lakše razvijati jer ćete uz njega dobiti i dodatne funkcionalnosti. Odlično radi na mobitelu. Također, kada pridajete važnost ključnim riječima unutar njih

ili tag, pomaže u SEO -u.

Strukturirani sadržaj za korisnike čitača zaslona

Evo primjera semantičkog HTML dobra vs. loše.

Dobar semantički HTML
Moj smjer

Evo kako možete napraviti pristupačnu web stranicu pomoću HTML -a i CSS -a

Moj drugi naslov

Loš semantički HTML
Moj smjer

Evo kako možete napraviti pristupačnu web stranicu pomoću HTML -a i CSS -a

Prvi slučaj je prilično jednostavan za navigaciju čitačima zaslona. Čitat će zaglavlje koje obavještava o naslovu i odlomku. Zaustavit će se na sekundu nakon svakog elementa. Možete preskočiti neke naslove ili se vratiti na prethodni pomoću Enter/Return. Također možete formirati sadržaj pomoću oznake zaglavlja.

Kada pišete prezentacijski HTML umjesto semantičkog HTML -a (u drugom slučaju), redak se nepotrebno prekida i rezultira lošim iskustvom. To je poput pripreme divovskog bloka koji je teže kaskadirati i manipulirati jer nema potencijalnih selektora.

Jezik i izgled pristupačne web stranice

Trebali biste koristiti precizan jezik s proširenim akronimima i kraticama. Ako je moguće, pokušajte izbjeći crtice upisivanjem 9-5 -> 9 do 5. Ranije su HTML tablice korištene za izradu izgleda stranice. Ranije je ometao ispravno očitavanje zbog ugniježđenih tablica koje su činile prilično složen izgled. Evo moderne strukture web stranice:

Ovo je zaglavlje



Sadržaj glavne stranice

koji sadrži članak

Naslov članka

sadržaj članka



Podnožje web stranice

Dakle, kao što vidite, ovaj raspored prilagođen je čitaču zaslona. Oznake su razumljive s jasnim i sažetim kodom. Također, lako se održava i zahtijeva manju propusnost tijekom preuzimanja. Provjerite jeste li izvorno postavili logički kod; učinit će svu razliku.

Preispitajte kontrole korisničkog sučelja, tablice i zamjenski tekst

UI kontrole su najčešće gumbi, kontrole oblika i veze vašeg web dokumenta. Zlatno pravilo je da se njima može upravljati tipkovnicom. Oni imaju zadani stil (mogu se razlikovati u različitim preglednicima) gdje možete prijeći na druge opcije pomoću tipke tabulatora i pritisnuti Enter/Return da biste došli do zaključka. Tekstnim oznakama možete upravljati dodavanjem osebujnih i smislenih sidrenih tekstova umjesto "kliknite ovdje".

Da biste stvorili pristupačne tablice, dodajte zaglavlja tablica

te odredite retke ili stupce pomoću atributa opsega. Osim toga, možete koristiti i ili atribut sažetak kako bi čitačima zaslona dao brz pregled sadržaja tablice.

Alternativni tekst daje kontekstualne informacije o slici ili videozapisu alatima za indeksiranje weba i čitačima zaslona. Ako je vaša slika u dekorativne svrhe, bolje je ostaviti alt oznaku praznom. Inače, davanje detaljnog opisa slike puno pomaže.

U većini slučajeva čitač zaslona će pročitati zamjenski tekst, naziv datoteke i naslovni atribut (možete ga preskočiti). Također, ako ne želite koristiti zamjenski tekst ili želite dodati istu oznaku na više slika, evo kratkog savjeta:

Crveni cvijet ...

Za pozivanje na taj ID upotrijebili ste atribut aria-labelledby. Omogućit će čitačima zaslona korištenje zamjenskog teksta u obliku tog odlomka.

Standardni CSS za bolju pristupačnost

Stiliziranje značajki pristupačne stranice znači da bi se vaš dizajn trebao ponašati u skladu s osnovnim sadržajem stranice. Na primjer, za a

,

, i

element, tipični CSS trebao bi biti:

h1 {
veličina fonta: 4rem;
}
p, li {
veličina fonta: 1,5rem;
boja: plava;
}

Veličina fonta, razmak između slova, obitelj fontova itd. Trebali bi pomoći u ugodnom čitanju. Naslovi bi se trebali razlikovati od tijela (zadani stil je također dobar). Osim toga, tekst bi trebao imati kontrastnu boju iz pozadinu koju odaberete pomoću CSS -a.

Stiliziranje teksta, veza i naljepnica

Mikro interakcije su moguće s pristupačnim CSS-om. Može biti toliko malo kao isticanje teksta do isticanja veza na pravilan način. Možete koristiti i označiti izrazito. Podvučeno točkom možete dodati pomoću element.

Standardna veza trebala bi biti podcrtana zadanom bojom: plavom, a prethodno posjećena veza zadanom bojom: ljubičasta (možete je prilagoditi).

a {
boja: #ff0000;
}
a: aktivno {
boja: #000000;
boja pozadine: #a60000;
}
a: hover, a: posjećen, a: fokus {
boja: #a60000;
ukras teksta: nema;
}

Dakle, s promjenom pokazivača miša, trebali biste istaknuti fokusirani tekst. Pokazivač pokazivača i obris imaju važnu ulogu u pristupačnosti webu.

Pomoću CSS -a dajte čist izgled elementima obrasca i oznakama. Također, odlučite o fokusima/lebdenjima koji su dosljedni u većini preglednika. Upamtite da ti mali znakovi pomažu ljudima razumjeti vašu web stranicu.

Kontrast boja i vrijednosti skrivanja

Prilagodite shemu boja web stranice tako da boja prednjeg plana (tekst/slika) bude u kontrastu s bojom pozadine prvenstveno zato što je osobama s oštećenjem vida (npr. sljepoćom za boje) teže čitati sadržaj pravilno. Možeš koristiti Kontrola kontrasta boja dobiti pristojnu shemu boja prema kriterijima WCAG -a. Također pokušajte dodati znakove označavanja (poput zvjezdice) zajedno s upozorenjima ili odredbama i uvjetima (ne samo crveno upozorenje).

Čitači zaslona nemaju razloga za brigu sve dok redoslijed izvornog koda nije pristojno napisan. Pokušajte izbjeći korištenje display: none ili visibility: hidden svojstva jer skrivaju sadržaj od čitača zaslona.

Olakšajte prevladavanje stila

Ključna stvar je, bez obzira na to koliko dobro dizajnirali web lokaciju, korisnici imaju različite razloge da nadjačaju stil. Na primjer, možda neki žele veću veličinu teksta ili žele promijeniti boju teksta i pozadinu radi čitljivosti. Dakle, vaše područje sadržaja trebalo bi ga moći u potpunosti obraditi.

Zaključak: Kombinirajte HTML i CSS

Sada znate osnove početka sa semantičkim HTML -om i pisanja razumnog izvornog koda pravim redoslijedom za pristupačnu web stranicu. Usredotočite se na HTML i krenite prema stvaranju pristupačnog CSS -a nakon što to učinite.

Pomoću gore navedenih tehnika možete poboljšati korisničko iskustvo i poslužiti prekrasnoj publici. Dakle, počnite stvarati web stranice koje odgovaraju i pristupačne su.

Kako napraviti web stranicu: Za početnike

Danas ću vas voditi kroz proces izrade cjelovite web stranice od nule. Ne brinite ako ovo zvuči teško. Vodit ću vas kroz to na svakom koraku.

Pročitajte Dalje

O autoru

Proširi za čitanje cijele priče