Kravene til webdesign inkluderer i økende grad forbedret nettilgjengelighet. Men er det ikke nok å optimalisere nettstedet for alle de store nettleserne med kompatibilitet med flere enheter? Du kan enkelt måle nettstedets ytelse, tilgjengelighet, beste praksis og SEO ved hjelp av Google Lighthouse. Så hvorfor betyr tilgjengelighet noe?

I følge CDC (Centers for Disease Control and Prevention) lever over 60 millioner amerikanere med funksjonshemming. Etter retningslinjene for tilgjengelighet for webinnhold kan du introdusere noen foreløpige hensyn som vil bidra til å gjøre et tilgjengelig nettsted tilgjengelig. Her er alt du trenger for å komme i gang med nettilgjengelighet ved hjelp av HTML og CSS.

Strukturert HTML med riktig semantikk

Mens nettstedet gjør det visuelt tiltalende, bør ikke hjelpemiddelbrukere bli forvirret. Selv om mange innholdshåndteringssystemer som WordPress bruker HTML, er det ditt ansvar å sjekke og bekrefte at det brukes riktig.

For eksempel, a

Les mer: Enkle HTML -kodeeksempler du kan lære på 10 minutter

Semantisk HTML er lettere å utvikle ettersom du får flere funksjoner sammen med det. Det fungerer fantastisk på mobilen. Også når du legger vekt på søkeord pakket inn

eller tag, det hjelper i SEO.

Strukturert innhold for skjermleserbrukere

Her er et eksempel på semantisk HTML bra vs. dårlig.

God semantisk HTML
Overskriften min

Slik kan du lage et tilgjengelig nettsted ved hjelp av HTML og CSS

Min andre overskrift

Dårlig semantisk HTML
Overskriften min

Slik kan du lage et tilgjengelig nettsted ved hjelp av HTML og CSS

Det første tilfellet er ganske enkelt å navigere for skjermlesere. Den vil lese overskriften som varsler om overskriften og avsnittet. Det stopper et sekund etter hvert element. Du kan hoppe over noen overskrifter eller gå tilbake til forrige ved å bruke Enter/Return. Du kan også danne en innholdsfortegnelse ved å bruke toppteksten.

Når du skriver presentasjons -HTML i stedet for semantisk HTML (i det andre tilfellet), bryter linjen unødvendig og resulterer i en dårlig opplevelse. Det er som å forberede en gigantisk blokk som er vanskeligere å kaskade og manipulere siden det ikke er noen potensielle velgere.

Språk og oppsett for tilgjengelig nettsted

Du bør bruke presist språk med utvidede akronymer og forkortelser. Prøv om mulig å unngå streker ved å skrive 9-5 -> 9 til 5. Tidligere ble HTML -tabeller brukt til å lage sidelayoutene. Det pleide å hemme de riktige avlesningene på grunn av nestede tabeller som dannet et ganske komplekst oppsett. Her er en moderne nettstedstruktur:

Dette er en overskrift



Innhold på hovedsiden

inneholder artikkel

Artikkeloverskrift

artikkelinnhold



Nettsidefot

Så, som du kan se, er dette oppsettet skjermleservennlig. Markeringen er forståelig med en klar og kortfattet kode. Den er også enkel å vedlikeholde og krever mindre båndbredde mens du laster ned. Sørg for at du har plassert kildekoden logisk; det vil gjøre hele forskjellen.

Revurder brukergrensesnittkontroller, tabeller og alternativ tekst

Vanligvis er UI -kontroller knapper, skjemaer og koblinger for webdokumentet. Tommelfingerregelen er at de kan manipuleres med tastaturet. De har en standard stil (kan variere i forskjellige nettlesere) der du kan hoppe til andre alternativer ved hjelp av tabulatortasten og trykke Enter/Return for å komme til en konklusjon. Du kan administrere tekstetikettene ved å legge til særegne og meningsfulle ankertekster i stedet for "klikk her".

Legg til tabelloverskrifter for å lage tilgjengelige tabeller

og spesifiser radene eller kolonnene ved å bruke omfangsattributtet. I tillegg kan du bruke eller oppsummeringsattributt for å gi skjermleserne en rask oversikt over innholdet i tabellen.

Alternativ tekst gir kontekstuell informasjon om bildet eller videoen til webcrawlere og skjermlesere. Hvis bildet ditt er til dekorative formål, er det bedre å la alt -taggen stå tom. Ellers hjelper det å gi en detaljert beskrivelse av bildet mye.

