diff --git a/src/AvtaleOversikt/EtterRegistrering/EtterRegistrering.tsx b/src/AvtaleOversikt/EtterRegistrering/EtterRegistrering.tsx
index c307fbb2b..b03611fc1 100644
--- a/src/AvtaleOversikt/EtterRegistrering/EtterRegistrering.tsx
+++ b/src/AvtaleOversikt/EtterRegistrering/EtterRegistrering.tsx
@@ -73,7 +73,7 @@ const EtterRegistrering: FunctionComponent = () => {
                 aria-label="Min modalrute"
             >
                 <Modal.Header>
-                    <Heading size="medium" className={cls.element('header')}>
+                    <Heading level='2' size="medium" className={cls.element('header')}>
                         Søk opp avtalenummer for godkjenning av etterregistrering
                     </Heading>
                 </Modal.Header>
diff --git a/src/AvtaleOversikt/IngenAvtaler/IngenAvtaler.tsx b/src/AvtaleOversikt/IngenAvtaler/IngenAvtaler.tsx
index 96fecf610..40c0d55d2 100644
--- a/src/AvtaleOversikt/IngenAvtaler/IngenAvtaler.tsx
+++ b/src/AvtaleOversikt/IngenAvtaler/IngenAvtaler.tsx
@@ -40,7 +40,7 @@ const IngenAvtalerHvorDuErMed = () => {
     return (
         <Innholdsboks>
             <div className={cls.element('tekst')}>
-                <Heading size="large">Ingen avtaler</Heading>
+                <Heading level='2' size="medium">Ingen avtaler</Heading>
                 <VerticalSpacer rem={1} />
                 <Ingress>Det har ikke blitt opprettet noen avtaler hvor du er med enda.</Ingress>
             </div>
diff --git "a/src/AvtaleOversikt/Taushetserkl\303\246ring/Taushetserkl\303\246ring.tsx" "b/src/AvtaleOversikt/Taushetserkl\303\246ring/Taushetserkl\303\246ring.tsx"
index e4faae924..40cc8fed4 100644
--- "a/src/AvtaleOversikt/Taushetserkl\303\246ring/Taushetserkl\303\246ring.tsx"
+++ "b/src/AvtaleOversikt/Taushetserkl\303\246ring/Taushetserkl\303\246ring.tsx"
@@ -52,7 +52,7 @@ const TaushetserklæringModal: FunctionComponent<TaushetserklæringProps> = ({
             </Modal.Header>
             <Modal.Body>
                 <div className={cls.element('modal')}>
-                    <Heading size="medium" className={cls.element('header')}>
+                    <Heading level='2' size="medium" className={cls.element('header')}>
                         Signer taushetserklæring
                     </Heading>
                     <p>Som mentor må du signere en taushetserklæring.</p>
diff --git "a/src/AvtaleOversikt/Taushetserkl\303\246ring/Taushetserkl\303\246ringTekst.tsx" "b/src/AvtaleOversikt/Taushetserkl\303\246ring/Taushetserkl\303\246ringTekst.tsx"
index dd4d43bb5..b904482eb 100644
--- "a/src/AvtaleOversikt/Taushetserkl\303\246ring/Taushetserkl\303\246ringTekst.tsx"
+++ "b/src/AvtaleOversikt/Taushetserkl\303\246ring/Taushetserkl\303\246ringTekst.tsx"
@@ -7,7 +7,7 @@ const TausetserklæringTekst = () => {
     const cls = BEMHelper('taushetserklæring');
     return (
         <div style={{ padding: '0.5rem' }}>
-            <Heading size="medium">Taushetsplikt for avtale</Heading>
+            <Heading level='2' size="medium">Taushetsplikt for avtale</Heading>
             <p>
                 Forvaltningsloven, arbeids- og velferdsforvaltningsloven og lov om sosiale tjenester i arbeids- og
                 velferdsforvaltningen inneholder strenge regler om taushetsplikt. Det skal bevares taushet om alle
@@ -40,7 +40,7 @@ const TausetserklæringTekst = () => {
                 straffeansvar etter straffeloven §§ 209 og 210.
             </p>
             <div style={{ padding: '1rem', lineHeight: '0.5rem', fontSize: '0.9rem' }}>
-                <Heading size="medium">Hva sier regelverket?</Heading>
+                <Heading level='2' size="medium">Hva sier regelverket?</Heading>
                 <div className={cls.element('lenker')}>
                     <EksternLenke
                         className={cls.element('lenke')}
diff --git a/src/AvtaleSide/AvtaleSide.tsx b/src/AvtaleSide/AvtaleSide.tsx
index 24f41d757..9d5a9ef2d 100644
--- a/src/AvtaleSide/AvtaleSide.tsx
+++ b/src/AvtaleSide/AvtaleSide.tsx
@@ -87,7 +87,7 @@ const AvtaleSide: FunctionComponent = () => {
                 }}
                 tekst={sideTittel}
             />
-            <div className="avtaleside">
+            <div className="avtaleside" role="main">
                 {erAvtaleLaast && (
                     <div className={cls.element('innhold')}>
                         <BannerNAVAnsatt tekst={sideTittel} undertittel={`Avtalenummer: ${avtale.avtaleNr}`} />
diff --git a/src/AvtaleSide/AvtaleStatus/StatusPanel.tsx b/src/AvtaleSide/AvtaleStatus/StatusPanel.tsx
index a432e8eff..9a1d563f6 100644
--- a/src/AvtaleSide/AvtaleStatus/StatusPanel.tsx
+++ b/src/AvtaleSide/AvtaleStatus/StatusPanel.tsx
@@ -15,9 +15,9 @@ const StatusPanel: React.FunctionComponent<{
                 <Ikon style={{ height: '40px', width: '40px' }} />
                 <VerticalSpacer rem={1} />
                 {header.length > 36 ? (
-                    <Heading size="medium">{header}</Heading>
+                    <Heading level="2" size="medium">{header}</Heading>
                 ) : (
-                    <Heading size="large">{header}</Heading>
+                    <Heading level="2" size="large">{header}</Heading>
                 )}
             </div>
 
diff --git a/src/AvtaleSide/DelLenkeTilAvtalen/SendVarselModal.tsx b/src/AvtaleSide/DelLenkeTilAvtalen/SendVarselModal.tsx
index 50b3faeb9..b0480c62f 100644
--- a/src/AvtaleSide/DelLenkeTilAvtalen/SendVarselModal.tsx
+++ b/src/AvtaleSide/DelLenkeTilAvtalen/SendVarselModal.tsx
@@ -28,7 +28,7 @@ const SendVarselModal: React.FunctionComponent<Props> = (props) => {
             aria-modal={props.isOpen}
         >
             <Modal.Header>
-                <Heading size="medium">Del lenke til avtalen</Heading>
+                <Heading level='2' size="medium">Del lenke til avtalen</Heading>
             </Modal.Header>
             <Modal.Body>
                 <VerticalSpacer rem={0.5} />
@@ -40,7 +40,7 @@ const SendVarselModal: React.FunctionComponent<Props> = (props) => {
 
                 <VerticalSpacer rem={2} />
 
-                <Heading size="small">Send lenke på SMS</Heading>
+                <Heading level='2' size="small">Send lenke på SMS</Heading>
                 <VerticalSpacer rem={0.5} />
                 <LagreKnapp
                     label="Send til arbeidsgiveren"
@@ -67,7 +67,7 @@ const SendVarselModal: React.FunctionComponent<Props> = (props) => {
 
                 <VerticalSpacer rem={2} />
 
-                <Heading size="small">Send lenke manuelt</Heading>
+                <Heading level='2' size="small">Send lenke manuelt</Heading>
                 <div className={cls.element('lenkedeling')}>
                     <div className={cls.element('lenke')}>
                         <Link href={pathTilOversiktISelvbetjeningProd}>{pathTilOversiktISelvbetjeningProd}</Link>
diff --git a/src/AvtaleSide/MobilAvtaleSide/MobilAvtaleSide.tsx b/src/AvtaleSide/MobilAvtaleSide/MobilAvtaleSide.tsx
index 555e02a16..3a4573430 100644
--- a/src/AvtaleSide/MobilAvtaleSide/MobilAvtaleSide.tsx
+++ b/src/AvtaleSide/MobilAvtaleSide/MobilAvtaleSide.tsx
@@ -12,7 +12,7 @@ interface Props {
 
 const MobilAvtaleSide: React.FunctionComponent<Props> = (props) => {
     const ekspanderbartPanel = props.avtaleSteg.map((steg) => (
-        <div className="avtaleside__ekspanderbart-panel" key={steg.id}>
+        <div role="main" className="avtaleside__ekspanderbart-panel" key={steg.id}>
             <Accordion className="accordion">
                 <Accordion.Item>
                     <Accordion.Header>{steg.label}</Accordion.Header>
diff --git a/src/AvtaleSide/VarselModal/VarselModal.tsx b/src/AvtaleSide/VarselModal/VarselModal.tsx
index 8b586c906..149865e77 100644
--- a/src/AvtaleSide/VarselModal/VarselModal.tsx
+++ b/src/AvtaleSide/VarselModal/VarselModal.tsx
@@ -52,7 +52,7 @@ const VarselModal: FunctionComponent = () => {
                 <InfoIkonGul height="80px" width="80px" style={{ margin: '-100px auto 1rem auto' }} />
             </Modal.Header>
             <Modal.Body>
-                <Heading size="medium">{harOpprettetHendelse ? 'Hendelselogg' : 'Nye hendelser'}</Heading>
+                <Heading level='1' size="medium">{harOpprettetHendelse ? 'Hendelselogg' : 'Nye hendelser'}</Heading>
 
                 <BodyShort size="small">
                     {harOpprettetHendelse
diff --git a/src/AvtaleSide/Varsellogg/Varsellogg.tsx b/src/AvtaleSide/Varsellogg/Varsellogg.tsx
index be7a8e61a..2e57b31d2 100644
--- a/src/AvtaleSide/Varsellogg/Varsellogg.tsx
+++ b/src/AvtaleSide/Varsellogg/Varsellogg.tsx
@@ -52,7 +52,7 @@ const Varsellogg: FunctionComponent = () => {
                 aria-describedby="varsellogg for endringsaktiviteter i applikasjonen"
             >
                 <Modal.Header>
-                    <Heading size="medium" level="1">
+                    <Heading size="medium" level="2">
                         Hendelselogg
                     </Heading>
                 </Modal.Header>
diff --git a/src/AvtaleSide/steg/BeregningTilskudd/BeregningTilskuddSteg.tsx b/src/AvtaleSide/steg/BeregningTilskudd/BeregningTilskuddSteg.tsx
index 4012d3ffd..8a25331e7 100644
--- a/src/AvtaleSide/steg/BeregningTilskudd/BeregningTilskuddSteg.tsx
+++ b/src/AvtaleSide/steg/BeregningTilskudd/BeregningTilskuddSteg.tsx
@@ -33,7 +33,7 @@ const BeregningTilskuddSteg: FunctionComponent = () => {
             <SkjemaTittel>Beregning av tilskudd</SkjemaTittel>
             {avtale.tiltakstype !== 'SOMMERJOBB' && <KvalifiseringsgruppeSats cls={cls} />}
             {avtale.tiltakstype === 'SOMMERJOBB' && <OppgiLonnstilskuddprosent />}
-            <Heading size="small" className={cls.element('lonn-tittel')}>
+            <Heading level="2" size="small" className={cls.element('lonn-tittel')}>
                 Lønn per måned i faktisk stillingsprosent inkludert faste og uregelmessige tillegg
             </Heading>
             <HvaMenesMedDette className={cls.className} />
diff --git a/src/AvtaleSide/steg/BeregningTilskudd/KvalifiseringsgruppeSats/KvalifiseringsgruppeSats.tsx b/src/AvtaleSide/steg/BeregningTilskudd/KvalifiseringsgruppeSats/KvalifiseringsgruppeSats.tsx
index 146eb8c83..35ebb5520 100644
--- a/src/AvtaleSide/steg/BeregningTilskudd/KvalifiseringsgruppeSats/KvalifiseringsgruppeSats.tsx
+++ b/src/AvtaleSide/steg/BeregningTilskudd/KvalifiseringsgruppeSats/KvalifiseringsgruppeSats.tsx
@@ -36,7 +36,7 @@ const KvalifiseringsgruppeSats: FunctionComponent<Props> = ({ cls }: Props) => {
         <div className={cls.element('kvalifiseringsgruppe')}>
             {avtale.tiltakstype === 'VARIG_LONNSTILSKUDD' ? (
                 <div className={cls.element('tilskuddsprosent')}>
-                    <Heading size="small" className={cls.element('tilskuddsprosent-heading')}>
+                    <Heading level="2" size="small" className={cls.element('tilskuddsprosent-heading')}>
                         Tilskuddsprosent
                     </Heading>
                     <ProsentInput
@@ -55,14 +55,14 @@ const KvalifiseringsgruppeSats: FunctionComponent<Props> = ({ cls }: Props) => {
                 </div>
             ) : (
                 <div className={cls.element('tilskuddsprosent')}>
-                    <Heading size="small">Tilskuddsprosent</Heading>
+                    <Heading level="2" size="small">Tilskuddsprosent</Heading>
                     <BodyShort size="small">{settLonnstilskuddsprosent()}</BodyShort>
                 </div>
             )}
         </div>
     ) : (
         <div className={cls.element('tilskuddsprosent')}>
-            <Heading size="small">Tilskuddsprosent</Heading>
+            <Heading level="2" size="small">Tilskuddsprosent</Heading>
             <BodyShort size="small">{settLonnstilskuddsprosent()}</BodyShort>
         </div>
     );
diff --git a/src/AvtaleSide/steg/BeregningTilskudd/tilskuddsPerioder/TilskuddsPerioderOppsummering.tsx b/src/AvtaleSide/steg/BeregningTilskudd/tilskuddsPerioder/TilskuddsPerioderOppsummering.tsx
index 874d5ae35..4fc5a5c0a 100644
--- a/src/AvtaleSide/steg/BeregningTilskudd/tilskuddsPerioder/TilskuddsPerioderOppsummering.tsx
+++ b/src/AvtaleSide/steg/BeregningTilskudd/tilskuddsPerioder/TilskuddsPerioderOppsummering.tsx
@@ -13,7 +13,7 @@ const TilskuddsPerioderOppsummering = () => {
 
     return (
         <>
-            <Heading size="small">Tilskuddsperioder</Heading>
+            <Heading level='2' size="small">Tilskuddsperioder</Heading>
             <VerticalSpacer rem={1} />
             <VisningTilskuddsperioder />
         </>
diff --git a/src/AvtaleSide/steg/GodkjenningSteg/Godkjenning/godkjenningVeileder/GodkjenningVeileder.tsx b/src/AvtaleSide/steg/GodkjenningSteg/Godkjenning/godkjenningVeileder/GodkjenningVeileder.tsx
index c4b2f3bd5..642fb4e17 100644
--- a/src/AvtaleSide/steg/GodkjenningSteg/Godkjenning/godkjenningVeileder/GodkjenningVeileder.tsx
+++ b/src/AvtaleSide/steg/GodkjenningSteg/Godkjenning/godkjenningVeileder/GodkjenningVeileder.tsx
@@ -28,7 +28,7 @@ const GodkjenningVeileder: FunctionComponent = () => {
     const ikkeGodkjentAvNoen = !avtale.godkjentAvDeltaker && !avtale.godkjentAvArbeidsgiver;
 
     return (
-        <Innholdsboks className={cls.className} ariaLabel={'Godkjenn avtalen'}>
+        <Innholdsboks  className={cls.className} ariaLabel={'Godkjenn avtalen'}>
             <SkjemaTittel>Godkjenn avtalen</SkjemaTittel>
             <GodkjenningInstruks />
             {((avtale.tiltakstype !== 'SOMMERJOBB' && !avtale.godkjentAvDeltaker) ||
diff --git a/src/AvtaleSide/steg/GodkjenningSteg/GodkjenningStatus/GodkjenningStatus.tsx b/src/AvtaleSide/steg/GodkjenningSteg/GodkjenningStatus/GodkjenningStatus.tsx
index 0a3e6e3da..76bac7d0a 100644
--- a/src/AvtaleSide/steg/GodkjenningSteg/GodkjenningStatus/GodkjenningStatus.tsx
+++ b/src/AvtaleSide/steg/GodkjenningSteg/GodkjenningStatus/GodkjenningStatus.tsx
@@ -12,7 +12,7 @@ interface Props {
 const GodkjenningStatus: React.FunctionComponent<Props> = (props) => {
     return (
         <div className="godkjenningstatus">
-            <Heading size="small">Hvem har godkjent?</Heading>
+            <Heading level='3' size="small">Hvem har godkjent?</Heading>
             <VerticalSpacer rem={0.5} />
             <div className="godkjenningstatus__rader">
                 <GodkjenningRad
diff --git a/src/AvtaleSide/steg/GodkjenningSteg/GodkjenningSteg.tsx b/src/AvtaleSide/steg/GodkjenningSteg/GodkjenningSteg.tsx
index eb6a1e465..33c878657 100644
--- a/src/AvtaleSide/steg/GodkjenningSteg/GodkjenningSteg.tsx
+++ b/src/AvtaleSide/steg/GodkjenningSteg/GodkjenningSteg.tsx
@@ -26,7 +26,7 @@ const GodkjenningSteg: React.FunctionComponent<Props> = (props) => {
         !avtale.avbrutt && (!innloggetBruker.erNavAnsatt || (innloggetBruker.erNavAnsatt && !avtale.erUfordelt));
 
     return (
-        <div className={cls.className} role={'main'}>
+        <div className={cls.className}>
             <AvtaleStatus />
             <Innholdsboks ariaLabel={avtale.avtaleInngått ? 'Oppsummering av inngått avtale' : 'Godkjenning av avtale'}>
                 <div className={cls.element('wrapper')}>
diff --git a/src/AvtaleSide/steg/GodkjenningSteg/Oppsummering/AvtaleinfoFeltSjekk/AvtaleinfoFeltSjekk.tsx b/src/AvtaleSide/steg/GodkjenningSteg/Oppsummering/AvtaleinfoFeltSjekk/AvtaleinfoFeltSjekk.tsx
index bbe5e6391..f30af9bf0 100644
--- a/src/AvtaleSide/steg/GodkjenningSteg/Oppsummering/AvtaleinfoFeltSjekk/AvtaleinfoFeltSjekk.tsx
+++ b/src/AvtaleSide/steg/GodkjenningSteg/Oppsummering/AvtaleinfoFeltSjekk/AvtaleinfoFeltSjekk.tsx
@@ -34,7 +34,7 @@ export const AvtaleinfoFeltSjekk: FunctionComponent<Props> = (props) => {
     } else {
         innhold = (
             <>
-                <Heading size="small">{props.navnFelter.map((felt) => felt.verdi).join(' ')}</Heading>
+                <Heading level='3' size="small">{props.navnFelter.map((felt) => felt.verdi).join(' ')}</Heading>
                 {props.tilleggFelter.map((felt, index) => (
                     <React.Fragment key={index}>
                         <VirksomhetsnummerEllerTelefon felt={felt.felt} verdi={felt.verdi} />
diff --git a/src/AvtaleSide/steg/GodkjenningSteg/Oppsummering/RelasjonerOppsummering/RelasjonerOppsummering.tsx b/src/AvtaleSide/steg/GodkjenningSteg/Oppsummering/RelasjonerOppsummering/RelasjonerOppsummering.tsx
index c9496237c..fee786e77 100644
--- a/src/AvtaleSide/steg/GodkjenningSteg/Oppsummering/RelasjonerOppsummering/RelasjonerOppsummering.tsx
+++ b/src/AvtaleSide/steg/GodkjenningSteg/Oppsummering/RelasjonerOppsummering/RelasjonerOppsummering.tsx
@@ -7,7 +7,7 @@ import HvaManglerOppsummering from '../HvaManglerOppsummering';
 const RelasjonerOppsummering: FunctionComponent<RelasjonerInfo> = (props) => {
     return (
         <div>
-            <Heading size="small">Relasjoner</Heading>
+            <Heading level="2" size="small">Relasjoner</Heading>
             <BodyShort size="small">
                 Er det familiære eller økonomiske relasjoner mellom arbeidsgiveren og deltakeren?
             </BodyShort>
diff --git a/src/AvtaleSide/steg/GodkjenningSteg/Oppsummering/Stegoppsummering/Stegoppsummering.tsx b/src/AvtaleSide/steg/GodkjenningSteg/Oppsummering/Stegoppsummering/Stegoppsummering.tsx
index f19c689c6..af338c38b 100644
--- a/src/AvtaleSide/steg/GodkjenningSteg/Oppsummering/Stegoppsummering/Stegoppsummering.tsx
+++ b/src/AvtaleSide/steg/GodkjenningSteg/Oppsummering/Stegoppsummering/Stegoppsummering.tsx
@@ -15,7 +15,7 @@ const Stegoppsummering: React.FunctionComponent<PropsWithChildren<Props>> = ({ t
     <div className={cls.className}>
         <div className={cls.element('header')}>
             {ikon}
-            <Heading size="medium" className={cls.element('tittel')}>
+            <Heading level="2" size="medium" className={cls.element('tittel')}>
                 {tittel}
             </Heading>
         </div>
diff --git a/src/AvtaleSide/steg/GodkjenningSteg/Oppsummering/maalOppsummering/MaalOppsummering.tsx b/src/AvtaleSide/steg/GodkjenningSteg/Oppsummering/maalOppsummering/MaalOppsummering.tsx
index 15017d6fa..ae60aa628 100644
--- a/src/AvtaleSide/steg/GodkjenningSteg/Oppsummering/maalOppsummering/MaalOppsummering.tsx
+++ b/src/AvtaleSide/steg/GodkjenningSteg/Oppsummering/maalOppsummering/MaalOppsummering.tsx
@@ -12,7 +12,7 @@ const cls = BEMHelper('mål');
 const MaalOppsummering: FunctionComponent<MaalListe> = (props) => {
     const maalListe = props.maal.map((maal) => (
         <div key={maal.id} className={cls.className}>
-            <Heading size="small" className={cls.element('label')}>
+            <Heading level='3' size="small" className={cls.element('label')}>
                 <FormattedMessage id={maal.kategori} />
             </Heading>
             <BodyShort size="small" className={cls.element('beskrivelse')}>
diff --git a/src/AvtaleSide/steg/GodkjenningSteg/endringAvAvtaleInnhold/endreKontaktInfo/EndreKontaktInformasjon.tsx b/src/AvtaleSide/steg/GodkjenningSteg/endringAvAvtaleInnhold/endreKontaktInfo/EndreKontaktInformasjon.tsx
index fc3a5f2c0..59e073285 100644
--- a/src/AvtaleSide/steg/GodkjenningSteg/endringAvAvtaleInnhold/endreKontaktInfo/EndreKontaktInformasjon.tsx
+++ b/src/AvtaleSide/steg/GodkjenningSteg/endringAvAvtaleInnhold/endreKontaktInfo/EndreKontaktInformasjon.tsx
@@ -98,7 +98,7 @@ const EndreKontaktInformasjon: FunctionComponent = () => {
                 lukkModal={() => setModalApen(false)}
             >
                 
-                <Heading size="small" className={cls.element('tittel')}>
+                <Heading level='3' size="small" className={cls.element('tittel')}>
                     Informasjon om deltaker
                 </Heading>
                 <div className={cls.element('rad')}>
@@ -120,7 +120,7 @@ const EndreKontaktInformasjon: FunctionComponent = () => {
                         settVerdi={(verdi) => settNyKontaktInformasjon('deltakerTlf', verdi)}
                     />
                 </div>     
-                <Heading size="small" className={cls.element('tittel')}>
+                <Heading level='3' size="small" className={cls.element('tittel')}>
                     Informasjon om veileder
                 </Heading>
                 <div className={cls.element('rad')}>
@@ -142,7 +142,7 @@ const EndreKontaktInformasjon: FunctionComponent = () => {
                             settVerdi={(verdi) => settNyKontaktInformasjon('veilederTlf', verdi)}
                         />
                 </div>
-                <Heading size="small" className={cls.element('tittel')}>
+                <Heading level='3' size="small" className={cls.element('tittel')}>
                     Kontaktperson for avtalen i bedriften
                 </Heading>
                 <div className={cls.element('rad')}>
diff --git "a/src/AvtaleSide/steg/GodkjenningSteg/endringAvAvtaleInnhold/endreOppf\303\270lgingOgTilrettelegging/EndreOppf\303\270lgingOgTilrettelegging.tsx" "b/src/AvtaleSide/steg/GodkjenningSteg/endringAvAvtaleInnhold/endreOppf\303\270lgingOgTilrettelegging/EndreOppf\303\270lgingOgTilrettelegging.tsx"
index 37cf526eb..495101767 100644
--- "a/src/AvtaleSide/steg/GodkjenningSteg/endringAvAvtaleInnhold/endreOppf\303\270lgingOgTilrettelegging/EndreOppf\303\270lgingOgTilrettelegging.tsx"
+++ "b/src/AvtaleSide/steg/GodkjenningSteg/endringAvAvtaleInnhold/endreOppf\303\270lgingOgTilrettelegging/EndreOppf\303\270lgingOgTilrettelegging.tsx"
@@ -68,7 +68,7 @@ const EndreOppfølgingOgTilrettelegging: FunctionComponent = () => {
                 <div className={cls.className}>
                     <div className={cls.element('oppfølging')}>
                         <div className={cls.element('tittel')}>
-                            <Heading size="small">Oppfølging</Heading>
+                            <Heading level='3' size="small">Oppfølging</Heading>
                         </div>
                         <div className={cls.element('textareafelt-wrapper')}>
                             <PakrevdTextarea
@@ -83,7 +83,7 @@ const EndreOppfølgingOgTilrettelegging: FunctionComponent = () => {
                     </div>
                     <div className={cls.element('Tilrettelegging')}>
                         <div className={cls.element('tittel')}>
-                            <Heading size="small">Tilrettelegging</Heading>
+                            <Heading level='3' size="small">Tilrettelegging</Heading>
                         </div>
                         <div className={cls.element('textareafelt-wrapper')}>
                             <PakrevdTextarea
diff --git a/src/AvtaleSide/steg/InkluderingstilskuddSteg/InkluderingstilskuddSteg.tsx b/src/AvtaleSide/steg/InkluderingstilskuddSteg/InkluderingstilskuddSteg.tsx
index 9b05e81a7..0704fc1d1 100644
--- a/src/AvtaleSide/steg/InkluderingstilskuddSteg/InkluderingstilskuddSteg.tsx
+++ b/src/AvtaleSide/steg/InkluderingstilskuddSteg/InkluderingstilskuddSteg.tsx
@@ -51,7 +51,7 @@ const InkluderingstilskuddSteg: FunctionComponent = () => {
     return (
         <>
             <Innholdsboks utfyller="arbeidsgiver">
-                <Heading size="medium">Inkluderingstilskudd</Heading>
+                <Heading level='2' size="medium">Inkluderingstilskudd</Heading>
                 <VerticalSpacer rem={1} />
                 <InkluderingstilskuddIngress />
                 <VerticalSpacer rem={2} />
diff --git a/src/AvtaleSide/steg/InkluderingstilskuddSteg/OpprettEnTilskuddsutgift.tsx b/src/AvtaleSide/steg/InkluderingstilskuddSteg/OpprettEnTilskuddsutgift.tsx
index 81d76fab4..36b910174 100644
--- a/src/AvtaleSide/steg/InkluderingstilskuddSteg/OpprettEnTilskuddsutgift.tsx
+++ b/src/AvtaleSide/steg/InkluderingstilskuddSteg/OpprettEnTilskuddsutgift.tsx
@@ -54,7 +54,7 @@ const OpprettEnTilskuddsutgift: FunctionComponent<Props> = (props) => {
 
     return (
         <div>
-            <Heading size="medium">Legg til utgift</Heading>
+            <Heading level='2' size="medium">Legg til utgift</Heading>
             <VerticalSpacer rem={2} />
 
             {leggertilTilskuddsutgift ? (
diff --git a/src/AvtaleSide/steg/KontaktInformasjonSteg/ArbeidsgiverinfoDel/Relasjoner.tsx b/src/AvtaleSide/steg/KontaktInformasjonSteg/ArbeidsgiverinfoDel/Relasjoner.tsx
index d9a1c492c..7b26d1098 100644
--- a/src/AvtaleSide/steg/KontaktInformasjonSteg/ArbeidsgiverinfoDel/Relasjoner.tsx
+++ b/src/AvtaleSide/steg/KontaktInformasjonSteg/ArbeidsgiverinfoDel/Relasjoner.tsx
@@ -38,7 +38,7 @@ const Relasjoner: FunctionComponent<Props> = ({ tiltakstype }: Props) => {
 
     return (
         <div className={cls.className}>
-            <Heading size="small" className={cls.element('heading')}>
+            <Heading level="2" size="small" className={cls.element('heading')}>
                 Relasjoner
             </Heading>
             <div className={cls.element('info-ingress')}>
diff --git a/src/AvtaleSide/steg/KontaktInformasjonSteg/kontorInfo/DeltakerInfo.tsx b/src/AvtaleSide/steg/KontaktInformasjonSteg/kontorInfo/DeltakerInfo.tsx
index 1d44fe0d8..27cd73e1e 100644
--- a/src/AvtaleSide/steg/KontaktInformasjonSteg/kontorInfo/DeltakerInfo.tsx
+++ b/src/AvtaleSide/steg/KontaktInformasjonSteg/kontorInfo/DeltakerInfo.tsx
@@ -32,7 +32,7 @@ const DeltakerInfo: FunctionComponent<{ oppsummeringside: boolean }> = ({
         <div className={cls.className}>
             <div className={cls.element('ingress', oppsummeringside ? 'oppsummering' : '')}>
                 {ikon()}
-                <Heading size="medium">Om deltakeren</Heading>
+                <Heading level="2" size="medium">Om deltakeren</Heading>
             </div>
             <div className={cls.element('info-rad')}>
                 <div className={cls.element('info-container')}>
diff --git a/src/AvtaleSide/steg/MaalSteg/Maal/EtMaal.tsx b/src/AvtaleSide/steg/MaalSteg/Maal/EtMaal.tsx
index 898a2a9f2..bf0ef8ded 100644
--- a/src/AvtaleSide/steg/MaalSteg/Maal/EtMaal.tsx
+++ b/src/AvtaleSide/steg/MaalSteg/Maal/EtMaal.tsx
@@ -78,7 +78,7 @@ const EtMaal: FunctionComponent<Props> = (props) => {
                 </>
             ) : (
                 <div>
-                    <Heading size="small">{messages[props.maal.kategori]}</Heading>
+                    <Heading level="3" size="small">{messages[props.maal.kategori]}</Heading>
                     <VerticalSpacer rem={1} />
                     <BodyShort size="small">Beskrivelse av mål</BodyShort>
                     <VerticalSpacer rem={1} />
diff --git a/src/AvtaleSide/steg/MaalSteg/Maal/OpprettMaal.tsx b/src/AvtaleSide/steg/MaalSteg/Maal/OpprettMaal.tsx
index ee8e160ff..ef2b58131 100644
--- a/src/AvtaleSide/steg/MaalSteg/Maal/OpprettMaal.tsx
+++ b/src/AvtaleSide/steg/MaalSteg/Maal/OpprettMaal.tsx
@@ -34,7 +34,7 @@ const OpprettMaal: FunctionComponent<Props> = (props) => {
 
     return (
         <div>
-            <Heading size="medium">Opprett mål</Heading>
+            <Heading level="2" size="medium">Opprett mål</Heading>
             <VerticalSpacer rem={2} />
 
             {leggertilMål ? (
diff --git a/src/AvtaleSide/steg/MaalSteg/MaalSteg.tsx b/src/AvtaleSide/steg/MaalSteg/MaalSteg.tsx
index 5c8168e22..1b3f57e86 100644
--- a/src/AvtaleSide/steg/MaalSteg/MaalSteg.tsx
+++ b/src/AvtaleSide/steg/MaalSteg/MaalSteg.tsx
@@ -28,7 +28,7 @@ const MaalSteg: FunctionComponent = () => {
     };
 
     return (
-        <div role="main">
+        <>
             <Innholdsboks utfyller="veileder">
                 <OpprettMaal
                     iRedigermodus={iRedigermodus}
@@ -50,7 +50,7 @@ const MaalSteg: FunctionComponent = () => {
                     ledigeMålkategorier={ledigeMålkategorier}
                 />
             ))}
-        </div>
+        </>
     );
 };
 
diff --git a/src/BeslutterSide/beslutterPanel/TilskuddsperiodeBehandlingsTittel.tsx b/src/BeslutterSide/beslutterPanel/TilskuddsperiodeBehandlingsTittel.tsx
index efd48aff7..47470b8d9 100644
--- a/src/BeslutterSide/beslutterPanel/TilskuddsperiodeBehandlingsTittel.tsx
+++ b/src/BeslutterSide/beslutterPanel/TilskuddsperiodeBehandlingsTittel.tsx
@@ -21,7 +21,7 @@ const TilskuddsperiodeBehandlingsTittel: FunctionComponent = () => {
 
     return (
         <div className={cls.element('tittel')}>
-            <Heading size="small">{tittel[avtale.gjeldendeTilskuddsperiode.status]}</Heading>
+            <Heading level='2' size="small">{tittel[avtale.gjeldendeTilskuddsperiode.status]}</Heading>
             <BodyShort size="small">{formatterDato(avtale.opprettetTidspunkt, NORSK_DATO_FORMAT)}</BodyShort>
         </div>
     );
diff --git a/src/BeslutterSide/beslutterTilskuddsperioder/BeslutterTilskuddsperioder.tsx b/src/BeslutterSide/beslutterTilskuddsperioder/BeslutterTilskuddsperioder.tsx
index 56672278d..4b211856a 100644
--- a/src/BeslutterSide/beslutterTilskuddsperioder/BeslutterTilskuddsperioder.tsx
+++ b/src/BeslutterSide/beslutterTilskuddsperioder/BeslutterTilskuddsperioder.tsx
@@ -71,7 +71,7 @@ const BeslutterTilskuddsPerioder: FunctionComponent<Props> = (props) => {
 
     return (
         <div className={cls.className}>
-            <Heading size="small" className={cls.element('tittel')}>
+            <Heading level='2' size="small" className={cls.element('tittel')}>
                 Tilskudd som skal godkjennes
             </Heading>
             <div className={cls.element('container')}>
diff --git a/src/InnloggingBoundary/Innloggingsside.tsx b/src/InnloggingBoundary/Innloggingsside.tsx
index b3aeb1f74..971c1b25c 100644
--- a/src/InnloggingBoundary/Innloggingsside.tsx
+++ b/src/InnloggingBoundary/Innloggingsside.tsx
@@ -76,7 +76,7 @@ const Innloggingsside = (props: { innloggingskilder: Innloggingskilde[] }) => {
                     </BodyShort>
                 </div>
                 <VerticalSpacer rem={2} />
-                <Heading size="medium">Logg inn</Heading>
+                <Heading level='2' size="medium">Logg inn</Heading>
                 <VerticalSpacer rem={2} />
                 <div className={'innloggingsside__loginKnapper'}>{logginnknapper}</div>
             </div>
diff --git a/src/OpprettAvtale/OpprettAvtaleArbeidsgiver/OpprettAvtaleArbeidsgiver.tsx b/src/OpprettAvtale/OpprettAvtaleArbeidsgiver/OpprettAvtaleArbeidsgiver.tsx
index f6ccf34f6..21f042cdf 100644
--- a/src/OpprettAvtale/OpprettAvtaleArbeidsgiver/OpprettAvtaleArbeidsgiver.tsx
+++ b/src/OpprettAvtale/OpprettAvtaleArbeidsgiver/OpprettAvtaleArbeidsgiver.tsx
@@ -108,7 +108,7 @@ const OpprettAvtaleArbeidsgiver: FunctionComponent = () => {
             <Banner tekst="Opprett avtale" />
             <div className={cls.className}>
                 <Innholdsboks>
-                    <Heading size="medium">Før du oppretter en avtale</Heading>
+                    <Heading level='2' size="medium">Før du oppretter en avtale</Heading>
                     <BodyShort size="small">
                         Er det første gang du skal opprette en avtale bør du lese gjennom {''}
                         <EksternLenke href={`${basename}${pathTilInformasjonssideInnlogget}`}>
@@ -124,7 +124,7 @@ const OpprettAvtaleArbeidsgiver: FunctionComponent = () => {
                     </BodyShort>
                 </Innholdsboks>
                 <Innholdsboks className={cls.element('innholdsboks')}>
-                    <Heading size="medium" className={cls.element('innholdstittel')}>
+                    <Heading level="2" size="medium" className={cls.element('innholdstittel')}>
                         Velg type avtale
                     </Heading>
                     <VerticalSpacer rem={1} />
@@ -153,7 +153,7 @@ const OpprettAvtaleArbeidsgiver: FunctionComponent = () => {
                     {uyldigAvtaletype && <ErrorMessage>{Feilmeldinger.UGYLDIG_AVTALETYPE}</ErrorMessage>}
                 </Innholdsboks>
                 <Innholdsboks className={cls.element('innholdsboks')}>
-                    <Heading size="medium" className={cls.element('innholdstittel')}>
+                    <Heading level='2' size="medium" className={cls.element('innholdstittel')}>
                         Hvem skal inngå i avtalen
                     </Heading>
                     <VerticalSpacer rem={1} />
diff --git a/src/OpprettAvtale/OpprettAvtaleVeileder/HvemSkalInngaaAvtalen.tsx b/src/OpprettAvtale/OpprettAvtaleVeileder/HvemSkalInngaaAvtalen.tsx
index 76497b5bf..9cc5898c3 100644
--- a/src/OpprettAvtale/OpprettAvtaleVeileder/HvemSkalInngaaAvtalen.tsx
+++ b/src/OpprettAvtale/OpprettAvtaleVeileder/HvemSkalInngaaAvtalen.tsx
@@ -54,7 +54,7 @@ const HvemSkalInngaaAvtalen: React.FC<Props> = ({
 
     return (
         <Innholdsboks>
-            <Heading size="medium">Hvem skal inngå i avtalen?</Heading>
+            <Heading level="2" size="medium">Hvem skal inngå i avtalen?</Heading>
             <VerticalSpacer rem={1} />
             <div className={cls.element('fnr-rad')}>
                 <TextField
diff --git a/src/OpprettAvtale/OpprettAvtaleVeileder/TiltaksTypeRadioPanel.tsx b/src/OpprettAvtale/OpprettAvtaleVeileder/TiltaksTypeRadioPanel.tsx
index ff01e4017..06625697a 100644
--- a/src/OpprettAvtale/OpprettAvtaleVeileder/TiltaksTypeRadioPanel.tsx
+++ b/src/OpprettAvtale/OpprettAvtaleVeileder/TiltaksTypeRadioPanel.tsx
@@ -45,7 +45,7 @@ const TiltaksTypeRadioPanel: FunctionComponent<Props> = ({
     ];
     return (
         <Innholdsboks className={cls.element('valg-tiltakstype-container')}>
-            <Heading size="medium">Velg type avtale</Heading>
+            <Heading level="2" size="medium">Velg type avtale</Heading>
             <BodyLong size="small" className={cls.element('valg-tiltakstype-tekst')}>
                 Ønsker du å vite mer om de ulike støtteordningene finner du informasjon på NAV sine sider{' '}
                 <EksternLenke
diff --git a/src/komponenter/EkspanderbartPanelRad/IkonTekstRad.tsx b/src/komponenter/EkspanderbartPanelRad/IkonTekstRad.tsx
index 382d4633d..fa4c78b25 100644
--- a/src/komponenter/EkspanderbartPanelRad/IkonTekstRad.tsx
+++ b/src/komponenter/EkspanderbartPanelRad/IkonTekstRad.tsx
@@ -18,7 +18,7 @@ const IkonTekstRad: React.FunctionComponent<PropsWithChildren<Props>> = (props)
     const { svgIkon, headerTekst, classname, children } = props;
     let header = null;
     if (headerTekst?.headingType) {
-        header = <Heading size={headerTekst.headingType}>{headerTekst.tekst}</Heading>;
+        header = <Heading level='3' size={headerTekst.headingType}>{headerTekst.tekst}</Heading>;
     } else if (headerTekst) {
         header = <Label>{headerTekst?.tekst}</Label>;
     }
diff --git a/src/komponenter/form/SkjemaTittel.tsx b/src/komponenter/form/SkjemaTittel.tsx
index 8b666ec2b..afcafbaee 100644
--- a/src/komponenter/form/SkjemaTittel.tsx
+++ b/src/komponenter/form/SkjemaTittel.tsx
@@ -5,7 +5,7 @@ import './SkjemaTittel.less';
 const SkjemaTittel: React.FunctionComponent<PropsWithChildren> = (props) => {
     const { children, ...other } = props;
     return (
-        <Heading size="medium" className="skjema-tittel" {...other}>
+        <Heading size="medium" level="2" className="skjema-tittel" {...other}>
             {children}
         </Heading>
     );
diff --git a/src/komponenter/modal/BekreftelseModal.tsx b/src/komponenter/modal/BekreftelseModal.tsx
index c4b275ffe..629fb2c92 100644
--- a/src/komponenter/modal/BekreftelseModal.tsx
+++ b/src/komponenter/modal/BekreftelseModal.tsx
@@ -61,7 +61,7 @@ const BekreftelseModal: React.FunctionComponent<Props> = (props) => {
                         <div className={cls.element('knappRad')} />
                         <div className={cls.element('innhold')}>
                             <div className={cls.element('tittel')}>
-                                <Heading size="medium" id={props.oversiktTekst}>
+                                <Heading level='2' size="medium" id={props.oversiktTekst}>
                                     {props.oversiktTekst}
                                 </Heading>
                             </div>