olemd/forskjeller.naiv.no
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Forbedre tilgjengelighet (WCAG 2.2 AA) på alle sider

Browse source 
- Øk kontrast på slider-labels fra 0.45 til 0.6 opasitet (1.4.3)
- Legg til :focus-visible-stiler på slidere, kort og lenker (2.4.7)
- Legg til skip-link «Hopp til hovedinnhold» på alle sider (2.4.1)
- Knytt form-labels til inputs med for-attributt (1.3.1)
- Legg til role="img" og aria-label på alle chart-canvas (4.1.2)
- Legg til aria-live="polite" på slider-verdivisninger (4.1.3)
- Merk dekorative elementer med aria-hidden="true" (1.3.1)
- Legg til @media (prefers-reduced-motion: reduce) (2.3.3)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Ole-Morten Duesund 2026-03-25 20:53:44 +01:00
commit c6b70e1e5d
9 changed files with 147 additions and 76 deletions
Download patch file Download diff file Expand all files Collapse all files

31
public/lonn/index.html
View file

@ -23,50 +23,51 @@
</script>
</head>
<body>
<a href="#main" class="skip-link">Hopp til hovedinnhold</a>
<header>
<p class="eyebrow">Samme prosent. Ikke det samme resultatet.</p>
<h1>Lønnsforskjellen<br><em>vokser</em></h1>
<p class="lead">Prosentvise lønnstillegg ser rettferdige ut — men de gjør de rike rikere, hvert eneste år. Se hva som skjer over tid.</p>
<div class="stamp">Spis de rike</div>
<div class="stamp" aria-hidden="true">Spis de rike</div>
</header>
<div class="small-diff-banner">
<span class="sd-icon">↗</span>
<span class="sd-icon" aria-hidden="true">↗</span>
<span>Selv en liten forskjell på <strong id="banner-diff">50 000 kr</strong> i startlønn blir til over <strong id="banner-gap">—</strong> i løpet av en karriere — med identisk prosentvekst.</span>
</div>
<main>
<main id="main">
<div class="controls-card">
<h2>Sjekk selv</h2>
<div class="controls-grid">
<div class="control-group">
<label>Lønn A — lav startlønn</label>
<label for="salA">Lønn A — lav startlønn</label>
<div class="val-row">
<input type="range" id="salA" min="300000" max="1200000" step="10000" value="500000">
<span class="val-display" id="salA-out">500 000 kr</span>
<span class="val-display" aria-live="polite" id="salA-out">500 000 kr</span>
</div>
</div>
<div class="control-group">
<label>Lønn B — høy startlønn</label>
<label for="salB">Lønn B — høy startlønn</label>
<div class="val-row">
<input type="range" id="salB" min="300000" max="2000000" step="10000" value="550000">
<span class="val-display" id="salB-out">550 000 kr</span>
<span class="val-display" aria-live="polite" id="salB-out">550 000 kr</span>
</div>
</div>
<div class="control-group">
<label>Årslig lønnsvekst (% — lik for begge)</label>
<label for="pct">Årslig lønnsvekst (% — lik for begge)</label>
<div class="val-row">
<input type="range" id="pct" min="1" max="10" step="0.5" value="3.5">
<span class="val-display" id="pct-out">3,5 %</span>
<span class="val-display" aria-live="polite" id="pct-out">3,5 %</span>
</div>
</div>
<div class="control-group">
<label>Antall år</label>
<label for="yrs">Antall år</label>
<div class="val-row">
<input type="range" id="yrs" min="5" max="40" step="1" value="20">
<span class="val-display" id="yrs-out">20 år</span>
<span class="val-display" aria-live="polite" id="yrs-out">20 år</span>
</div>
</div>
</div>
@ -110,7 +111,7 @@
<span><span class="swatch" style="background:#c0392b;"></span>Lønn B</span>
</div>
</div>
<div class="chart-wrap h-240"><canvas id="chart1"></canvas></div>
<div class="chart-wrap h-240"><canvas id="chart1" role="img" aria-label="Diagram: Årslønn over tid"></canvas></div>
</div>
<!-- Diagram 2: Årlig gap -->
@ -124,7 +125,7 @@
<span><span class="swatch" style="background:#4a3a8a;"></span>Gap (år)</span>
</div>
</div>
<div class="chart-wrap h-200"><canvas id="chart2"></canvas></div>
<div class="chart-wrap h-200"><canvas id="chart2" role="img" aria-label="Diagram: Absolutt lønnsforskjell per år"></canvas></div>
</div>
<div class="insight" id="insight-monthly"></div>
@ -140,7 +141,7 @@
<span><span class="swatch" style="background:#2c6e49;"></span>Gap (måned)</span>
</div>
</div>
<div class="chart-wrap h-200"><canvas id="chart3"></canvas></div>
<div class="chart-wrap h-200"><canvas id="chart3" role="img" aria-label="Diagram: Lønnsforskjell per måned"></canvas></div>
</div>
<!-- Diagram 4: Akkumulert -->
@ -156,7 +157,7 @@
<span><span class="swatch" style="background:#b5620a;"></span>Akkum. gap</span>
</div>
</div>
<div class="chart-wrap h-240"><canvas id="chart4"></canvas></div>
<div class="chart-wrap h-240"><canvas id="chart4" role="img" aria-label="Diagram: Akkumulert total lønn utbetalt"></canvas></div>
</div>
<!-- Forklaring -->