Nettsider skal være tilgjengelige for alle. Her er det du trenger å vite.

Å lage en nettside er ikke bare å lage en nettside. Et viktig aspekt ved frontend-utvikling er å sikre at brukergrensesnitt er tilgjengelige for alle på internett, inkludert personer med syns- og hørselshemninger. Du må skrive koden din med disse menneskene i tankene. Hvordan gir du visuelt utfordrede personer lik tilgang til nettstedet ditt som ikke-visuelt utfordret? Les denne artikkelen for å finne ut.

Hvorfor bør utviklere være bekymret for netttilgjengelighet?

Netttilgjengelighet dreier seg om ideen om at alle skal ha lik tilgang til nettet, uavhengig av funksjonshemming eller funksjonshemming. Å ha en tilgjengelig nettside gjør det lettere å nå et større publikum (omtrent 16 % av verden lider av den ene eller den andre funksjonshemmingen).

Digital tilgjengelighet bør ikke være et alternativ for utviklere. Det er en nødvendighet for ethvert profesjonelt merke. Dette tas på alvor: som rapportert av Variasjon, saksøkte noen The Pokémon Company i 2019 på grunn av et ikke-tilgjengelig nettsted.

instagram viewer

Netttilgjengelighet med HTML

I HTML er det regler for å sikre utvikling av tilgjengelige nettsider. Denne delen vil forklare noen av disse reglene.

Bruk semantiske elementer

Semantiske elementer i HTML er elementer som har betydning. I HTML5 er det rundt 100 elementer. Noen elementer, som f.eks og, er ikke-semantiske, mens andre HTML-koder er semantiske. Selv om det kan være umulig å slutte å bruke disse ikke-semantiske elementene, er det viktig å inkorporere så mange semantiske elementer du kan i arbeidet ditt. Her er en liste over populære semantiske elementer:

Tenk på dette eksemplet fra Taaskly:

Et blikk på bildet ovenfor vil avsløre følgende elementer:

  • En overskrift
  • Et bilde
  • En paragraf
  • Tre knapper

Det er lett å anta at utviklerne brukte tagger for å ordne elementene på skjermen. Med en nærmere titt på kodene vil du se at de brukte seks semantiske tagger i stedet. Den forenklede koden ser slik ut:

<seksjon>
<imgsrc="/hero.png"alt="helt">
<artikkel>
<h1>Finn de riktige produktene og tjenestene til rett tid.h1>
<s>
 Håndlaget fottøy, håroppussing, sjef for sosiale medier, sending av ærend, inntektskildeb>— you name it, Taaskly fikk det. Finn alle produkter eller tjenester du trenger i dag når du registrerer deg og bruker Taaskly. 
s>
<enhref="/main/home">Outsource en oppgaveen>
<enhref="/main/tjenester"> Finn en tjenesteen>
<enhref="/main/marketplace" >Finn en butikken>
artikkel>
seksjon>

Fra HTML-kodebiten kan du se følgende:

  1. Bildene, teksten og knappene er inne i en element.
  2. De element deler likt og elementer.
  3. De elementet holder, , og elementer.
  4. Knappene er kodet som elementer; derfor er de lenker, ikke knapper. Som en generell regel, bruk alltid lenker for å lede brukeren til en annen side eller visning, og bruk knapper når du bare vil at brukeren skal utføre en handling i samme visning. Se Angulars knappside for mer info om dette.

Bruk landemerker for å gi en tydelig sidestruktur

Landemerker er semantiske koder som hjelper blinde brukere å navigere på en nettside med skjermlesere. Med landemerker er det enkelt å definere ulike deler av en nettside. Apples nettsted bruker landemerker.

Bildet ovenfor viser fire forskjellige landemerker. Du kan bruke Tilgjengelighetsinnsikt utvidelse for å visualisere disse landemerkene.

