Forbedre tilgjengelighet (WCAG 2.2 AA) på alle sider

- Ø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>

public/style.css

@@ -27,6 +27,23 @@ body {
   min-height: 100vh;
 }
 
+/* SKIP LINK */
+.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;
+}
+
 /* HEADER */
 header {
   background: var(--ink);
@@ -97,7 +114,7 @@ main {
   font-size: 1rem;
   font-weight: 300;
   font-style: italic;
-  color: rgba(245,242,235,0.5);
+  color: rgba(245,242,235,0.6);
   margin-bottom: 1.5rem;
   letter-spacing: 0.03em;
 }
@@ -115,7 +132,7 @@ main {
   font-size: 12px;
   letter-spacing: 0.08em;
   text-transform: uppercase;
-  color: rgba(245,242,235,0.45);
+  color: rgba(245,242,235,0.6);
   margin-bottom: 0.5rem;
   font-weight: 400;
 }
@@ -142,6 +159,11 @@ main {
   transition: transform 0.1s;
 }
 .control-group input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.2); }
+.control-group input[type=range]:focus-visible {
+  outline: 2px solid #e8b4a0;
+  outline-offset: 4px;
+  border-radius: 2px;
+}
 .control-group input[type=range]::-moz-range-thumb {
   width: 16px; height: 16px;
   border-radius: 50%;
@@ -356,6 +378,10 @@ footer {
   margin-top: 3rem;
 }
 footer a { color: var(--ink3); }
+footer a:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
 
 /* RESPONSIVE CHART HEIGHTS */
 .h-240 { height: 240px; }
@@ -368,3 +394,12 @@ footer a { color: var(--ink3); }
   .controls-card { padding: 1.25rem; }
   .explainer { padding: 1.25rem; }
 }
+
+/* REDUCED MOTION */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    transition-duration: 0.01ms !important;
+    animation-duration: 0.01ms !important;
+  }
+  html { scroll-behavior: auto; }
+}