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

33
public/index.html
View file

@ -120,10 +120,15 @@
color: var(--ink);
transition: border-color 0.15s, box-shadow 0.15s;
}
.topic-card:hover {
.topic-card:hover,
.topic-card:focus-visible {
border-color: var(--accent);
box-shadow: 0 2px 12px rgba(192,57,43,0.08);
}
.topic-card:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.topic-card h2 {
font-family: 'Fraunces', serif;
font-size: 1.1rem;
@ -166,6 +171,29 @@
border-top: 1px solid var(--border);
}
footer a { color: var(--ink3); }
footer a:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.skip-link {
position: absolute;
top: -100%;
left: 1rem;
background: var(--ink);
color: var(--bg);
padding: 0.75rem 1.25rem;
border-radius: 0 0 4px 4px;
font-size: 0.9rem;
z-index: 1000;
text-decoration: none;
}
.skip-link:focus { top: 0; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
}
}
</style>
<!-- Privacy-friendly analytics by Plausible -->
<script async src="/js/script.js"></script>
@ -175,6 +203,7 @@
</script>
</head>
<body>
<a href="#main" class="skip-link">Hopp til hovedinnhold</a>
<header>
<p class="eyebrow">forskjeller.naiv.no</p>
@ -182,7 +211,7 @@
<p class="lead">Interaktive visualiseringer som viser hvordan tilsynelatende små forskjeller vokser over tid.</p>
</header>
<main>
<main id="main">
<section class="topic-group">
<h2 class="group-heading">Lønn &amp; arbeid</h2>