Veebidisaini nõudmised hõlmavad üha enam veebi paremat juurdepääsetavust. Kuid kas saidi optimeerimine kõigi peamiste brauserite jaoks, millel on mitme seadme ühilduvus, ei ole piisav? Google Lighthouse'i abil saate hõlpsalt mõõta oma veebisaidi toimivust, juurdepääsetavust, häid tavasid ja SEO -d. Miks on juurdepääsetavus oluline?

CDC (haiguste tõrje ja ennetamise keskuste) andmetel elab üle 60 miljoni ameeriklase puudega. Veebisisu juurdepääsetavuse juhiseid järgides saate tutvustada mõningaid esialgseid kaalutlusi, mis aitavad kaasa juurdepääsetava veebisaidi loomisele. Siin on kõik, mida vajate veebi juurdepääsetavuse alustamiseks HTML -i ja CSS -i abil.

Struktureeritud HTML õige semantikaga

Kuigi veebisait muutub visuaalselt atraktiivseks, ei tohiks abitehnoloogia kasutajad segadusse sattuda. Kuigi paljud sisuhaldussüsteemid nagu WordPress rakendavad HTML -i, on teie kohustus uuesti kontrollida ja kinnitada, et see on õigesti rakendatud.

Näiteks a

Loe rohkem: Lihtsad näited HTML -koodidest, mida saate õppida 10 minutiga

Semantilist HTML -i on lihtsam arendada, kuna saate sellega koos täiendavaid funktsioone. See töötab mobiilil suurepäraselt. Samuti siis, kui tähtsustate sees olevaid märksõnu

või silt, see aitab SEO -s.

Struktureeritud sisu ekraanilugejate kasutajatele

Siin on näide semantilisest HTML -ist hea vs. halb.

Hea semantiline HTML
Minu pealkiri

Siit saate teada, kuidas HTML -i ja CSS -i abil juurdepääsetav veebisait luua

Minu teine ​​rubriik

Halb semantiline HTML
Minu pealkiri

Siit saate teada, kuidas HTML -i ja CSS -i abil juurdepääsetav veebisait luua

Esimesel juhul on ekraanilugejate jaoks üsna lihtne navigeerida. See loeb päist, teatades pealkirjast ja lõigust. See peatub sekundiks pärast iga elementi. Saate mõne pealkirja vahele jätta või eelmise juurde naasta, kasutades klahvi Enter/Return. Sisukorra saate koostada ka päisemärgendi abil.

Kui kirjutate semantilise HTML -i asemel esitlus -HTML -i (teisel juhul), katkeb rida asjatult ja tulemuseks on halb kogemus. See on nagu hiiglasliku ploki ettevalmistamine, mida on palju raskem kaskaadida ja manipuleerida, kuna potentsiaalseid valijaid pole.

Keel ja paigutus juurdepääsetava veebisaidi jaoks

Peaksite kasutama täpset keelt koos laiendatud akronüümide ja lühenditega. Kui võimalik, proovige kriipse vältida, kirjutades 9-5 -> 9 kuni 5. Varem kasutati lehe paigutuste loomiseks HTML -tabeleid. Varem takistas see õigete näitude tegemist pesastatud tabelite tõttu, mis moodustasid üsna keeruka paigutuse. Siin on kaasaegne veebisaidi struktuur:

See on päis



Pealehe sisu

sisaldav artikkel

Artikli pealkiri

artikli sisu



Veebisaidi jalus

Niisiis, nagu näete, on see paigutus ekraanilugejasõbralik. Märgistus on arusaadav selge ja sisutiheda koodiga. Lisaks on seda lihtne hooldada ja see nõuab allalaadimisel vähem ribalaiust. Veenduge, et olete lähtekoodi loogiliselt paigutanud; see muudab kõik.

Vaadake uuesti kasutajaliidese juhtelemendid, tabelid ja alternatiivtekst

Kõige sagedamini on kasutajaliidese juhtelemendid teie veebidokumendi nupud, vormi ja linkide juhtelemendid. Rusikareegel on see, et nendega saab klaviatuuri abil manipuleerida. Neil on teatud vaikestiil (see võib erinevates brauserites erineda), kus saate tabulaatoriklahvi abil teiste valikute juurde liikuda ja järelduse tegemiseks vajutada sisestusklahvi/tagasipöördumist. Saate hallata tekstisilte, lisades „klõpsake siin” asemel eristavaid ja sisukaid ankutekste.

Juurdepääsetavate tabelite loomiseks lisage tabeli päised

ja määrake read või veerud ulatuse atribuudi abil. Lisaks saate kasutada või kokkuvõtte atribuut, et anda ekraanilugejatele tabeli sisust kiire ülevaade.

