Verkkosuunnittelun vaatimuksiin kuuluu yhä enemmän parannettu web -saavutettavuus. Mutta eikö sivuston optimointi kaikille tärkeimmille selaimille, joilla on useita laitteita, yhteensopiva? Voit helposti mitata verkkosivustosi suorituskykyä, saavutettavuutta, parhaita käytäntöjä ja hakukoneoptimointia Google Lighthousen avulla. Joten miksi saavutettavuudella on väliä?

CDC: n (Centers for Disease Control and Prevention) mukaan yli 60 miljoonaa amerikkalaista elää vammaisena. Verkkosisällön esteettömyyttä koskevien ohjeiden mukaisesti voit ottaa käyttöön joitakin alustavia näkökohtia, jotka auttavat luomaan helppokäyttöisen verkkosivuston. Tässä on kaikki mitä tarvitset, jotta pääset alkuun Web -helppokäyttöisyyden kanssa HTML- ja CSS -tiedostojen avulla.

Strukturoitu HTML oikealla semantiikalla

Vaikka verkkosivustosta tulee visuaalisesti houkutteleva, aputekniikan käyttäjien ei pidä hämmentyä. Vaikka monet sisällönhallintajärjestelmät, kuten WordPress, käyttävät HTML -koodia, sinun vastuullasi on tarkistaa ja vahvistaa, että sitä käytetään oikein.

Esimerkiksi a

Lue lisää: Yksinkertaisia ​​HTML -koodiesimerkkejä, jotka opit 10 minuutissa

Semanttista HTML -koodia on helpompi kehittää, koska saat sen mukana lisätoimintoja. Toimii loistavasti mobiililaitteella. Lisäksi, kun annat tärkeyden avainsanoille, jotka on kääritty sisään

tai tag, se auttaa SEO: ssa.

Strukturoitu sisältö näytönlukuohjelman käyttäjille

Tässä on esimerkki semanttisesta HTML hyvästä vs. huono.

Hyvä semanttinen HTML
Otsani

Näin voit tehdä esteettömän verkkosivuston HTML- ja CSS -tiedostojen avulla

Toinen otsikko

Huono semanttinen HTML
Otsani

Näin voit tehdä esteettömän verkkosivuston HTML- ja CSS -tiedostojen avulla

Ensimmäinen tapaus on melko helppo navigoida näytönlukuohjelmille. Se lukee otsikon, joka ilmoittaa otsikosta ja kappaleesta. Se pysähtyy hetkeksi jokaisen elementin jälkeen. Voit ohittaa joitakin otsikoita tai palata edelliseen painamalla Enter/Return. Voit myös muodostaa sisällysluettelon käyttämällä otsikkotunnistetta.

Kun kirjoitat esittely -HTML: ää semanttisen HTML: n sijaan (toisessa tapauksessa), rivi katkeaa tarpeettomasti ja johtaa huonoon kokemukseen. Se on kuin valmistaa jättiläinen lohko, jota on vaikeampi kaskadoida ja manipuloida, koska potentiaalisia valitsimia ei ole.

Esteettömän verkkosivuston kieli ja asettelut

Käytä tarkkaa kieltä laajennettujen lyhenteiden ja lyhenteiden kanssa. Jos mahdollista, yritä välttää viivoja kirjoittamalla 9-5 -> 9-5. Aikaisemmin HTML -taulukoita käytettiin sivun asettelujen luomiseen. Se vaikeutti oikeita lukemia sisäkkäisten taulukoiden vuoksi, jotka muodostivat melko monimutkaisen asettelun. Tässä on moderni verkkosivuston rakenne:

Tämä on otsikko



Pääsivun sisältö

sisältävä artikkeli

Artikkelin otsikko

artikkelin sisältö



Verkkosivun alatunniste

Joten, kuten näette, tämä asettelu on näytönlukijaystävällinen. Merkinnät ovat ymmärrettäviä selkeällä ja ytimekkäällä koodilla. Sitä on myös helppo ylläpitää ja se vaatii vähemmän kaistanleveyttä latauksen aikana. Varmista, että olet asettanut lähdekoodin loogisesti; se tekee kaiken eron.

Mieti uudelleen käyttöliittymän ohjaimia, taulukoita ja vaihtoehtoista tekstiä

Yleisimmin käyttöliittymän ohjaimet ovat verkkodokumentin painikkeet, lomake- ja linkkiohjaimet. Nyrkkisääntö on, että niitä voidaan käsitellä näppäimistöllä. Niillä on jokin oletustyyli (voi vaihdella eri selaimissa), jossa voit siirtyä muihin vaihtoehtoihin käyttämällä sarkainnäppäintä ja tehdä johtopäätöksen painamalla Enter/Return. Voit hallita tekstitarroja lisäämällä selkeitä ja mielekkäitä ankkuritekstejä napsauttamalla tätä.

Jos haluat luoda esteettömiä taulukoita, lisää taulukon otsikot

ja määritä rivit tai sarakkeet laajuuden määritteen avulla. Lisäksi voit käyttää tai yhteenvetomäärite, joka antaa näytönlukijoille nopean yleiskatsauksen taulukon sisällöstä.

