Gå til hovedinnhold
KOMPONENTER

Tilgjengelighet

npmv0.2.86

Entur sitt designsystem er utviklet for å være universelt utformet. Det betyr at det skal kunne fungere for alle. Her finner du noen ekstra komponenter for å forenkle dette arbeidet i løsningene våre også.

npm install @entur/a11y
@import '@entur/a11y/dist/styles.css';

Komponenter

SkipToContent

import { SkipToContent } from '@entur/a11y';
NavnTypeDefault-verdiBeskrivelse
children?ReactNode

Lenketeksten

mainId?string "main-content"

IDen til hovedinnholdsområdet

SkipToContent er en snarvei for brukere av tastaturnavigasjon for å forenkle veien til sidens hovedinnhold. Den synes ikke for vanlige brukere, men vil vises med en gang man trykker "tab" for å navigere seg nedover siden.

Den plasseres så tidlig som mulig i dokumentet. Du kan sende inn id-en til sidens hovedinnhold via mainId-propen, og en tekst som sier noe slikt som "Gå til hovedinnhold" i teksten.

Vi bruker den på denne siden også - test den ut med å trykke "tab"!

VisuallyHidden

import { VisuallyHidden } from '@entur/a11y';
NavnTypeDefault-verdiBeskrivelse
as?string | React.ElementType"span"

HTML-elementet eller React-komponenten som lager elementet

children?ReactNode

Innhold for skjermlesere

VisuallyHidden brukes for å gi skjermlesere en tekstlig beskrivelse av et visuelt element. Det er den logiske motsetningen til aria-hidden="true", og brukes ofte for å gi informasjon til skjermlesere der man ikke kan (eller vil) vise denne informasjonen til alle brukere.

Alle de kule utviklerne bruker VisuallyHidden-komponenten, asså.
Rediger denne siden på Bitbucket