Alternatiivne tekst annab pildi või video kontekstuaalse teabe veebiränduritele ja ekraanilugejatele. Kui teie pilt on dekoratiivsetel eesmärkidel, on parem jätta alt -silt tühjaks. Vastasel juhul aitab pildi üksikasjalik kirjeldamine palju kaasa.

Enamikul juhtudel loeb ekraanilugeja alt teksti, failinime ja pealkirja atribuudi ette (saate selle vahele jätta). Kui te ei soovi alternatiivteksti kasutada või soovite mitmele pildile sama silti lisada, siis siin on kiire näpunäide.

Punane lill ...

Kasutasite sellele ID-le viitamiseks atribuuti aria-labeledby. See võimaldab ekraanilugejatel kasutada selle lõigu kujul alternatiivset teksti.

Standardne CSS parema juurdepääsetavuse tagamiseks

Juurdepääsetavate lehefunktsioonide stiilimine tähendab, et teie kujundus peaks käituma vastavalt lehe põhisisule. Näiteks a jaoks

,

ja

tüüpiline CSS peaks olema:

h1 {
fondi suurus: 4rem;
}
p, li {
fondi suurus: 1,5rem;
värv: sinine;
}

Fontide suurus, tähtede vahe, fondiperekond jne peaksid aitama mugavaks lugemiseks. Pealkirjad peaksid põhitekstist eristuma (vaikestiil on samuti hea). Lisaks peaks tekstil olema kontrastset värvi tausta, mille valite CSS -iga.

Teksti, linkide ja siltide kujundamine

Mikrointeraktsioonid on võimalikud juurdepääsetava CSS-i abil. See võib olla sama väike kui teksti rõhutamine linkide õigeks esiletõstmiseks. Võite kasutada ja märgistage selgelt. Täpilise joone saab lisada nupu abil element.

Tavaline link tuleks allajoonida vaikivärviga: sinine ja varem külastatud link, mille vaikevärv: lilla (saate seda kohandada).

a {
värv: #ff0000;
}
a: aktiivne {
värv: #000000;
taustavärv: #a60000;
}
a: hover, a: külastatud, a: focus {
värv: #a60000;
teksti kaunistamine: puudub;
}

Niisiis, hiirekursori muutmisega peaksite esile tõstma keskendunud teksti. Kursor ja kontuur mängivad veebi juurdepääsetavuses olulist rolli.

Kasutage CSS -i, et anda vormi elementidele ja siltidele puhas välimus. Samuti otsustage fookuse/hõljutamise olekud, mis on enamikus brauserites järjepidevad. Pidage meeles, et need väikesed näpunäited aitavad inimestel teie veebilehte mõista.

Värvide kontrastsus ja väärtuste peitmine

Reguleerige veebisaidi värviskeemi nii, et esiplaani (teksti/pildi) värv oleks taustavärviga kontrastne eelkõige seetõttu, et nägemispuudega inimestel (nt värvipimedus) on sisu raskem lugeda korralikult. Sa võid kasutada Värvi kontrasti kontrollija et saada korralik värviskeem vastavalt WCAG kriteeriumidele. Samuti proovige lisada märgistusmärke (nt tärn) koos hoiatuste või tingimustega (mitte ainult punase hoiatusega).

Ekraanilugejatel pole millegi pärast muretseda, kuni lähtekoodi järjekord on korralikult kirjutatud. Vältige kuva: puudub või nähtavus: peidetud atribuutide kasutamist, kuna need peidavad sisu ekraanilugejate eest.

Stiili tühistamine on lihtne

Põhipunkt on olenemata sellest, kui hästi sa saidi kujundate, on kasutajatel stiili alistamiseks erinevaid põhjuseid. Näiteks võivad mõned soovida suuremat teksti suurust või muuta teksti ja taustavärvi loetavuse huvides. Nii et teie sisuala peaks sellega täielikult hakkama saama.

Ümbramine: ühendage HTML ja CSS

Nüüd teate semantilise HTML -iga alustamise ja mõistliku lähtekoodi kirjutamise põhitõdesid juurdepääsetava veebisaidi jaoks. Keskenduge HTML -ile ja liikuge juurdepääsetava CSS -i loomise poole, kui see on tehtud.

Ülaltoodud tehnikaid kasutades saate kasutajakogemust täiustada ja kaunist publikut teenindada. Niisiis, alustage tundlike ja juurdepääsetavate veebisaitide loomist.

Veebisaidi loomine: algajatele

Täna juhendan teid täieliku veebisaidi loomise protsessis nullist. Ärge muretsege, kui see tundub raske. Ma juhendan teid selle igal sammul.

Loe edasi

Autori kohta

Laiendage, et lugeda kogu lugu