På bildet kan vi utlede en på toppen, a som inneholder en, og en element. Merkbart viser bildet "navigasjon", "region", og "innholdsinfo". Disse er kjent som rollene, som vi skal se på senere.

Når du må bruke flere landemerker for en side, må du alltid skille dem med en etikett. For eksempel hvis du bruker flere elementer som Apple har, må du merke dem. Du bør merke dem med aria-etikett Egenskap. Så du kan skrive noe som en av disse:

<navaria-etikett = "global">
<navaria-etikett = "lokal navigasjon">
<navaria-etikett = "eplekatalog">

Bruk av etiketter kan hjelpe skjermlesere med å hoppe til en hvilken som helst navigering.

Bruk rolle-, navn- og verdiattributter

Noen ganger kan det være umulig å bruke HTML-elementer med innebygde tilgjengelighetsfunksjoner. Slike tilfeller kan være ett av disse to:

  1. Det er ikke noe naturlig HTML-element for det du ønsker å oppnå. For eksempel, hvis du må bruke en fordi ingen andre elementer ser ut til å passe rollen.
  2. Du kan ikke bruke semantiske elementer på grunn av tekniske problemer. Hvis du bruker et rammeverk som bruker når det hadde vært bedre å bruke, vil det være din plikt å definere en egendefinert kontroll.

For å definere en egendefinert kontroll trenger du en rolle, et navn og en verdi (noen ganger) for elementet ditt.

Rolle

Som standard, a element har navigasjonsrollen, mens en element har bannerrollen. Du bør bare bruke disse elementene til deres tiltenkte formål for å hjelpe hjelpeteknologier med å forstå strukturen til en nettside. Hvis du må bruke den ene i stedet for den andre, bør du spesifisere rollen slik:

<Overskriftrolle = "navigasjon">
<navrolle = "banner">
<divrolle = "navigasjon">

Navn

Et navn er en beskrivende tekst eller etikett knyttet til et HTML-element. Den enkleste formen for et navn er teksten til et element. Her er et eksempel:

<divrolle = "knapp">Klikk på meg!div>

I utdraget ovenfor, "Klikk på meg!" er navnet på element. Det er også kjent som det tilgjengelige navnet.

For elementer som navigasjon, rullegardinmenyene osv. er det mer komplekst å tildele et navn enn i forrige eksempel. Det er annerledes fordi disse elementene har underordnede elementer i seg. For å tildele et navn for navigasjonen ovenfor, bruk aria-etikett Egenskap. Se på dette eksemplet:

<navrolle = "navigasjon"aria-etikett = "global-navigasjon">...nav>

Du bør merke deg at a Navn attributtet er forskjellig fra et tilgjengelig navn. Denne kodebiten gir en bedre forståelse:

 navn attributt 
<navrolle = "navigasjon"Navn = "global-navigasjon">...nav>
 tilgjengelig navn 
<navrolle = "navigasjon"aria-etikett = "global-navigasjon">...nav>

Se TGPis artikkel om tilgjengelige navn for å få en dypere forståelse av dette.

Verdi

I HTML kan verdiattributtet gi tilleggsinformasjon om et element. Verdier gir informasjon om komponentens tilstand for tilpassede komponenter som trekkspill. For eksempel kan et trekkspill enten åpnes eller lukkes.

Du kan legge til verdi til elementene dine på flere måter. Dette utdraget viser noen av måtene du kan gjøre det på:

 aria-verdi 
verdi
<inputtype="avmerkingsboks"Navn="produkt[]"verdi="1">

Prioritering av netttilgjengelighet for en inkluderende nettopplevelse

Netttilgjengelighet overgår det å følge regler; det handler også om å sikre at alle har lik tilgang til nettstedet ditt. Å inkludere semantiske elementer, landemerker og attributter som rolle, navn og verdi i HTML-en din kan gjøre nettstedet ditt mer tilgjengelig for funksjonshemmede. Ikke tenk på netttilgjengelighet som et alternativ; anser det som en nødvendighet.