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

11
public/lonnsutvikling/index.html
View file

@ -95,19 +95,20 @@
</style>
</head>
<body>
<a href="#main" class="skip-link">Hopp til hovedinnhold</a>
<header>
<p class="eyebrow">Reelle tall fra SSB, 2016–2025</p>
<h1>Dobbel<br><em>ulikhet</em></h1>
<p class="lead">De høyest lønte fikk ikke bare flere kroner — de fikk også høyere prosentvis vekst. Dobbel ulikhet i praksis.</p>
<div class="stamp">Lønnsfesten</div>
<div class="stamp" aria-hidden="true">Lønnsfesten</div>
</header>
<div class="source-strip">
Data: <a href="https://www.ssb.no/statbank/table/11418/" target="_blank" rel="noopener">SSB tabell 11418</a> — Gjennomsnittlig månedslønn, alle sektorer, begge kjønn, 2016–2025
</div>
<main>
<main id="main">
<!-- Nøkkeltall -->
<div class="key-number">
@ -146,7 +147,7 @@
</div>
<div class="legend" id="legend1"></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: Månedslønn over tid"></canvas></div>
</div>
<div class="insight">
@ -167,7 +168,7 @@
<span><span class="swatch" style="background:#c0392b;"></span>Prosentvekst</span>
</div>
</div>
<div class="chart-wrap" style="height:340px;"><canvas id="chart2"></canvas></div>
<div class="chart-wrap" style="height:340px;"><canvas id="chart2" role="img" aria-label="Diagram: Dobbel ulikhet — kronevekst vs prosentvekst"></canvas></div>
</div>
<div class="insight">
@ -185,7 +186,7 @@
</div>
<div class="legend" id="legend3"></div>
</div>
<div class="chart-wrap" style="height:280px;"><canvas id="chart3"></canvas></div>
<div class="chart-wrap" style="height:280px;"><canvas id="chart3" role="img" aria-label="Diagram: Alle hovedyrkesgrupper"></canvas></div>
</div>
<!-- Forklaring -->