`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.