Hva er Aria-attributter i HTML og hvorfor er de viktige?

Webdesignere som er nye til HTML kan komme over et sett med ukjente attributter. Prefiks med ordet ARIA, vises disse attributtene over hele nettet, men formålet deres kan være et mysterium for nye brukere.

ARIA-attributter tjener en viktig hensikt i nettstedenes tilgjengelighet. De beskriver både innholdet i et gitt element og måten et element forholder seg til en side eller de andre elementene rundt.

Å legge til disse viktige attributtene på nettstedet ditt vil bidra til å sikre at alle besøkende får den samme opplevelsen, uavhengig av teknologien de bruker.

Hva er ARIA-attributter?

ARIA er et akronym for Accessible Rich Internet Applications. I moderne HTML, spesielt JavaScript-rike applikasjoner, er det ikke alltid umiddelbart åpenbart basert på syntaks hvilken rolle individuelle elementer tjener.

Vanskeligheten med å finne roller kan være et problem når brukere ser på nettstedet ved hjelp av tilgjengelighetsverktøy som skjermlesere. Hvis du mangler riktig semantisk HTML, kan det hende at sluttbrukeren ikke kan navigere på et nettsted når du bruker tilgjengelighetsverktøy.

Mens den foretrukne måten for deg å løse dette problemet på er å bruk de riktige semantiske elementene i HTML5, dette er ikke alltid praktisk eller mulig. Det er her ARIA-attributter på HTML-elementer trer inn. Disse attributtene hjelper til med å definere rollen og attributtene til elementet ditt på en måte som tilgjengelighetsverktøy er i stand til å behandle.

Hvorfor er ARIA-attributter viktige?

Kort sagt, ARIA-attributter gjør det mulig for brukere med funksjonshemminger å bruke nettstedet ditt. Disse rollene og attributtene definerer ekstra informasjon om ulike elementer på nettstedet ditt som ellers kanskje ikke er lett tilgjengelig.

Det er et bredt utvalg av ARIA-attributter du kan tilordne. Du bør bruke dem hvor som helst som trenger ekstra kontekst for å la dokumentet gi mening på en ikke-visuell måte.

Tenk for eksempel på et nettsted som har en hovednavigasjon som består av en element pakket inn i en element, i stedet for et element:

<divklasse="nav">
<ul>
<li>Hjemli>
<li>Butikkli>
<li>Omli>
ul>
div>

Du kan bruke ARIA-attributter for å hjelpe brukere med å navigere. Legge til rolle- og aria-etikettattributtene til element lar skjermleser og hjelpeteknologier vite hvor menyen din er.

<divklasse="nav">
<ulrolle="navigasjon"aria-etikett="Hoved">
<li>Hjemli>
<li>Butikkli>
<li>Omli>
ul>
div>

Selv om du i de fleste tilfeller bør bruke de riktige elementene, er dette kanskje ikke alltid mulig innenfor begrensningene til det du gjør. Hvis for eksempel nettstedet ditt krever bruk av en fremdriftslinje, men du vil ha et design som standardlinjen ikke tillater.

I dette scenariet kan du lage et tilpasset sett med elementer for å vise fremdriftslinjen. For en skjermleser vil imidlertid disse elementene se ut som et rotete rot; den vil ikke kunne levere nyttig informasjon til nettstedets besøkende.

Ved å sette innpakningens rolle til fremdriftslinje, og legger til aria-verdi, aria-valuemin, og aria-verdimaks attributter til omslaget, kan du fortsatt indikere fremgang.

I moderne tid er det viktigere enn noen gang å bygge tilgjengelige nettsteder. Det er flere React-komponentbiblioteker bygget med tanke på tilgjengelighet.

Ikke bare kan det å ha et tilgjengelig nettsted hjelpe med søkerangeringen for flere store søkemotorer, det sikrer at du ikke avskjærer en potensiell gruppe brukere fra brukerbasen din.