Vaihtoehtoinen teksti antaa kuvan tai videon asiayhteyteen liittyvät tiedot indeksointiroboteille ja näytönlukijoille. Jos kuvasi on koristetarkoituksiin, on parempi jättää alt -tagi tyhjäksi. Muuten kuvan yksityiskohtainen kuvaus auttaa paljon.

Useimmissa tapauksissa näytönlukuohjelma lukee vaihtoehtoisen tekstin, tiedostonimen ja otsikon määritteen (voit ohittaa sen). Jos et halua käyttää vaihtoehtoista tekstiä tai haluat lisätä saman tunnisteen useisiin kuviin, tässä on nopea vinkki:

Punainen kukka ...

Viittasit tähän tunnukseen aria-labeledby-attribuutilla. Sen avulla näytönlukuohjelmat voivat käyttää vaihtoehtoista tekstiä kyseisen kappaleen muodossa.

Vakio CSS parantaa käytettävyyttä

Esteettömien sivun ominaisuuksien muotoilu tarkoittaa, että suunnittelusi tulee toimia sivun ydinsisällön mukaan. Esimerkiksi a

,

ja

tyypillisen CSS: n pitäisi olla:

h1 {
fontin koko: 4rem;
}
p, li {
fontin koko: 1,5rem;
väri: sininen;
}

Fonttikoon, kirjainvälin, kirjasinperheen jne. Pitäisi auttaa lukemisessa. Otsikoiden pitäisi erottua tekstistä (myös oletustyyli on hyvä). Lisäksi tekstissä on oltava kontrastiväri tausta, jonka valitset CSS: llä.

Tekstin, linkkien ja tarrojen muotoilu

Mikrovuorovaikutukset ovat mahdollisia saavutettavan CSS: n avulla. Se voi olla yhtä pieni kuin tekstin korostaminen linkkien korostamiseksi oikealla tavalla. Voit käyttää ja merkitse selvästi. Voit lisätä katkoviivan alleviivaimella elementti.

Vakiolinkki tulee alleviivata oletusvärillä: sininen ja aiemmin vieraillulla linkillä, jonka oletusväri on violetti (voit muokata sitä).

a {
väri: #ff0000;
}
a: aktiivinen {
väri: #000000;
taustaväri: #a60000;
}
a: hover, a: vieraillut, a: focus {
väri: #a60000;
tekstin koristelu: ei mitään;
}

Joten kun hiiren osoitin muuttuu, sinun tulee korostaa kohdistettu teksti. Osoittimen kohdistimella ja ääriviivoilla on tärkeä rooli verkon saavutettavuudessa.

Käytä CSS: ää muodon ja elementtien selkeän ilmeen näyttämiseen. Päätä myös tarkennus-/hover -tilat, jotka ovat yhdenmukaisia ​​useimmissa selaimissa. Muista, että nämä pienet vihjeet auttavat ihmisiä ymmärtämään verkkosivusi.

Värien kontrasti ja arvojen piilottaminen

Säädä verkkosivuston värimaailma niin, että etualan (teksti/kuva) väri on kontrastissa taustavärin kanssa ensisijaisesti siksi, että näkövammaisten (esim. värisokeus) on vaikeampi lukea sisältöä asianmukaisesti. Voit käyttää Värin kontrastin tarkistus saada kunnollinen värimaailma WCAG -kriteerien mukaisesti. Yritä myös lisätä merkintämerkkejä (kuten tähti) sekä varoituksia tai käyttöehtoja (ei vain punaista hälytystä).

Näytönlukijoilla ei ole mitään hätää, ennen kuin lähdekoodijärjestys on kirjoitettu kunnolla. Yritä välttää näytön: ei mitään tai näkyvyys: piilotettuja ominaisuuksia, koska ne piilottavat sisällön näytönlukijoilta.

Tyyli on helppo ohittaa

Tärkeintä on, kuinka hyvin suunnittelet sivuston, käyttäjillä on erilaisia ​​syitä ohittaa tyyli. Esimerkiksi jotkut haluavat esimerkiksi suuremman tekstikokoa tai haluavat muuttaa tekstin ja taustavärin luettavuuden vuoksi. Joten sisältöalueesi pitäisi pystyä käsittelemään se kokonaan.

Kääriminen: Yhdistä HTML ja CSS

Nyt tiedät perusasiat semanttisen HTML: n käytön aloittamisesta ja järkevän lähdekoodin kirjoittamisesta oikeassa järjestyksessä helppokäyttöiselle verkkosivustolle. Keskity HTML: ään ja siirry kohti helppokäyttöisen CSS: n luomista, kun se on tehty.

Käyttämällä yllä olevia tekniikoita voit parantaa käyttäjäkokemusta ja palvella kaunista yleisöä. Aloita siis reagoivien ja helppokäyttöisten verkkosivustojen luominen.

Verkkosivuston luominen: aloittelijoille

Tänään opastan sinua koko verkkosivuston luomisprosessissa alusta alkaen. Älä huoli, jos tämä kuulostaa vaikealta. Opastan sinua sen läpi joka askeleella.

Lue seuraava

Kirjailijasta

Laajenna ja lue koko tarina