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. Bruk aria-hidden="true" på SVG-taggen for å skjule den fra tilgjengelighets-APIen. Selv om den er skjult fra hjelpemidler bør du allikevel gi SVGen et tilgjengelig navn i tilfellet noen refererer til den med aria-labelledby.

Ikke bruk role="presentation" for å skjule SVG-ikoner fra hjelpemidler. 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.