Å legge til de riktige ARIA-attributtene på nettstedet ditt vil bidra til å sikre at du presenterer informasjonen for alle brukere. Sluttresultatet blir en side som ønsker alle publikummere velkommen og presenterer så nær den samme opplevelsen som mulig for alle.

Hvilke ARIA-attributter bør jeg bruke?

Det er mange forskjellige attributter du bør bruke på nettstedet ditt. Generelt faller disse attributtene inn i to forskjellige kategorier. Den første er widget-attributter som vanligvis beskriver et tilpasset interaktivt element.

Den andre kategorien du må være klar over er relasjonsattributter. Dette er attributter som videresender informasjon til hjelpeteknologier om hvordan et bestemt element forholder seg til resten av nettstedet eller andre elementer.

Når det gjelder å vurdere hvilke ARIA-attributter du bør inkludere, er det enkle svaret så mange som mulig. Hvor som helst hvor elementet du bruker ikke beskriver rollen som elementet oppfyller, bør du bruke rolleattributtet.

Hvis du har et felt med en etikett, bør det feltet ha aria-merket av Egenskap. Så lenge attributtene du bruker gir mening, gjør du bare nettstedet ditt mer tilgjengelig ved å legge dem til.

Widget-attributter er den mye større kategorien. Den inneholder de fleste ARIA-attributtene som du må legge til på et standardnettsted. I det tidligere eksemplet av den tilpassede fremdriftslinjen er aria-valuenow, aria-valuemin og aria-valuemax alle widgetattributter. De beskriver tilstanden eller mulige tilstander til elementet de er på.

Det er mange forskjellige attributter som du kan bruke for å beskrive tilstanden til et element. En av de vanligste er aria-etikett. Dette attributtet bruker en etikett på elementet du plasserer det på som bare er synlig for hjelpeteknologier.

Et annet vanlig par ARIA-attributter som faller inn i denne kategorien er aria-gjemt og aria-funksjonshemmet. Disse kan kommunisere gjeldende tilstand til et element og om en skjermleser skal lese det til brukeren. Dette er nyttig for en rekke forskjellige enheter med egne skjermlesere.

Relasjonsattributter

I motsetning til widget-attributter, gir relasjonsattributter hjelpeteknologier indikasjoner om relasjonen og bruken av et element til andre elementer rundt det. Den vanligste av disse er rolleattributtet. Rolle spesifiserer hvilket formål et element tjener på et nettsted.

Hvis du stiller inn rolle tilskrive navigasjon, vil den umiddelbart identifiseres som en navigasjonsomslag.

Noen relasjonsattributter definerer hvordan et element forholder seg til andre elementer rundt det. De aria-merket av attributt, for eksempel, viser hvilket element som fungerer som en etikett for dette elementet. Dette kan være nyttig når du bruker oppsett som gir mening visuelt, men som har etiketter for spesifikke skjemakontroller etter seg i dokumentflyten.

Selv om det er færre relasjonsattributter enn widgetattributter, har disse attributtene ofte større betydning. De kan ofte beskrive flyten og kontrollen av et dokument, og gi ytterligere detaljer om måten en bruker kan navigere på nettstedet ditt.

Disse attributtene er spesielt viktige når du utformer skjemaer og navigasjonselementer på nettstedet ditt.

Hvorfor det er så viktig å inkludere ARIA-attributter i HTML-en din

ARIA-attributter tjener et enkelt og nødvendig formål på nettstedet ditt. De tjener til å sikre at nettstedet er tilgjengelig for alle brukere, uavhengig av bruk av tilgjengelighetsprogramvare. For brukere med funksjonshemminger kan det å ha disse attributtene på nettstedet ditt gjøre nettstedet brukbart.

Den foretrukne metoden for å arbeide med hjelpemidler er å bruke de riktige semantiske elementene. Når det imidlertid ikke er mulig å gjøre det, gjør ARIA-attributter det mulig å jobbe fritt uten at brukerne dine taper på innhold.