I de fleste tilfeller vil skjermleseren lese ut alt -teksten, filnavnet og tittelattributtet (du kan hoppe over det). Hvis du ikke vil bruke alt -tekst eller vil legge til den samme etiketten på flere bilder, så er her et raskt tips:

En rød blomst ...

Du brukte attributtet aria-labelledby for å referere til den IDen. Det vil tillate skjermleserne å bruke alt -tekst i form av det avsnittet.

Standard CSS for bedre tilgjengelighet

Styling av tilgjengelige sidefunksjoner betyr at designet ditt skal oppføre seg i henhold til kjerneinnholdet på siden. For eksempel for en

,

, og

element, bør en typisk CSS være:

h1 {
skriftstørrelse: 4rem;
}
p, li {
skriftstørrelse: 1.5rem;
farge: blå;
}

Skriftstørrelsen, bokstavavstanden, skriftfamilien, etc., bør hjelpe til med en behagelig lesning. Overskrifter skal skille seg ut fra brødteksten (standard styling er også bra). I tillegg skal teksten ha en kontrastfarge fra bakgrunnen du velger med CSS.

Styling av tekst, lenker og etiketter

Mikrointeraksjoner er mulig med en tilgjengelig CSS. Det kan være så lite som å understreke teksten til å markere koblingene på en ordentlig måte. Du kan bruke og merke tydelig. Du kan legge til en stiplet understrekning ved hjelp av element.

Standardkoblingen bør understrekes med en standardfarge: blå og en tidligere besøkt lenke med en standardfarge: lilla (du kan tilpasse den).

en {
farge: #ff0000;
}
a: aktiv {
farge: #000000;
bakgrunnsfarge: #a60000;
}
a: sveve, a: besøkt, a: fokusere {
farge: #a60000;
tekst-dekorasjon: ingen;
}

Så, med en endring i musepekeren, bør du markere den fokuserte teksten. Markøren og omrisset spiller en viktig rolle i tilgjengeligheten på nettet.

Bruk CSS for å gi et rent utseende til skjemaelementene og etikettene. Bestem også fokus/sveve -tilstander som er konsistente i de fleste nettlesere. Husk at disse små ledetrådene hjelper folk med å forstå nettsiden din.

Fargekontrast og skjulte verdier

Juster nettstedets fargevalg slik at forgrunnsfargen (tekst/bilde) står i kontrast til bakgrunnsfargen først og fremst fordi det er vanskeligere for mennesker med synshemming (f.eks. fargeblindhet) å lese innholdet riktig. Du kan bruke Fargekontrastkontroll å få et anstendig fargevalg i henhold til WCAG -kriteriene. Prøv også å legge til markeringstegn (som en stjerne) sammen med advarsler eller vilkår og betingelser (ikke bare et rødt varsel).

Skjermlesere har ingenting å bekymre seg for før kildekoden er ordentlig skrevet. Prøv å unngå å bruke skjerm: ingen eller synlighet: skjulte egenskaper siden de skjuler innholdet for skjermleserne.

Gjør det enkelt å overstyre stilen

Nøkkelpunktet er uansett hvor godt du designer nettstedet, brukerne har forskjellige grunner til å overstyre stilen. For eksempel vil noen kanskje ha en større tekststørrelse eller ønsker å endre teksten og bakgrunnsfargen for lesbarhet. Så innholdsområdet ditt skal kunne håndtere det helt.

Innpakning: Kombiner HTML og CSS

Nå kjenner du det grunnleggende for å komme i gang med semantisk HTML og skrive en fornuftig kildekode i riktig rekkefølge for et tilgjengelig nettsted. Fokuser på HTML og beveg deg mot å gjøre en tilgjengelig CSS når den er ferdig.

Ved å bruke teknikkene ovenfor kan du forbedre brukeropplevelsen og betjene et vakkert publikum. Så begynn å lage nettsteder som er responsive og tilgjengelige.

Hvordan lage et nettsted: For nybegynnere

I dag veileder jeg deg gjennom prosessen med å lage et komplett nettsted fra bunnen av. Ikke bekymre deg hvis dette høres vanskelig ut. Jeg veileder deg gjennom det hvert trinn på veien.

Les neste

Om forfatteren

Utvid for å lese hele historien