Uansett valg deler vi aldri dine data med andre. Mer om informasjonskapsler på aksel.nav.no

  • Godta alle: Hjelper oss gjøre tjenestene bedre for deg basert på anonymisert bruk.
  • Bare nødvendige: Sikrer at tjenesten fungerer og er trygg. Kan ikke velges bort.
Hopp til innhold
Aksel

Søk

Ctrl+K for å søkeEsc for å lukke

Aksel

Designsystemet
God praksisBloggen

Retningslinje

SVG-ikoner og tilgjengelighet

Ikoner er blitt en vital del av dagens web. Disse grafiske elementene fremhever det visuelle, men også ofte det funksjonelle i løsningene våre. Dette skal funke for alle brukerene våre, uansett situasjon.

HTML
<svg
role="img"
aria-hidden="false"
aria-labelledby="title-id"
focusable="false"
{...}
>
<title id="title-id">Alternativ tekst</title>
{...}
</svg>

role

Per spesifikasjonen har SVGer i HTML implisitt ARIA role graphics-document. Dessverre viser testing at ikke alle nettlesers tilgjengelighets-APIer eksponerer rollen til hjelpemidler på samme måte. Derfor er det viktig at du koder inline SVG-ikoner med role="img" for å kommunisere til nettleseren at DOMen ikke skal traverseres og at SVGen skal eksponeres til hjelpemidler som et bilde. Hvis du bruker npm-pakken med react-komponenter for ikoner @navikt/aksel-icons blir role="img" satt by-default.

aria-hidden

Hvis ikonet er bare til pynt skal den skjules fra hjelpemidler ved å bruke aria-hidden="true" på SVG-taggen. Ikke bruk role="presentation" til dette formålet--denne rollen skjuler ikke elementet fra hjelpemidler, den bare fjerner elementets native semantikk.

aria-labelledby og title

Bruk <title /> element som første child av SVG-taggen, og referer til taggen med aria-labelledby. Denne navngivnings-teknikken har bredeste støtte mellom forskjellige kombinasjoner av nettlesere og hjelpemidler. Hvis du bruker pakken @navikt/aksel-icons nevnt tidligere så er react-prop title eksponert, slik at kan sette <Icon title="En god beskrivelse her" /> så fikses koblingen automatisk. titleId er også eksponert hvis du trenger en spesifikk Id for <title />

desc

Formålet til en desc-tag er å gi en omfattende beskrivelse av SVGens innhold, noe som ikke er nødvendig for enkle ikoner. Den er mest egnet for kompliserte bilder og grafer der mye innhold ikke lett kan bli forklart av en kort kommentar. Det er tilstrekkelig å gi SVG-ikoner alternativ tekst med title og aria-labelledby som beskrevet over.

focusable og tabindex

Hvis du bruker testverktøy som ARC Toolkit er det mulig at du har sett warnings om fokuserbare SVGer. IE11 har en bug som gjør at SVGer som er et child-element av fokuserbare elementer kan også motta fokus. Dersom løsningen din skal støtte IE11 kan du bruke focusable="false" for å unngå denne oppførselen. Hvis du ikke støtter IE11, trenger du ikke dette. Ikon-komponentene i @navikt/aksel-icons har focusable="false" satt ved default. Husk også at hvis tabIndex={-1} er satt så kan man ikke sette fokus med keyboard-navigasjon, men museklikk vil fortsatt kunne sette fokus.

Medvirkende

Sarah Brodwall,
Ken A. Johansen

Innspill til artikkelen

Logg inn med Nav SSO for å gi innspill til artikkelen

Logg inn med Nav SSO