digdir · mimarz · Jun 15, 2026 · Jun 10, 2026 · Jun 10, 2026 · Jun 10, 2026
@@ -15,20 +15,16 @@
     margin-bottom: var(--ds-size-3);
     text-wrap: pretty;
   }
-  span {
-    font-weight: 600;
-  }
   p {
+    max-width: 56rem;
     text-wrap: pretty;
   }
-  p:first-of-type {
-    margin-bottom: var(--ds-size-2);
-  }
-  p:last-of-type {
-    margin-block: var(--ds-size-3) var(--ds-size-6);
-  }
 }
 .buttons {
   display: flex;
   gap: var(--ds-size-4);
+  margin-block: var(--ds-size-6);
+}
+.necessaryInfo {
+  margin: 0;
 }
@@ -4,51 +4,61 @@ import { useTranslation } from 'react-i18next';
 import { RRLink as Link } from '../link';
 import classes from './consent-banner.module.css';
 
-type BannerProps = { lang: string } & HTMLAttributes<HTMLDivElement>;
+type BannerProps = { lang: string } & HTMLAttributes<HTMLElement>;
 
-export const ConsentBanner = forwardRef<HTMLDivElement, BannerProps>(
+export const ConsentBanner = forwardRef<HTMLElement, BannerProps>(
   function ConsentBanner({ lang, ...rest }, ref) {
     const { t } = useTranslation();
 
     return (
-      <div className={classes.consentBanner} {...rest} ref={ref}>
+      <section
+        aria-labelledby='consent-banner-heading'
+        className={classes.consentBanner}
+        {...rest}
+        ref={ref}
+      >
         <div className={classes.container}>
-          <Heading level={2} data-size='sm'>
+          <Heading id='consent-banner-heading' level={2} data-size='sm'>
             {t('consent-banner.heading')}
           </Heading>
           <Paragraph>
-            {t('consent-banner.required-desc-start')}{' '}
+            {t('consent-banner.desc-start')} {t('consent-banner.desc-end')}{' '}
             <Link
-              to={`/${lang}/intro/privacy-policy#${lang === 'no' ? 'nødvendige-informasjonskapsler' : 'necessary-cookies'}`}
+              to={`/${lang}/intro/privacy-policy#${lang === 'no' ? 'valgfrie-informasjonskapsler' : 'optional-cookies'}`}
             >
-              {t('consent-banner.required-desc-link')}
-            </Link>{' '}
-            {t('consent-banner.required-desc-end')}
+              {t('consent-banner.desc-link')}
+            </Link>
           </Paragraph>
-          <Paragraph>{t('consent-banner.all-desc')}</Paragraph>
-          <Paragraph>{t('consent-banner.declaration')}</Paragraph>
           <form method='post' action='/api/consent' className={classes.buttons}>
             <Button
               type='submit'
               name='action'
-              value='required'
+              value='approve'
               data-color='neutral'
               data-size='sm'
             >
-              {t('consent-banner.required')}
+              {t('consent-banner.approve')}
             </Button>
             <Button
               type='submit'
               name='action'
-              value='all'
+              value='decline'
               data-color='neutral'
               data-size='sm'
             >
-              {t('consent-banner.all')}
+              {t('consent-banner.decline')}
             </Button>
           </form>
+          <Paragraph className={classes.necessaryInfo} data-size='sm'>
+            <Link
+              to={`/${lang}/intro/privacy-policy#${lang === 'no' ? 'nødvendige-informasjonskapsler' : 'necessary-cookies'}`}
+            >
+              {t('consent-banner.necessary-info-link')}
+            </Link>{' '}
+            {t('consent-banner.necessary-info-end')}
+          </Paragraph>
         </div>
-      </div>
+      </section>
     );
   },
 );
@@ -4,7 +4,7 @@
 
 import { CONSENT_VERSION, userConsent } from './cookies';
 
-export type ConsentChoice = 'all' | 'required' | null;
+export type ConsentChoice = 'approve' | 'decline' | null;
 
 export async function getConsentFromCookie(): Promise<{
   choice: ConsentChoice;
@@ -31,7 +31,7 @@ export async function shouldIncludeSiteimprove(): Promise<boolean> {
   const consent = await getConsentFromCookie();
   return (
     consent !== null &&
-    consent.choice === 'all' &&
+    consent.choice === 'approve' &&
     consent.version === CONSENT_VERSION
   );
 }
@@ -1,6 +1,6 @@
 import { createCookie } from 'react-router';
 
-export const CONSENT_VERSION = '2';
+export const CONSENT_VERSION = '3';
 
 const isProduction = process.env.NODE_ENV === 'production';
 

@@ -19,7 +19,7 @@ Used to remember the cookie consent you have given or declined on designsystemet
 Designsystemet.no uses React as a tool to build web pages and handle user choices and clicks. `react-router-scroll-positions` is used to remember the position on the page where the user was when navigating between pages.
 
 ## Optional cookies
-Optional cookies are only activated if you provide consent. If you choose “Accept all”, we use the analytics tool Siteimprove to collect anonymised usage statistics. This information is used to improve our services and better understand users’ needs.
+Optional cookies are only activated if you provide consent. If you answer yes to letting us collect information about how the website is used, we use the analytics tool Siteimprove to collect anonymised usage statistics. This information is used to improve our services and better understand users’ needs.
 
 ## My choices
 Press the button below to delete your cookie choices and to manage your preferences again.

@@ -19,7 +19,7 @@ Brukes for å huske samtykket for informasjonskapsler du har gitt eller avslått
 Designsystemet.no bruker React som verktøy for å produsere nettsider og følge opp brukerens valg og klikk. `react-router-scroll-positions` brukes til å huske hvilken posisjon på nettsiden som brukeren var på, når brukeren navigerer mellom nettsider.
 
 ## Valgfrie informasjonskapsler 
-Valgfrie informasjonskapsler aktiveres kun dersom du gir samtykke. Dersom du velger «Godkjenn alle», tar vi i bruk analyseverktøyet Siteimprove for å samle inn anonymisert bruksstatistikk som benyttes til å forbedre tjenestene våre og forstå brukernes behov bedre.
+Valgfrie informasjonskapsler aktiveres kun dersom du gir samtykke. Dersom du svarer ja til at vi kan samle informasjon om hvordan nettsiden brukes, tar vi i bruk analyseverktøyet Siteimprove for å samle inn anonymisert bruksstatistikk som benyttes til å forbedre tjenestene våre og forstå brukernes behov bedre.
 
 ## Mine valg 
 Trykk på knappen under for å slette dine valg for informasjonskapsler, og for å administrere dine preferanser på nytt.
@@ -33,4 +33,4 @@ Trykk på knappen under for å slette dine valg for informasjonskapsler, og for
     >
         Nullstill mine valg
     </button>
-</form>
+</form>
@@ -121,17 +121,17 @@ export default {
     'skip-link': 'Skip to main content',
   },
   'consent-banner': {
-    heading: 'Can we collect data about how you use the website?',
-    all: 'Accept',
-    'all-desc':
-      'If you accept, we will also collect data about how the website is used. This helps us improve our services.',
-    declaration:
-      'You can change your choice at any time at the bottom of our pages.',
-    required: 'Decline',
-    'required-desc-start': 'We use some',
-    'required-desc-link': 'essential cookies',
-    'required-desc-end':
-      'to make the website work. These cannot be opted out of.',
+    heading: 'Can we collect information about how the website is used?',
+    approve: 'Yes',
+    decline: 'No',
+    'desc-start':
+      'If you answer yes, we store and analyse information that helps us improve the website.',
+    'desc-end':
+      'You can change your choice at any time at the bottom of the page.',
+    'desc-link': 'More about what we store and why.',
+    'necessary-info-link': 'We also store necessary information',
+    'necessary-info-end':
+      'that cannot be opted out of. This makes the website work and keeps it secure.',
   },
   errors: {
     default: {

@@ -120,17 +120,16 @@ export default {
     'skip-link': 'Hopp til hovedinnhold',
   },
   'consent-banner': {
-    heading: 'Vil du godta at vi samler inn data om bruk av nettsiden?',
-    all: 'Godta',
-    'all-desc':
-      'Hvis du godtar, samler vi også inn data om hvordan nettsiden brukes. Dette hjelper oss å forbedre tjenestene våre.',
-    declaration:
-      'Du kan når som helst endre valget ditt nederst på våre sider.',
-    required: 'Avslå',
-    'required-desc-start': 'Vi bruker noen',
-    'required-desc-link': 'nødvendige informasjonskapsler',
-    'required-desc-end':
-      'for at nettsiden skal fungere. Disse kan ikke velges bort.',
+    heading: 'Får vi samle informasjon om hvordan nettsiden brukes?',
+    approve: 'Ja',
+    decline: 'Nei',
+    'desc-start':
+      'Hvis du svarer ja, lagrer og analyserer vi informasjon som hjelper oss å forbedre nettsiden.',
+    'desc-end': 'Du kan når som helst endre valget ditt nederst på siden.',
+    'desc-link': 'Mer om hva vi lagrer og hvorfor.',
+    'necessary-info-link': 'Vi lagrer også nødvendig informasjon',
+    'necessary-info-end':
+      'som ikke kan velges bort. Dette gjør at nettsiden fungerer og er trygg.',
   },
   errors: {
     default: {

@@ -17,8 +17,11 @@ export async function action({ request }: Route.ActionArgs) {
       maxAge: 0,
     });
   } else {
+    const consentChoice =
+      choice === 'approve' || choice === 'decline' ? choice : 'decline';
+
     cookieHeader = await userConsent.serialize({
-      choice,
+      choice: consentChoice,
       version: CONSENT_VERSION,
     });
   }